How to create a scrolling background image using CSS

Is there a way to make the background image scroll along with the rest of the page? I tried using background-attachment: scroll; but it did not work as expected. Initially, the background image and logo are positioned correctly, but when the page is scrolled, the logo and title move while the navbar and background image do not.

.content {
    overflow: auto;
    position: relative;
    }
.content:before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top:-175px;
    z-index: -1;

    display: block;
    background-image: url("/assets/backgroundpic.jpg");
    background-size:cover;
    background-position:center top;

    width: 100%;
    height: 500px;
}



<div class="container content text-center" style="position:relative;">
  <%= image_tag("/assets/logo-seal.png", size: "250x250", class: "img-responsive img-circle margin", style: "display:inline;margin-top:200px;") %>
  <h1 style="font: 48px Oswald, sans-serif;">TITLE</h1>
</div>

Answer №1

An element with a fixed position has a background image assigned to it. As the element remains fixed and does not scroll, its background image will also remain static.

You need to explore alternative solutions that do not involve fixing the element in place.

Answer №2

For those who are comfortable with jQuery, an effortless solution can be found at

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

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

Tips for managing a fixed-positioned element during scrolling and zooming events

I have a situation where I need a fixed-position element to stay at the top-right corner of the viewport. Here is the HTML code: <div class = "header"> <p>This heading has an absolute position</p> </div> And here is the CSS: .he ...

Do flexible layouts require more effort and time to create and upkeep compared to fixed width layouts?

Are flexible layouts more challenging to create and maintain than fixed width layouts, and do they take longer to design? Does a flexible layout only involve setting the width, height, and font size in em or %? What are the main advantages of using a fle ...

Guide on executing edit form alongside file upload

Is there a way to update a form without having to upload a new image? I have successfully implemented multer for image uploads when creating a form. My frontend is built using ReactJS and the backend server side is Node.js. This is the front end code usi ...

Tips on creating a transition in React to showcase fresh HTML content depending on the recent state changes

I am completely new to React and recently completed a project called Random Quote Machine. The main objective was to have a method triggered inside React when the user clicks a button, changing the state value and re-rendering to display a new quote on the ...

Using AngularJs to have two ui-views on a single page

As a beginner in AngularJs, I encountered an issue with having two ui-views on the same page. When I click a button to show the view for goals, both the form for goals appear in ui-view 1 and ui-view 2 simultaneously. I have been working with states but I ...

What is the best way to customize the background color of a highlighted ToggleButton in react-bootstrap?

Currently, I'm using react-bootstrap and facing a challenge in changing the background color of a chosen <ToggleButton> to blue. For instance: <ButtonToolbar> <ToggleButtonGroup type="radio" name="options" ...

Challenges with integrating a Bootstrap 4 table into a card component

Here is a problem I am facing. It seems that the table inside the card is not displaying correctly. I want the table to be centered or at least eliminate the blank space that is currently showing. Here is my code (using Angular 6): <div class="row ...

CSS rule for targeting an element that does not have any child elements

I have a variety of different elements that are structured similarly to the following.. <div id="hi"> <div class="head"> </div> <div class="footer"> </div> </div> ..however, some of these elements do no ...

Obtain the src attribute of iframes using Robot Framework Selenium and store it as a variable

On a webpage, I have an iframe element that displays an html document representing a generated form. My goal is to create an automated Selenium script to validate specific values within this document. Currently, I am manually copying the URL from the ifram ...

Add unique content to a div upon page reload

Whenever the page is refreshed, I would like to add a random anchor from an array into a specific div. Here's my current code: <div id="exit-offer" class="exit-offer-dialog"> <div class="offer-content" id="banner-load"> <bu ...

When using React <p> and Tailwind, the text overflow occurs in either the X or Y axis, despite specifying Y specifically

I am building a React frontend using TailwindCSS 2.2, and I have these two texts inside a <p> dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ...

retrieving a value of an attribute within an AngularJS directive

I have created a directive configModule.directive('iMemoryDiv',function () { return { restrict: 'E', scope: {}, replace: true, templateUrl: '/memoryDiv.html', link: function(scope, el ...

Continuous Playback of Sound

Is there a way to autoplay an audio in loop without being blocked by browsers? Code : <audio id="audio1" src="assest/sound/1.mp3" autoplay="" /> <script> a = document.getElementById('audio1&apo ...

Prevent scrolling on Bootstrap columns

My webpage is built with Bootstrap and I have a layout with 4 columns on the left and 6 on the right. I want to prevent the 4 columns on the left from scrolling. How can I achieve this? I am aware of the option to use class="affix" on the left column, b ...

Problem with loading images on an HTML webpage

https://i.sstatic.net/aQ0oD.png After refreshing the page, I'm encountering an issue where the image is not loading. However, if I switch tabs from MEN to WOMEN and back again, the image will display without any problem. Even making changes in the CS ...

Converting JSON data into an HTML table

I'm struggling to convert a JSON object into an HTML table, but I can't seem to nail the format. DESIRED TABLE FORMAT: Last Year This Year Future Years 45423 36721 873409 CURRENT TABLE FORMAT: Last Year 45423 This ...

Having difficulty accessing the verification button within an iframe using Selenium

I'm currently developing a program that allows users to login using Selenium and bypass verification. I have everything else in the program ready, but I've been facing an issue trying to click the verify button. I've tried different approach ...

Attempting to enhance the modularity and readability of my code

Looking for assistance to enhance the modularity and readability of this lengthy code. Any tips on how to simplify it and improve clarity would be greatly appreciated! I'm currently working on a street fighter game, and here's what I have so far ...

Changing HTML5 input type date into a string representation

Here is my PHP code snippet: <?php include 'config.php'; if(isset($_POST['submitbtn'])){ $date = $_POST['datefield']; $newDate = date("Y-m-d", strtotime($date)); $result = mysql_query("Call seat(".$newDate.")"); if($resu ...