Adjust the background to scroll to the bottom of the image first and then change it to be fixed

Here is the code I have written:

body{
margin:0;
padding:0;
line-height: 1.5em;
background-image: url(http://fehlbelichtet.stefanwensing.de/wp-content/uploads/sites/6/2016/04/alte-strasse-endlos.jpg); 
background-repeat:no-repeat;
background-attachment: fixed;


h1 {
color: #e29532;
margin: 0;
padding: 20px;
font-family:verdana;
font-size: 60px;
line-height: 50px;
letter-spacing: -2px;
font-weight: bold;
text-align:center;
}

h2 {
font-size:20px;
font-family:verdana;
color:#e29532;
}

p {
font-family:verdana;
}

b  {
font-size: 110%;
}

#topsection{
background: #dddce1;
height: 100px; /*Height of top section*/
margin:0;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/

}


#footer{
clear: left;
width: 100%;
text-align: center;
padding: 4px 0;
}

#footer a{
color: white;
}

.innertube{
margin:0;
}
@media (max-width: 840px){ /* 1st level responsive layout break point- drop right column down*/



#contentcolumn{
margin-right: 0; /*Set margin to LeftColumnWidth*/
}
}

@media (max-width: 600px){ /* 2nd level responsive layout break point- drop left column down */


#contentcolumn{
margin-left: 0;
}
}

label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-family:verdana
 }

fieldset {
border-radius:4px;
background: rgba(0,0,0,0.6);
font-family:verdanda;
color:white;
}

legend {

}

input {
border-radius:4px;
}

select {
border-radius:4px;
}

textarea {
opacity:0.8;
border-radius:4px;
font-family:verdana;
}

table {
font-family:verdana;
}
<!DOCTYPE html>
<html>
<head>
<title>Win a Car!</title>
<link rel="shortcut icon" href="volvo.ico"></link>
<link rel="stylesheet" type="text/css" href="form.css">
<meta charset="UFT-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">

<h1> Win a car </h1>
<hr>


</div>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<br>
<form>
<fieldset class="fieldset">
<legend></legend>
<h2>Personal Information</h2>

<br>

<label for="name">First Name:</label>
<input type="text" placeholder="First Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'First Name'" required />

<br>
<br>

<label for="lastname">Last Name:</label>
<input type="text" placeholder="Last Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Last Name'" required />

<br>
<br>

<label for="age">Age: </label>
<select name="age">
<option value="18-25">18-25</option>
<option value="25-35">25-35</option>
<option value="35-50">35-50</option>
<option value="50+">50+</option>
</select>

<br>
<br>

<label for="gender">Gender:</label>

<table>
<tr>
<td>Male</td>
<td><input class="radio" type="radio"></input></td>
</tr>
<tr>
<td>Female</td>
<td><input class="radio" type="radio"></input></td>
</tr>
<tr>
<td>Other</td>
<td><input class="radio" type="radio"></input></td>
</tr>
</table>

<br>

<label for="email">Email:</label>
<input type="email" placeholder="Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email'" required/>

<br>
<br>

<label for="address">Address:</label>
<input type="text" placeholder="Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Address'"/>

<br>
<br>

<label for="zipcode">Zip Code:</label>
<input type="text" placeholder="Zip Code" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Zip Code'"/>

<br>
<br>

<label for="city">City:</label>
<input type="text" placeholder="City" onfocus="this.placeholder = ''" onblur="this.placeholder = 'City'"/>

<br>
<br>

<label for="number">Phone Number:</label>
<input type="text" placeholder="Phone Number" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Phone Number'"/>
<br>
</fieldset>

<br>
<br>


<fieldset class="fieldset">
<legend></legend>
<h2>If you won?</h2>
<table>
<tr>
<td>Select a car</td>

<td>
<div class="form-group">
<select name="make" id="make">
<option value="">Choose a Volvo type</option>
<option value="XC">XC</option>
<option value="V">V</option>
<option value="S">S</option>
<option value="Plug-in Hybrids">Plug-in Hybrids</option>
</select>
</div>
</td>

