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

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

I am looking to create a multi-select dropdown in Angular where the selected values are displayed as chip tags. Users should be able to unselect a value by clicking on the 'X' sign next to the chip tag, removing it from the selection. <searcha ...

javascriptcssangulartypescriptdrop-down-menu

Is it possible to display images in PHP when the value matches the specified string?

Is there a faster and more efficient way to display one or multiple images if $value == $string? For instance, let's say I have a cell containing the string 'r o g'. If a user inputs ro, it should output <img src="red.gif"> and <im ...

phphtmlimageif-statement

In the XHTML mode, MathOverflow's invaluable mathematical expertise shines brightly

I am interested in incorporating the unique “piece of valuable flair™” from MathOverflow onto my website. The issue I am facing is that I want my webpage to comply with XHTML5 standards, meaning it should be served with the MIME type application/xht ...

javascriptjquerymime-typesstackexchangehtml

Creating HTML in Go using data from a struct

I have an HTML file named email.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shareholder</title> </head> <body> <h1> {{.PageTitle}} </h1> ...

htmlgogo-templates

Is there a way to adjust the label size for a material ui TextField component?

My TextField element is defined like this: <TextField id="standard-with-placeholder" label="First Name" className={classes.textField} margin="normal" /> It currently appears as shown in the image below: However, I would like it to look mor ...

javascriptcssreactjsmaterial-uitextfield

Python Selenium is having trouble finding the elements

I've been struggling for hours to extract the specific text from a variety of elements on a website. I attached 2 images in hopes that they will help in identifying these elements by their similarities, such as having the same class name. The black un ...

pythonhtmlseleniumselenium-chromedriver

Struggling with incorporating a Carousel feature while navigating through an array

I am struggling to properly implement a carousel using the data from my Videos Array. Instead of getting the desired output where videos should slide one by one, all the videos in the Array are being rendered at the same time. <div id="carouselEx ...

htmlcssreactjscarouselbootstrap-5

When using equal-width columns in Bootstrap, the columns will be stacked one on top of the other

When I utilize Bootstrap 5, I am encountering an issue where equal width columns are being displayed one underneath the other. To illustrate, here is a simple example directly from the Bootstrap website: <link rel="stylesheet" href="https://cdn.jsd ...

htmlcsstwitter-bootstrapbootstrap-5

Verify whether the current location is within the circle

I am conducting a test to determine if my current location falls within a given radius of 300m. If it does, return true; otherwise return false. Below is the code I am currently using: <body> <button onclick="getLocation()"> ...

javascripthtmlwebgeolocationmaps

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

Here are the codes I'm working with: ul.pathnav a:before{ content:"\0X3E"; text-decoration:none; } I have been trying to use the hex code \0x3e for ">", but it doesn't seem to be working. However, when I tried using ...

htmlcssencodingutf-8

Exploring Event Propagation in AngularJS

Currently, I am working on developing a web application using angularjs for the first time. A key feature that I aim to introduce is the ability for users to create a div in the main window upon clicking on an image in the menu. To achieve this functional ...

javascripthtmljqueryangularjsjquery-events

Receive notification of alert content when it is displayed

Having an HTML page with the following script: <Script> function Run() { alert("The Content Here"); return true; } </script> <button onclick="Run();">I Want It Now</button> If I were to open this page using firefox or Chrome, and ...

c#javascripthtmlvb.netwinforms

Customize PrimeNG component styles

Utilizing the PrimeNG OverlayPanel for a dropdown click feature, I am encountering an issue with moving the default left arrow to the right position. Despite trying various solutions, I have reached a dead end. Would you be able to provide me with some fr ...

htmlcssangularprimeng

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...

javascriptcssvue.js

Assigning the "action" attribute of a form to direct to the homepage

Working on a login form, I've encountered an issue with the action attribute when set to "index.cfm". This seems to work fine for all other pages except for the index page. Looking for some insights if anyone else has faced this problem before. I&apos ...

htmlformscoldfusion

Styling using CSS is effective only when applied locally, as it does not function properly on GitHub Pages

Although I have come across similar questions to the one I am facing, none of the solutions provided seem to work for me at the moment. My CSS file loads and functions as expected when tested locally, but once I upload it to GitHub, it stops working. In my ...

htmlcssgithub

Does anyone know if it's feasible to return a value from PHP to an HTML form without relying on JavaScript?

Currently, I am in the process of learning how to create a basic web form. My goal is to develop an HTML web form that sends a number to PHP and then displays the number in another text field without refreshing the page. After doing some research online, ...

javascriptphphtmlajax

html code abruptly halted due to an unexpected termination of the file

I'm experiencing an issue with my senaraiperalatanstaf.php file. I inserted some PHP code in between, but now I'm getting a parse error indicating an unexpected end of the file. I've tried troubleshooting it without success. Any help would b ...

phphtmltags

Ways to eliminate the dotted line from the image map in Internet Explorer 11

Below you will find the code I am working with: <img alt="Testing 2015" border="0" src="images/Test-2015.jpg" usemap="#Map" /> <p><map name="Map"><area coords="790,100,653,135" href="http://www.google.com/" shape="rect" style="cursor ...

javascripthtmlcss

Angular: facing difficulty displaying static html pages on server, although they render correctly when run locally

Within my Angular project, I have stored a few static html files (specifically sampleText.html) in the src/assets/html folder. In one of my components, I am attempting to fetch and display this file. The following code is being used for this purpose. Every ...

javascripthtmlangular