.main-section {
padding-top: 79px;
padding-left: 500px;
width: 903px;
font-family: 'Anton', sans-serif;
display: block;
object-fit: cover;
}
.background {
position: fixed;
left: 0px;
top: 0px;
display: inline-block;
}
.wholeArea {
position: absolute;
top: 0;
right: 0;
}
.title {
font-size: 60px;
color: #132c54;
padding-bottom: 10px;
}
.description {
font-size: 25px;
color: #2569c8;
line-height: 29px;
margin-bottom: 8px;
}
.inputText {
font-size: 30px;
color: #132c54;
background-color: white;
}
.inputField {
font-size: 30px;
color: #132c54;
border-color: #132c54;
border-width: 4px;
border-style: solid;
outline-color: #132c54;
border-radius: 6px;
}
.noDecoration {
/* No Text Decoration */
text-decoration: none;
color: #132c54;
}
.selectInput {
width: 413px;
color: #132c54;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
}
.textInput {
width: 400px;
display: inline;
color: #132c54;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
padding-left: 3px;
}
.selectOption {
font-size: 30px;
color: #132c54;
}
.buttonStyle {
font-size: 35px;
color: #132c54;
background-color: white;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
}
.buttonToggleStyle {
font-size: 25px;
color: #132c54;
background-color: white;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
margin-right: 20px;
}
.radioStyle {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: top;
}
.leftColumnBox {
position: absolute;
margin-right: 100px;
width: auto;
height: auto;
}
.leftColumnBox2 {
position: absolute;
margin-top: 321px;
margin-right: 100px;
width: auto;
height: auto;
}
.rightColumnBox {
position: absolute;
margin-right: 100px;
width: auto;
height: auto;
}
.rightColumnBox2 {
position: absolute;
margin-top: 321px;
margin-right: 100px;
width: auto;
height: auto;
}
.leftColumn {
width: auto;
height: auto;
margin-top: 81px;
margin-left: 100px;
margin-right: 100px;
float: left;
position: fixed;
display: inline;
top: 0px;
left: 0px;
}
.rightColumn {
width: auto;
height: auto;
margin-top: 81px;
margin-left: 100px;
margin-right: 400px;
float: left;
position: fixed;
display: inline;
top: 0px;
right: 0px;
}
.advertImage {
border: 10px white solid;
border-radius: 6px;
width: 300px;
height: auto;
}
.resultsSection {
display: none;
}
.radioArea {
height: 45px;
width: 700px;
display: block;
}
.inputArea {
height: 50px;
width: 700px;
display: block;
}
.labelText {
width: 150px;
display: inline-block;
}
.resultsText {
line-height: 40px;
padding: 0px;
border: 0px;
margin: 0px;
}
.resultsHeaderText {
line-height: 40px;
padding: 0px;
border: 0px;
margin: 0px;
margin-bottom: 10px;
}
.hideInput {
display: block;
}
.mainBorder {
border: 20px solid white;
border-radius: 12px;
background-color: white;
}
.titleBorder {
border: 20px solid white;
border-bottom: none;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: white;
}
.descBorder {
border: 20px solid white;
border-top: none;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
background-color: white;
}
.tabContent {
display: none;
margin-bottom: 8px;
}
.tabSwitch {
margin-bottom: 8px;
}
I am trying to move a div into the top corner of a page to act as a background. When I use position: fixed;, the other elements of the page are shifted around but when I use position: relative, the are in the correct position. I want to make the div sticky when I scroll so it always stays in the same position in the background.
How can I do this?
.background {
position: fixed;
top: 0px;
right: 0px; }
<span id="background" class="background"></span>