<td>
<div class="from-group">
<select name="type" id="type">
<option value="" class="">Choose a Volvo model </option>
<option value="XC90" class="XC">XC90</option>
<option value="XC60" class="XC">XC60</option>
<option value="V60 Cross Country" class="V">V90 Cross Country</option>
<option value="V90" class="V">V90</option>
<option value="V60 Cross Country" class="V">V60 Cross Country</option>
<option value="V60" class="V">V60</option>
<option value="V40 Cross Country" class="V">V40 Cross Country</option>
<option value="V40" class="V">V40</option>
<option value="S90" class="S">S90</option>
<option value="S60 Cross Country" class="S">S60 Cross Country</option>
<option value="S60" class="S">S60</option>
<option value="XC90 T8 Twin Engine" class="Plug-in Hybrids">XC90 T8 Twin Engine</option>
<option value="V60 D6 Twin Engine" class="Plug-in Hybrids">V60 D6 Twin Engine</option>
<option value="V60 D5 Twin Engine" class="Plug-in Hybrids">V60 D5 Twin Engine</option>
</select>
</div>
</td>
</tr>
</table>

<br>

<p>Why should you win:</p>
<textarea rows="20" cols="60"></textarea>

<br>
<br>

</fieldset>

<br>
<br>

<fieldset class="fieldset">
<legend></legend>
<h2>Website Review</h2>

<br>

<p>What do you think about the website</p>
<textarea rows="20" cols="60"></textarea>


<input type="submit" value="Submit" onclick="alert('Thank you for participating!')">
<input type="reset">
</form>
</div>
</div>
</div>


<div id="footer"><a href="http://www.volvocars.com/se?gclid=Cj0KEQjwqMHABRDVl6_hqKGDyNIBEiQAN-O9hMtUPMIE4aak0QmcGyXpDihhM-HkAJVCuGxwqf7fpQUaAmVb8P8HAQ" target="_blank">Volvo</a></div>

</div>

</body>
</html>

I have set my background-attachment to fixed and want the website to scroll down to the end of the image before being set to fixed.

As a beginner in coding, this website is only local on my computer, so I have included the link to the image in the URL for the background-image property.

htmlcss

Answer №1

Modify the CSS property from background to a background image, and include definitions for both background-size and background-position. 

body{
margin:0;
padding:0;
line-height: 1.5em;
background: url(http://fehlbelichtet.stefanwensing.de/wp-content/uploads/sites/6/2016/04/alte-strasse-endlos.jpg); 
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
background-attachment: fixed;
 

h1 {
color: #e29532;
margin: 0;
padding: 20px;
font-family:verdana;
font-size: 60px;
line-height: 50px;
letter-spacing: -2px;
font-weight: bold;
text-align:center;
}

h2 {
font-size:20px;
font-family:verdana;
color:#e29532;
}

p {
font-family:verdana;
}

b  {
font-size: 110%;
}

#topsection{
background: #dddce1;
height: 100px; /*Height of top section*/
margin:0;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/

}


#footer{
clear: left;
width: 100%;
text-align: center;
padding: 4px 0;
}

#footer a{
color: white;
}

.innertube{
margin:0;
}
@media (max-width: 840px){ /* Responsive layout adjustment to drop right column */


#contentcolumn{
margin-right: 0; /*Set margin to LeftColumnWidth*/
}
}

@media (max-width: 600px){ /* Responsive layout adjustment to drop left column */


#contentcolumn{
margin-left: 0;
}
}

label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-family:verdana
 }

fieldset {
border-radius:4px;
background: rgba(0,0,0,0.6);
font-family:verdanda;
color:white;
}

legend {

}

input {
border-radius:4px;
}

select {
border-radius:4px;
}

textarea {
opacity:0.8;
border-radius:4px;
font-family:verdana;
}

table {
font-family:verdana;
}
<!DOCTYPE html>
<html>
<head>
<title>Win a Car!</title>
<link rel="shortcut icon" href="volvo.ico"></link>
<link rel="stylesheet" type="text/css" href="form.css">
<meta charset="UFT-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">

<h1> Win a car </h1>
<hr>


</div>
</div>

<div id="contentwrapper">
...
...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some effective ways to ensure the footer stays at the bottom of the page

I managed to successfully position the footer at the bottom of the page, but I noticed that when I resize the screen to fit a phone, especially when there is scrolling on the page, the footer moves up! <footer className="footerContainer"> &l ...

htmlcsssass

The last value label in Google Charts bar chart getting cut off

I've searched extensively for a solution to this issue regarding the haxis labels, but I have not been able to find one that addresses it... In the image provided below, you'll observe that the last percentage label on the horizontal axis is mis ...

javascripthtmlcssgoogle-visualization

Steps to reposition an element with absolute positioning to the upper left corner of the screen

I am currently in the process of creating a hamburger menu without using JavaScript, which should drop down from the top to the bottom when clicked. The burger menu is situated at the top right corner of the screen, but every time I try to drop down the na ...

