The background image vanishes in Chrome when scrolling downwards

After setting an image with a resolution of 1980 x 1200 as the background for my web page, I encountered an issue. When scrolling down, around the height of 1200px, the image disappears and is replaced by a white background. This problem only occurs in Chrome; Safari displays it perfectly fine. Below is the CSS code I used:

body,html{
margin-top: 0px;
background-image: url(../_images/1902974.jpg);
background-attachment: fixed;
background-position: center top;
width:100%;
height:100%;
}

I also attempted using background-position:fixed but the issue persisted in Chrome. Is there any additional code needed to fix this problem?

htmlcssgoogle-chrome

Answer №1

Effortless technique for a full screen background that remains stationary. To enable scrolling, simply adjust the fixed setting to scroll.

CSS

html { 
  background: url(images/mybgimage.jpg) no-repeat center center;
  background-attachment: fixed; /* Or scroll */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Supported in:

  1. Safari 3+

  2. Chrome Whatever+

  3. IE 9+

  4. Opera 10+ (Opera 9.5 supported background-size but not the keywords)

  5. Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Sourced from here.

Answer №2

Experiment with setting the minimum height to 100% for both the html and body elements, as well as applying the background-size property with a value of cover.

Answer №3

There are multiple methods to accomplish this, but one option is:

body,html{
background-image: url(../_images/1902974.jpg);
background-size:cover
}

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

Personalized AngularJS required text

After utilizing the built-in AngularJS directive required and encountering a validation error, I receive a small popup near the field displaying "Please fill out this field". My issue lies in needing the text to be displayed in another language. How should ...

javascripthtmlangularjsangularjs-directiverequired

Navigating to a different page in the app following a document update: a step-by-step guide

I am facing an issue with a page where I am trying to print a specific DIV using the script below... function printReceiptDiv() { var divElements; if (vm.isDLR) { divElements = document.getElementById("DLRreportCont ...

javascriptjqueryhtmldom

Storing HTML form information into a CSV file using Python and Flask

I am struggling with a small .py program that renders 2 HTML pages. One of the pages contains a basic form asking for a name and comment. I am having difficulty figuring out how to take the data entered in the form and store it into a csv file. While I h ...

pythonhtmlformscsvflask

Is there a Polar transformation available in CSS3?

Converting a line into a ring is a straightforward process in graphic design software like GIMP: https://i.sstatic.net/7lQZe.png (source: adamhaskell.net) I'm exploring the possibility of achieving the same effect using CSS. Here's what I&ap ...

csscss-transforms

I could use some input on the best way to make a background video fill the screen while incorporating overlay text

Struggling to make the background video fit perfectly on all devices and browsers? While it looks great in Chrome now, I'm still facing some clipping issues with IE Edge. Any experts out there who can offer their validation or suggest improvements? I ...

htmlcss

AngularJS Error: The method serviceName.functionName() is not a valid function

I am trying to implement a function that will go back when the cancel button is clicked. Here is the view code: <div ng-controller="goodCtrl"> <button class="btn" ng-click="cancel()">Cancel</button> </div> And here is the Jav ...

javascripthtmlangularjsmodel-view-controller

Make sure the division remains fixed even when the window is resized

Having a fixed position and bottom set to 0, I want my div to display at the bottom of the window. The issue arises when the window is resized, causing the div to move up and into other elements. For instance, when opening the console box in Chrome, the f ...

javascriptjqueryhtmlcss

Utilizing a dropdown feature in Bootstrap for creating X columns of lists instead of a traditional single list

Check out my Fiddle. Beneath Dropdown1 lies a single-column list of actions. I'm looking to expand this list across multiple columns, like 5 or the width of the page. I'm hoping there's a Bootstrap CSS class I can use for this, but I migh ...

jqueryhtmlcsstwitter-bootstrap

Angularjs drop-down menu changes images with animation

<body ng-controller="myCtrl"> <input type="checkbox" ng-model="loaded"/> <select ng-model="list"> <option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.id}}</option> </select> {{list}} &l ...

javascriptjqueryhtmlcssangularjs

What is the best way to place multiple images on top of one another within a single div, and make them break apart with animation upon hovering?

HTML: <div class="mySlides"> <img src="1.jpg"> <img src="2.jpg"/> <img src="3.jpg"/> <img src="4.jpg"/> <img src="5.jpg"/> </div> CSS: .mySlides { padding-top: 25%; padding-left: 5%; ...

htmlcss

I am trying to figure out how to style each box individually, but I'm running into some confusion. There are three different classes to choose from, with the child class

Struggling to style the ten boxes individually? Renaming each class of the box child didn't work as expected? Wondering how to select and style each box with a unique background color? Also facing issues with displaying the logo image on the navigatio ...

htmlcss

The image is non-adjustable to different screen sizes

Currently, I am in the process of revamping a friend's website using Next.js and Tailwind. However, I've encountered a challenge with the background image specifically on iPhones. While it appears fine on browsers like Chrome and Safari as well a ...

cssreactjsimagenext.jstailwind-css

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

Enhance your website with a multi-column Pure CSS drop-down menu

Can anyone help me with this issue I'm facing? I am struggling to add a second column to the main "Authorized Brands" menu, and when I tried to break it up, it affected the rest of the columns due to the width being set at 1000px. This is the code I ...

htmlcssdrop-down-menumultiple-columns

Issues with playing Html 5 video arise when making an ajax call

My goal is to implement an AJAX call followed by displaying an HTML5 video. The provided code snippet seems to be ineffective. $.ajax({ type: "POST", url: "Videos.aspx/GetBlocs", contentType: "application/json; charse ...

jqueryajaxhtmlhtml5-video

Splitting a row into four columns that will appear consistent on mobile devices

Is it possible to create a row with 4 columns in Angular 6, but have it display as 2 rows with 2 columns each on mobile devices? <div class="row" id="info" *ngIf="this.details"> <div class="col-md-12 mb-3" id="heading"> <h3>Meeting ...

htmlangularbootstrap-4angular-material

Can we ensure there is consistently an even number of columns when using auto-fill?

Hello, I am just starting to explore CSS grid. Take a look at the example below: .platform { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 20px; } .item { width:100%; background-color:#aaa; padding:10 ...

htmlcssresponsive-designcss-grid

The button is positioned at the bottom right within a div surrounded by text that flows around it seamlessly

Image Is there a way to position a button in the bottom right corner of a div with a fixed height that is filled with text where the text flows around the button? I have attempted using "float" and positioning the button, but I have not had any success. ...

htmlcss

Removing all table rows except one in Jquery

I currently have this code in my view: <script> $(document).ready(function() { $("#add_instruction").click(function(){ $("#instructions").append("<tr><td></td><td><input type='text' name='rec ...

javascriptjqueryhtml

Is there a way to use jQuery draggable to move a zoomed image within a div clipping mask?

Looking to enhance user experience, I am developing an interface that allows users to zoom in on an image and move the zoomed version within a clipping mask div. I have created a div with dimensions of 200px by 200px and set overflow: hidden. Then, I inse ...

jqueryhtmldraggableclipping