Cover the HTML background with floating objects using background-size:cover

I recently encountered an issue on a page I was working on. The body had an image background set to cover the entire screen using background-size:cover. To ensure the whole page was filled with content regardless of its size, I added html { height:100% }.

Everything seemed to be going smoothly until I introduced a div with 

position:absolute; right:0; width:200px;
. As soon as this div started to have more content than the height of the page, a scroll bar appeared.

Scrolling down made it clear that the background image wasn't covering the entire page anymore. It was because the div exceeded 100% of the HTML height.

Now, I'm in need of a solution to address this issue. Any suggestions?

css

Answer №1

One way to achieve this effect is by including the CSS property background-attachment:fixed; in your body element.

It's important to note that using this method will cause the background to remain fixed within the viewport and not move as you scroll through the content.

Check out more information on background-attachment here!

Answer №2

Follow the steps in this codepen to achieve success.

Latest update: (with JS implementation)

For a more comprehensive solution, check out this codepen.

Answer №3

Instead of relying on position:absolute for layout, I made use of float wherever possible.

To ensure proper formatting and stretching of the containing <div>, I enclosed all content within a <div> wrapper inside the <body> tag. This adjustment has resolved any issues with the behavior of the body tag and its background properties!

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

Each function in Sass is compiled with a dollar sign preceding it

I'm having trouble using an each loop in Sass because the css is compiling with the variable names instead of their content. $green-1: #9ae200; $green-2: #5ea600; $color-list: green-1 green-2; @each $single-color in $color-list { &.#{$single ...

csssass

Guide to making a slider menu using html, css, and javascript

Just dipping my toes into the world of web development. I'm intrigued by the idea of creating a "slider menu" where users can view and select options by clicking on next or previous buttons (see example image below). While I've got some basic HTM ...

javascripthtmlcss

Creating a mouse hover effect for irregular shapes on an image map

Is it possible to implement a mouse hover effect on irregular shapes within an image map? These irregular shapes are not basic polygons like rectangles, triangles, or circles, but rather complex designs such as lanterns or animals. Can this be achieved? ...

htmlcss

Tips for incorporating the <li> element into a versatile layout

My dilemma involves a div containing multiple ul and li elements that are struggling to fill the available space effectively. The issue arises when there is either excess space on the right side or one of the uls gets displaced below the others due to vary ...

htmlcsshtml-lists

The concept of CSS div wrapping and managing vertical whitespace in web design

My goal is to make multiple div elements wrap to the next line when the width of their container is changed. The wrapping part is working fine, as the boxes drop to the next line when there isn't enough width for them to fit. However, I am facing an i ...

jquerycsshtml

Could someone please clarify a specific aspect of how floats work?

Could someone simplify this explanation for me? A float is positioned next to a line box if there is a vertical space that meets these conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margi ...

cssspecifications

Transform the color of Max Mega Menu items on hover with another item in WordPress

Seeking help to change the color of my megamenu item when hovering over other items in the menu. Take a look at this image for reference: I've tried using these CSS styles but it didn't work as expected. #mega-menu-wrap-primary-menu #mega-menu-p ...

csswordpresswordpress-themingmegamenu

Display my search box when the button is activated

I have a button labeled "Search" that I want to click in order for my search field (which is currently hidden with display:none) to become visible. However, my current setup is not working as intended. I have created a jsfiddle to illustrate my issue. Al ...

htmlcssmodx

The css cropping issue with sprite image is not being resolved

I'm currently working on creating a sprite image for the bottom links on our media page, but I seem to be having trouble getting the image to crop correctly. Can anyone point out where I may be making a mistake? CSS .footer{ position:absolute; ...

htmlcssimagemenusprite

Experiencing a scroll problem in the latest version of Google Chrome for Android while using ReactJS? The issue seems to have migrated from the earlier version 99.xxxxxx to

Previously, my website was functioning perfectly in full screen mode. However, after updating Chrome on Android to the latest version (116.xxxxxx....), I noticed that it is now displaying a scrolling behavior that was not present in the earlier version (99 ...

javascriptandroidcssreactjsgoogle-chrome

What could be causing the DIV elements in this React Bootstrap list to not be centered?

I'm currently working on creating an image gallery using react-boostrap. Everything is scaling properly when I resize the page, but the images are still aligned to the left. Is there a way to center them instead? <div class="container-fluid&qu ...

cssbootstrap-4react-bootstrap

Frustrating Problem with Favicon Displays in Various Web

I am experiencing an issue with my favicon setup. Initially, I had the following code in the root of my project: <link rel="icon" href="favicon.ico" /> When I first ran the project, the favicon displayed correctly. However, upon running it again to ...

htmlasp.netcssfavicon

Is there a way to adjust the scrolling speed of a background image to be slower than the rest of

I'm searching for an example similar to this: Are there any efficient javascript solutions available? I've had difficulty implementing the code I've come across so far. ...

javascripthtmlcss

What is the best way to accomplish a smooth transition of background colors similar to this design

I was browsing different websites and stumbled upon this amazing background color transition that caught my attention. I really liked it and now I want to create something similar on my own website. Despite my best efforts, I haven't been able to achi ...

javascriptjqueryhtmlcss

AJAX functionality seems to be malfunctioning on mobile devices, although it is working properly on the Chrome developer tool

Hey there! I'm currently working on a client's website and encountering an issue with my AJAX call on a specific mobile page of the site. You can check out the page in question here. Interestingly, it seems like the header and footer are only mal ...

jquerycssajaxjquery-mobile

How do I ensure that my font size completely fills the space in a justified layout using CSS?

Is there a way to style my text to match the appearance in the image shown using CSS? ...

csswidthformulaviewportfont-size

Is there a way to implement the border-box property for Internet Explorer versions 6 and

Similar Question: How to implement box-sizing in IE7 Anyone know a method or workaround to apply box-sizing:border-box; in IE6 and IE7? Even just for IE7? ...

css

Tips for designing a unique CSS ellipse effect for text styling

Hey there! I have a list of titles in a drop-down menu as strings, for example: "Bharat Untitled offer #564", "Bharat Untitled offer #563" The titles are quite long, so we want to display the first eight characters, followed by '...' and then ...

javascriptcss

How to position a logo and search box in perfect alignment with CSS styling

I'm struggling to align a logo and a search box next to each other. The logo should be on the left and the search box on the right. header { background:#383838; height: 130px; border-top:10px solid #2C2 ...

htmlcss

What is the order in which an HTML page loads?

Can you explain the sequence in which an HTML page loads? Below is a basic HTML outline: <html> <head> <link rel="stylesheet" href="css/sheet1.css"> <link rel="stylesheet" href="css/sheet2.css" <script src="scripts/take ...

javascripthtmlcss