htmlcsscss-positionabsolutehamburger-menu

CSS styling not rendering consistently across various web browsers

Hey everyone! I've encountered an issue with my webpage. Feel free to check out the code on my CodePen here. When I view this page on Safari, everything looks perfect. However, when I switch over to Chrome or Firefox, the layout is all messed up. Ele ...

htmlcsscross-browser

Having trouble clicking on SubMenu with selenium web driver

Currently, I am looking into automating a UI application. In this application, there is a menu that displays sub-menus upon hovering the mouse over it. However, I am facing an issue where I am unable to click on the items within the sub-menu. Here is the ...

htmlcssselenium

Show the checked options retrieved from controller

I am facing an issue with displaying certain checkbox values from the controller. In order to properly save these values, I believe it would be best to declare them in the controller and then use them in the HTML. However, my current code is not successful ...

htmlangularjs

Verify if a personalized angular directive is able to display or conceal an element

I have a custom directive that toggles the visibility of an element based on the value of another service. I attempted to write a test to verify if the directive functions as intended. Initially, I used the ":visible" selector in my test, but it consistent ...

javascriptjqueryhtmlcssangularjs

Stop the Enter key from functioning as a mouse click

Whenever an element is focused on and a mouse click action can be triggered, I've observed that the Enter key functions as if you're clicking the mouse left button. This behavior is causing conflicts in other parts of my code, so I need to find a ...

javascriptjqueryhtml

Why doesn't the background color display properly when the div height is set to auto?

When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want # ...

csshtmlheight

Tips for enhancing the color saturations of cells that overlap in an HTML table

My goal is to enhance the color of overlapping cells in my HTML tables. For instance, when I click on cell 2, the .nextAll(':lt(5)') method will change the class of the next 4 cells. https://i.stack.imgur.com/mwv8x.png Next, clicking on cell 3 ...

javascriptjqueryhtmlcss

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

Can anyone assist with implementing the following features in D3 JS? I need to fix the x-axis position so that it doesn't scroll. The values on the x-axis are currently displayed as numbers (-2.5, -2.0, etc.), but I want them to be shown as percentag ...

javascriptcsstypescriptd3.jsbar-chart

Tips for resolving flickering animations in CSS and JavaScript

Is it possible to dynamically set a scale and margin for an element in order to center it fluidly using the wheel event? I am aiming to achieve a smooth transition while also adjusting scroll position on the wrapping element in a fluid manner. In the prov ...

javascriptcss

As soon as I hit the submit button on my website form, the URL is automatically refreshed with the information I provided

I am a beginner when it comes to forms and recently copied and pasted this login snippet code: <div class="login-form-1"> <form id="login-form" class="text-left"> <div class="main-login-form"> <div class="login-group"> ...

javascriptjqueryhtmlcss

Transferring data from a form to a function in JavaScript

Hey there! I've been working on a form that sends a value to a new window, but for some reason, the value val2 is showing up as null in the new window instead of being passed. Here's my code: function sendValue(value) { ViewImg = window.ope ...

javascripthtmlforms

Problem with the show/hide feature on jQuery. Automatically scrolls to the beginning of the page

On my website, I have successfully implemented two basic Show / Hide links that are working great. Here is the HTML code: <!DOCTYPE html> <html lang="en"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" conte ...

javascriptjqueryhtmlhideshow

Designing the Mailchimp signup form with React styling techniques

I downloaded the NPM React module for Mailchimp from this link: https://www.npmjs.com/package/react-mailchimp-form. It works well and provides all the necessary forms, but I'm having trouble customizing its style. The documentation suggests adding a ...

cssreactjsmailchimp

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...

htmlcss

Enclosing floated elements within a parent div

Looking for a way to make a div wrap around a changing number of child elements without specifying a width for the parent? I've managed to get the content wrapping by floating both the child and parent elements, but I'm facing an issue when the ...

htmlcss

Tips for developing a sophisticated HTML quiz

I have spent countless hours perfecting this quiz. I have successfully created a quiz that reveals solutions at the end, but I want to take it one step further. I envision the answers appearing after each incorrect response from the user, and no answer sho ...

javascripthtml

Having a newline between HTML elements can disrupt the structure of an HTML layout

It's common knowledge that in html, a newline between elements is treated as space. However, I find it quite alarming when working on responsive layouts. For instance, take a look at this example where the expected and correct behavior is achieved on ...

htmlcssnewlinespace