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

Storing various duplicates of items in local storage

Looking for help with storage settings in HTML/JavaScript as I work on a mobile not taking app using Phonegap. My goal is to allow users to input a note name and content, save them into a jquery mobile list, and see them on the home screen. However, I&apos ...

javascripthtmlcordovajquery-mobilelocal-storage

Attempting to increase the size of the menu text upon hover action

It seems like a basic mistake on my part, but I just can't seem to make it work. What I'm trying to achieve is that when you hover over a specific item in the menu, the text within that item should increase in size. However, currently it only en ...

htmlcss

How can I prevent or override the text being pushed to the right by CSS::before?

Using the css property ::before, I am attempting to insert a tag before a paragraph. While I am able to display the tag correctly, it is causing the text within the paragraph to be shifted to the right. Ideally, I would like the tag to appear in the top-le ...

css

Transform a dynamic Maya model into JSON format for seamless integration with Three.js

After creating a Maya model in Maya 2008, I need to convert it to a JSON format for use with three.js. I have experimented with different methods including: 1) Utilizing the threeJsFileTranslator.py Maya plugin provided in the threejs package. 2) Trying ...

htmlthree.jswebgl

auto-scrolling webpage as elements come into view

Here is some jQuery code I have: $(".col-md-12").hide(); $(".button-div").hide(); $(".featurette-divider").hide(); $(".footer").hide(); $(".first").fadeIn(1000); $(".second").delay(900).fadeIn(1000); $(".third").delay(1800).fadeIn(1000); $(".fourth").dela ...

javascriptjqueryhtmlcss

Access and retrieve data from a string using XPath with JavaScript

My HTML page content is stored as a string shown below: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </ ...

javascripthtmlxpath

Refresh the HTML table following each AJAX request

Each time my AJAX requests are made, new rows keep getting added to my HTML table. I need the table to be updated with fresh data on each call, without appending. This is my current code: var data = $('#data_input').val(); var tableRef = docume ...

javascriptjqueryhtmlajax

The div element's width does not match the width of the textbox

I attempted to implement the following code in HTML. However, I am puzzled as to why the text box and div width are not the same size. Here is what I have experimented with. <style> .test { border:1px solid red;width:100px;height:30px;padding:3p ...

htmlcss

Left-aligned arrow for Material UI select dropdown

Just starting out with material ui and I'm trying to grasp a few concepts. I have a basic select component but encountering two issues. Firstly, I'd like to move the arrow icon of the select to the left side instead of the right. Additionally, ...

cssreactjsmaterial-uiposition

Guide for using a CSS variable in a dynamic CSS class within a dynamic component

I'm working with library components and running into an issue with CSS when importing the same component multiple times within a parent component with different styles. import "../myCss.css" const CircleComponent = ({size , color}) => { ...

cssreactjsnext.jsmodulestyles

Creating an online bidding platform using ASP.Net, MVC 5, and Entity Framework

Having recently delved into the world of ASP.NET, I am in the process of developing a basic auction site for a charitable cause. Utilizing MVC 5 and Entity Framework with Code-First approach for database management. The core of this project is the Item mo ...

asp.netasp.net-mvchtmlentity-frameworkrazor

Manipulating Object origin data

I'm unsure if this can be achieved. I am aiming to create a header and footer that remain the same while only switching the content pages. The resources I have at my disposal cover HTML, JS, CSS, and JQuery. Below is a simplified version of my curre ...

javascripthtml

Toggle visibility of table row upon user click (HTML/JQuery)

Having an issue with showing or hiding table rows using jQuery. I would like it so that when a user clicks on a table row with id="jobtitle", the corresponding tr with class="texter" will either show up or hide if it is already displayed. This is my curre ...

javascriptphpjqueryhtml

Arrange four Divs next to each other with flexbox styling

I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...

javascripthtmlcssresponsive-designuser-experience

Is anyone else experiencing differences in the appearance of my mega menu between Safari, Firefox, and Chrome? It seems like

When viewing in Safari, the text overlaps for some reason. It works fine on Firefox and Chrome. Here's a screenshot of the issue: Safari: https://i.stack.imgur.com/hf7v2.png Firefox: https://i.stack.imgur.com/NrOOe.png Please use Safari to test th ...

javascriptjqueryhtmlcsssafari

How can I incorporate multiple JSX files into plain HTML without using npm?

I have a question regarding importing JSX files in an HTML file without using npm and directly running it with LiveServer. I have two files, index.js and app.jsx, that I want to connect within my index.html script. How can I achieve this? Code: index.html ...

javascripthtmlreactjsnpmliveserver

I am working with three columns and I am looking to keep the center column fixed in place while scrolling

Check out this CSS snippet: #container { margin: 0 auto; width: 1200px; } #col1 { float: left; width: 700px; } #col2 { float: left; width: 100px; padding: 0 17px; } #col3 { float: left; width: 400px; } I am trying t ...

htmlcss

Unable to eliminate border from image within label

The following code generates a border that appears to be approximately 1px thick and solid, colored grey around the image. Despite setting the border of the image to none, the border still remains. Here is the code snippet: <label> <img styl ...

htmlcss

Tips for showing text on top of a responsive image using CSS

I am working on a layout with 4 columns, each containing images of different sizes followed by a hover effect with an absolutely positioned mask. The width of the mask is currently exceeding the width of the images. Is there a way to ensure that the mask ...

htmlcssresponsive-design

What is the best way to display my menu bar when the icon is hovered over?

I want to create a menu bar similar to the one found on . I am unsure of how they achieved this effect, but it seems to involve a scroll-over action. However, when I attempt to replicate it, the words still appear even when the menu bar is collapsed. < ...

htmlcssmenubar