Tips for maintaining a stationary background during scrolling movements

Check out the following CSS code:

#bigwrapper{
    background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg');
    background-repeat: no-repeat;
    background-position: fixed;
    width: 100%;
}

Here is the corresponding HTML:

<body id="bigwrapper">...</body>

I tried to make the background image stay in place as I scroll down, similar to how I did with my header. However, it didn't work. Here's the CSS I used for the header:

CSS:

.header1{
    position: fixed;
    width: 100%;
    margin: -100px auto;
    border: 1px solid blue;
    width: 1300px;
    margin-left: -8px;
    background: rgba(107, 168, 237, .8);
    background-position: center;
    opacity: 0.7;
}

And here is the corresponding HTML:

<div id="title" class="header1">
        <header><h1 ="title1" class="allTitle">The Water Project</h1></header>
</div>
htmlcssbackground-image

Answer №1

Here is a recommended style for your website:

#bigwrapper {
    background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    width: 100%;
}

Make sure to include background-attachment: fixed; in your CSS.

Answer №2

VIEW LIVE DEMO

    background-attachment: fixed;

If you add the above line to your CSS, it will fix the background image in place.

#bigwrapper{
        background-image: url('https://www.example.com/background.jpg');
        background-repeat: no-repeat;
         background-position: top left;
         background-attachment: fixed;
        width: 100%;
    }

Answer №3

While working on a fiddle and getting a bit distracted before posting, it seems others got there before me. However, I wanted to share the fiddle I created:

http://jsfiddle.net/lkritchey/867VX/3/embedded/result/

As mentioned by others, remember to utilize 

background-attachment: fixed

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

Toggle the visibility of HTML elements by utilizing a JavaScript checkbox event

I have put together these JavaScript functions to hide the delivery address fields on my shopping cart address form if the goods are being sent to the billing address. The functions control the visibility of the HTML wrapped by... function getItem(id) { ...

javascriptcsscheckbox

Fetching JSON data cross-domain with the help of JavaScript or JQuery

I am currently attempting to retrieve JSON data from this specific url. However, I am encountering difficulties in making it function as intended. The goal is to seamlessly integrate the school's lunch menu utilizing NutriSlice. We are leveraging Ris ...

javascriptjqueryhtmljsonget

How about having one row with five divs of equal width, each with a margin-right of 20px?

Is there a way to achieve 5 floating divs on one row with a 20px margin-right between each, except for the last-child? This is the desired structure: <div class="f-item pull-left">1</div> <div class="f-item pull-left">2</div> < ...

htmlcsstwitter-bootstrap-3

Do you think my plan to develop an HTML parser from the ground up will be successful?

My goal is to enhance my skills by building an HTML parser. The basic idea I have in mind includes: Defining the tokenization using regex. Taking a string of HTML as input. Iterating through the HTML string. Storing details about each token, such as cont ...

javascripthtmlhtml-parsing

Show SVG in img tag on entire screen

I am facing an issue where my SVG image is not fully visible when displayed within an img tag on the browser's full screen. The bottom part of the image gets truncated, making it inaccessible to users. Below is the code snippet I have been using: ht ...

htmlcsssvg

Implementing image logout functionality in PHP

Is there a way I can associate an image with the logout link generated by this command? Thank you. <?php echo $login->get_link_logout(); ?> ...

phphtml

Retrieve container for storing documents in JavaServer Pages

Previously, I created JSP and HTML code to upload a file from the hard disk into a database using <input type="file" name="upfile"> However, a dialog box with an "Open" button is displayed. What I am looking for is a "Save" button that will allow u ...

javajavascripthtmljsp

What are some effective ways to align an image to the left and text to the right within a table

I need to display a member with a higher rank, showing the user image along with their username. However, I am struggling to align the image and text properly due to varying username lengths causing them to appear in a zig-zag position. Here is what I hav ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Creating a dynamic layout of 9 divs in a fluid 3x3 grid

Fiddle | FullScreen UPDATE : New Fiddle | FullScreen View The code snippet provided demonstrates the creation of a grid with dimensions of 3x3, consisting of 9 div elements (with 8 cloned using jQuery). The horizontal alignment of the grid has been ac ...

jqueryhtmlcss

Guide to continuously play the animation, Version 2

I have been struggling with an animation that I need to loop indefinitely. The problem arises when trying to use animation-iteration-count: infinite. It seems like no matter where I place it in the code, whether within the keyframes or normal CSS rules, it ...

htmlcssloopsanimation

Exclusive Chrome Bug Found in Form Tag

My webpage functions flawlessly on IE 7, 8, and 9, Firefox, Safari, and Opera. However, when I view it on Chrome, the positioning of the DIV containing the form is not always correct. If I remove the form tag, the issue goes away. There are no floats, only ...

htmlcssformsgoogle-chromeposition

Is there a way to validate form elements in HTML prior to submitting the form?

In my form, I am utilizing PHP for validation and processing, but I am interested in verifying elements as they are being filled out. Is there a way to check the current value of an element before the form is submitted? ...

javascripthtmlvalidation

How to design a bell curve using CSS styling

Exploring CSS shape design, I am aiming to create a classic bell shape reminiscent of the holiday season. While the top and bottom balls are not essential to my design, here is the basic outline I'm striving for: This is what I have been able to achi ...

cssshapescss-shapes

Crafting a secretive and subtle side menu that pops out when triggered

My website features a hidden side menu that slides out when the main div is hovered over. The challenge arises when I want the side menu to remain visible when interacting with its elements, while still hiding when both the main div and side menu are not b ...

jqueryhtmlcss

What might be causing the button switch case JavaScript functionality to not work properly?

In my Worklight project, I have a code snippet that is supposed to capture the value of a button that a user clicks on and then display that value in a label. However, when I run the project, none of the other functions I have defined seem to work. Strange ...

javascriptjqueryhtmlibm-mobilefirst

Template file for the contact form 7 plugin in Wordpress

I'm currently utilizing the Contact Form 7 plugin on my Wordpress website and I'm curious about which template it directs to when I enter mysite.com/contact/ into the browser. I am interested in making some edits to the template file, but I am un ...

htmlwordpresscontact-form-7

Customizing Background Color of Bottom Tab Content Container in React Native

Hey there, I need some help with changing the color of the bottom tabs screens. They are currently gray by default (as shown in the image) and I want them to be white. I've tried using tabBarStyle but it doesn't seem to work. If anyone has any i ...

cssreact-native

React-Tooltip trimming

Currently, I am facing a dilemma that requires some resolution. The issue at hand is related to the placement of React-Tooltip within the List element. Whenever it's positioned there, it gets clipped. On the other hand, placing it at the bottom isn&a ...

javascriptcssreactjsmaterial-ui

Optimize the layout with Grid CSS to allow the last two items to dynamically occupy

I've been working on a layout that looks like this: X X X X X X X X A B Currently, I have used grid-template-columns: repeat(4, 1fr); to define the columns. However, what I actually want is for the last two items to take up the full width of the rem ...

csscss-grid

Is there a common method for generating complex identifiers to be used as the HTML element's id, class, or name attributes

Is there a recommended method for "encoding" complex identifiers such as {Source:"ARCH.1", Code: "456-789.456 A+", SubNumber:##2} to be used in HTML elements' id, class, and name attributes? I could come up with something myself, but perhaps there is ...

javascripthtml