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

Angular not updating the values in real time

First and foremost, I am utilizing socket.io to emit data. Data is emitted upon connection (so the website does not appear blank) as well as when certain events occur. Upon initial connection or page refresh, everything updates and functions smoothly. Howe ...

javascripthtmlangularjs

Using a Javascript while loop to iterate through an array and display the elements in the .innerHTML property

As a newcomer to Javascript, I am in the process of teaching myself. My current task is to develop a function that will display each element of the array AmericanCars with a space between them. I have successfully been able to show an individual element u ...

javascripthtmlwhile-loop

I can't figure out why my jQuery isn't recognizing the :nth-child(2) selector

Here is the jQuery code I am using: $(".score-window a:first-child").click(function() { $(".score-window").hide(); $(".login-window").show(); }); $(".score-window a:nth-child(2)").click(function() { $(".score-window"). ...

javascriptjqueryhtmljquery-selectors

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

I have a scrollable container for displaying messages. I would like to apply an opacity of 0.5 to the content in the top 30% of the container, as shown in this image: https://i.stack.imgur.com/NHlBN.png. However, when I tried using a background div with a ...

javascripthtmlcssreactjs

Encasing the bootstrap dropdown menu and trigger within individual parent divs for a tidier appearance

Is it possible to toggle a bootstrap dropdown when it is wrapped in another div by using attributes such as data-target or aria-labelledby? I have seen examples where data-toggle="dropdown" and class="dropdown-menu" are siblings. An example of what I am r ...

jqueryhtmltwitter-bootstrapdrop-down-menu

Unordered list not floating properly - successful in JSFiddle but not displaying correctly in web browser despite updating Chrome and Firefox

Having trouble floating an unordered list? Check out this jfiddle example that aligns a list next to some text: Here is the updated jfiddle link: https://jsfiddle.net/8qzygaog/ I created a test document based on the example, but it's not working as ...

htmlcsscss-floathtml-lists

Utilizing Python and Selenium to Locate an Element Based on Text Within a Span Class

My challenge is locating an element without any ID or distinctive identifiers. The HTML code structure resembles the following: <div class="item_select"> <span class="item_selection_number">A </span> </div> <div class="item_ ...

pythonhtmlcssseleniumautomation

My desire is to have the left image's position set as sticky

Currently, I am attempting to update the image positioning on this page for the T500 Smart Watch: I want it to look similar to how it appears here: Here is the CSS code I have experimented with: .storefront-full-width-content.single-product div.product ...

csswordpress

Monochrome tabletop solid in one hue

I'm trying to eliminate the space between the columns in my table so it looks solid. Here's the CSS style I've been using: <style> tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:90%;background:transparent;} table{ margin: ...

htmlcss

Creating a banner image that scrolls while maintaining a fixed size

I'm looking to add a banner image with a scrolling effect as users navigate down the page, but I'm not sure what this technique is called. An example of what I'm trying to achieve can be seen on this site. As the user scrolls down, the res ...

javascriptjqueryhtmlcsstwitter-bootstrap

After clicking the 'add row' button, I successfully added a new row; however, the jQuery date

I encountered an issue with the datepicker when adding it to dynamically added rows. The datepicker was not functioning properly on the added rows, except for the first row where it worked perfectly. Strangely, removing the first row resulted in the datepi ...

htmlcss

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

htmlcssanimationoverlay

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

javascripthtmltypescript

Utilizing jQuery to correspond with CSS media queries

Continuing from my previous question about an automatic jQuery image slider, you can refer to it here. I have made some changes in my CSS using media queries and I am trying to incorporate them into my JavaScript code using an 'if / else if' sta ...

javascriptjqueryhtmlcss

Advancing in the Mozilla fashion

Having an issue with my progress bar design... When viewed in Chrome, the value of the progress bar appears in red due to CSS styling I applied... But when opened in Mozilla, it shows up as a dull grey color. progress[value] { width: 250px; height ...

htmlcss

Get the maximum width in pixels through JavaScript when it is specified in different units within the CSS

I'm looking to retrieve the max-width value in px from CSS for use in a JavaScript code. The challenge is that this value might be specified in different units in the CSS file. Any suggestions on how to achieve this using JavaScript? const element = ...

javascripthtmlcss

Structured chat interface with unchanging top and bottom sections

I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various appro ...

htmlcss

If a particular <td> element is present on the page, exhibit a unique <div>

I have a webpage with various HTML elements. <div class="alert">Your message was not sent.</div> <p class="pending">Email Pending</p> I would like to display the div.alert only if the p.pending is present. Is ...

javascripthtmlcss

Poor height parameter

I am encountering an issue with the height of the div.divB element in this code snippet: <div class="divA"> <img src="http://lorempixel.com/1000/130"/> <div class="divB"> <span>Text text</span> </div> ...

htmlcss

CSS selector for GTM trigger that is not specific to any particular element

I am attempting to develop a CSS selector that can target the specific entries within the page-top-menu: Header menu - Menu 1 DE #page-top-menu > div > div.menu-wrapper > ul > li.i39.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d ...

csstriggerscss-selectorsgoogle-tag-manager