issues with background image alignment in css

I attempted to add a sticky background to a div, which was successful. However, I am encountering an issue where the background does not stretch enough during scrolling. Below is the CSS code I used to apply the background, along with screenshots displaying the problem:

https://i.stack.imgur.com/OkiUf.jpg

After scrolling:

https://i.stack.imgur.com/RAx6f.jpg

.site-main {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: url("http://areca3000.nl/glissenaar/wp-content/uploads/2017/05/bg-content.jpg")
 no-repeat  center center fixed ;
    /* background-repeat: no-repeat; 
    background-size: 100%;    
    padding: 0 0 0 0 !important;
    /*max-width: 1220px !important; 8? */ 
 }

You can view the page at for further inspection.

htmlcss

Answer №1

In order for the background to perfectly align with its container both in height and width, it is necessary to adjust the background-size property to:

background-size: 100% 100%;

It's important to keep in mind that this approach may result in some distortion of the image, potentially altering its appearance from what you originally intended.

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

Activate the clicked tab in the Bootstrap navbar when selected

I have gone through similar posts, but I am unable to get mine to work. My goal is to activate the clicked tab. Here is what my bootstrap navbar looks like in HTML: <div class="navbar navbar-default" role="navigation"> <div class="container" ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-3

What is the best way to display an image right in the middle of the header?

My project consists of three main files - an HTML, a CSS, and a JS file. I have developed the HTML using the Bootstrap 5.1.3 framework. The issue I am facing pertains to the alignment of the clothing brand logo within the header section. Despite multiple ...

javascripthtmlcssbootstrap-5

How can an Embedded React + JSS component safeguard generic elements such as <button> and <p> from being affected by the page's style?

I am facing a challenge with a React component that is being embedded in various webpages, either through an extension or as a third-party tool. Most of the styling for this component is done using JSS, ensuring unique class names that cannot be overridde ...

javascripthtmlcssreactjs

Generate a visually dynamic representation of a live website page

I'm curious if it's possible to create a login page similar to the one shown in this image, using HTML, CSS, and Javascript. Instead of a traditional background image, I want the background to display the actual layout of another website, such a ...

javascripthtmlcss

The iframe is set to take the source URL from url.com/id using the "id" parameter

Currently, I am attempting to set the src of an iframe by extracting the URL from the toolbar address. The URL consists of the domain plus an ID, which happens to be the same as the YouTube ID. For instance: www.youtube.com/watch=id In my case, my domain ...

javascripthtmliframeyoutube

Design a custom screensaver using jQuery that includes a timed delay feature and an alert message

I am currently working on implementing a screensaver feature for my website. Here is the breakdown of what I am trying to achieve: When detecting the onload, clicks, and touches, I want to start a timer that counts 5 seconds. If any of these events are d ...

javascriptjqueryhtml

What is the best way to implement a CSS transition for styles that are dynamically created by React?

I have a situation where I am using a button component that is styled based on a theme provided by a context: The code in Button.js looks like: () => { const theme = useContext(themeContext); // { primaryColor: "blue" } return <button className ...

javascriptcssreactjscss-transitions

The PHP code fails to execute properly after being uploaded to the server

I am facing an issue with my PHP code not working when uploaded to the server. It works fine on localhost, but why is it not running properly on the server? <?php ob_start(); include 'CUserDB.php'; session_start(); include 'config.php&a ...

phphtmlmysql

Do you have any tips on designing a mobile-friendly navigation bar?

Struggling with creating a responsive navbar using Bootstrap 5? The navbar-brand is causing issues with letters overflowing over other elements, and the toggle-icon is not aligning properly. Check out my Codepen for reference: https://codepen.io/namename12 ...

csstwitter-bootstrapbootstrap-5

Creating a horizontal scrolling section for mobile devices using CSS

Looking to create a horizontal scroll area specifically for mobile devices, similar to the design seen here: https://i.sstatic.net/oSNqL.png Additionally, I want to hide the scrollbar altogether. However, when attempting to implement this, there seem to ...

javascripthtmlcssbootstrap-4

What is the best way to convert API data into a currency format?

Hello, I need assistance with formatting data retrieved from an API into a currency format. The code below successfully retrieves the data but lacks formatting. For instance, if the data displays as 100000000, I would like it to be formatted as IDR100.000. ...

javascripthtmlapi

Problem with aligning an image horizontally within a DIV

Can anyone help me align the picture of the planet horizontally in the middle of the DIV section "about us" on my website? I've tried using text-align:center; in the CSS but it doesn't seem to work. Any suggestions would be appreciated. Thank you ...

cssalignment

What could be the reason for the presence of three pixels of white space below this particular table

My table is supposed to have a fixed height of 146px, but there seems to be an extra row of three pixels at the bottom. I've tried various methods to remove any unwanted spacing or padding, but nothing has worked so far. The only solution I found was ...

htmlcss

Choosing a root element in a hierarchy without affecting the chosen style of a child

I am working on a MUI TreeView component that includes Categories as parents and Articles as children. Whenever I select a child item, it gets styled with a "selected" status. However, when I click on a parent item, the previously selected child loses its ...

javascriptcssnext.jsmaterial-uitreeview

What could be causing my select tags to appear incorrectly in Firefox and IE?

With the help of Jquery, my goal is to dynamically populate a select field when it is in focus, even if it already has a value. Once populated, I want to retain the previous value if it exists as an option in the newly populated field. Although this works ...

javascriptjqueryhtmlinternet-explorerfirefox

Can a personalized user permission prompt be designed for HTML5 APIs?

Can a consistent custom user permission request dialog be designed for HTML5 APIs, such as geolocation or getUserMedia, to ensure uniform appearance on all browsers? ...

htmlgeolocationmultiple-browsersgetusermedia

"Discover the process of incorporating two HTML files into a single HTML document with the help of

I successfully created both a bar chart and a pie chart using d3.js individually. Now, I am trying to load these charts into another HTML file using jQuery. $(document).ready(function() { console.log("ready!"); $("#piediv").load("file:///usr/local ...

javascriptjqueryhtmld3.js

Can you explain how to modify the hover color of a word with select letters already colored using CSS?

Changing colors of a link before and during hover state One problem I'm facing is having a link where the first and last letters are red while the ones in between are black. This color combination should remain the same, even if the link has been vis ...

htmlcss

What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

Currently, there are two functionalities at play. The submit button is not being recognized while the functionality in JS $(".next").click(function(){..} is working as expected. HTML This section involves 4 fieldsets. I am attempting to validate ...

javascripthtmljquerycssbootstrap-4

Exploring the world of using Bootstrap containers, rows, and columns

I have a good grasp on containers and columns, but I am a bit confused about rows. The example below shows a 50/50 split. <div class="container"> <div class="row"> <div class="col-md-6"> 50 / 50 Content </ ...

htmlcsstwitter-bootstrap