The background image cover does not display properly on screens with taller resolutions

Hey there! I've been using the standard background cover CSS code for my project, which usually does the trick. Here's the code:

-webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  background-position: left top; 
  background-repeat: repeat;
  background-attachment: scroll;

Everything looks good most of the time, but when I resize the window to be taller than it is wide, something unexpected happens. It seems like setting the size to cover should just make the image taller, not leave white space underneath it.

cssbackground-image

Answer №1

Consider eliminating

background-attachment: scroll;

and incorporating

background-attachment: fixed;
  background-position: left top !important;
.

This suggestion may be beneficial.

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

Increase the size of the image while ensuring the content on the right remains proportionate

I have a challenge with managing two different sizes of images (vertical and horizontal) that need to remain the same size. I am attempting to create a container that can hold the image without affecting the surrounding content, while also possibly using o ...

phphtmlcss

CSS Placement of Elements in Internet Explorer

I currently have a basic "username" text box available for users to input their information. You can view this text box by following this link: When using Chrome, the text box displays as intended with the watermark properly positioned and the user-inputt ...

jquerycss

Reveal concealed content when a responsive table becomes scrollable on a mobile device

I recently completed a project that was overloaded with tables. I made all the tables responsive, but they still take vertical scroll if they don't fit on certain devices due to their varying widths. For instance, Table A requires vertical scroll o ...

javascriptjqueryhtmlcsshtml-table

Highlighting table column when input is selected

I am working with a table where each <td> contains an <input>. My goal is to apply the class .highlighted to all the column <td>s when an <input> is being focused on. Additionally, I want to remove this class from all other columns ...

javascripthtmlcss

What is the best way to show the title when a user hovers over a word?

Below is an illustration of the code: <p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines ...

htmlcsstooltiptitle

Having difficulties in expanding my input bar to 100% width and center aligning it

Creating a webpage in a jsp file with the help of spring boot, I've utilized bootstrap for the design. I'm facing some challenges as I'm unable to widen my input box to width:100% on both the login and new registration pages. Additionally, c ...

htmlcssspring-bootbootstrap-4

Alignment in HTML / CSS / ReactJS: Leveraging the Text-align attribute

My attempt to align the text to the right within my div element has been unsuccessful. Despite using text-align: right and width: 100%, the issue persists. It seems that the problem lies within the left-side and right-side attributes, but I am unable to pi ...

htmlcssreactjs

What is the best way to align an element at the bottom in order to allow it to grow vertically

I have a unique structure on one of my pages that I want to use for a tooltip style behavior. When the "container" element is clicked, the "child" element, which is initially hidden, should appear above the container. However, since the child's height ...

htmlcsspositionalignment

Adding custom styles to an unidentified child element in React using Material-UI

When the function below is executed in a loop, I need to include styles for the icon which will be passed as an argument to the function. The icon element will be an unspecified React Material-UI Icon component. const renderStyledCard = (lightMode, headi ...

javascripthtmlcssreactjsmaterial-ui

Enhancing webpage design by dynamically changing borders and headers using JavaScript

I have implemented a fixed positioning for the table headers using the following code: onScroll={() => { document.querySelector('thead').style.transform = `translate(0,${this.scrollRef.scrollTop}px)`; }} However, when I scroll the ta ...

javascriptcssreactjshtml-table

The scripts do not allow the image to be resized

Struggling to resize an image while implementing a hover effect with css and javascript. The code I have so far is: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equ ...

javascripthtmlcssthree.jsgsap

The behavior of a fixed position in Flexbox varies when comparing Chrome to Safari and Firefox

In Chrome, the following code works as expected, with the list element positioning itself at the very left of the .PageContainer when scrolling down. However, in Safari and Firefox, the list element positions itself just after the logo. Are there any CSS r ...

javascripthtmlcssflexbox

Exploring the potential of overflow within a container with a percentage-based

I am attempting to design a webpage that fills the entire screen height without scroll bars, yet contains a scrollable container within it. Despite trying various approaches with percentage heights, I have not been successful as the percentages do not beha ...

htmlcss

Changing from columns to rows in Bootstrap 4 for small screens

I am working on a project that involves creating a grid with 4 columns and 4 rows. The challenge I am facing is making the 4th column transition into a 5th row on small displays, instead of being displayed as a column on medium to large screens. This proje ...

csstwitter-bootstrapbootstrap-4

Having trouble properly implementing variable updates when creating a multi-theme website

I have a Next.js app and a globals file containing all the themes: body { margin: 0; font-family: Inconsolata, monospace; background-color: var(--bg-color); } :root { --bg-color: #262a33; --main-color: #43ffaf; --sub-color: #526777; --sub-al ...

javascriptcssreactjsnext.js

Tips for adjusting the size of the page loader to fit the browser window while maintaining the aspect ratio

Looking for assistance in making the page loader responsive. I want the loader to adjust its size based on the window browser loading and resizing. The width, height, fontSize, and diameter should be converted to percentages instead of Pixels. It is essent ...

javascriptjquerycssjquery-plugins

Is the space-between property not delivering the desired spacing?

I am trying to achieve equal spacing between list items, and I attempted the following code. ul { list-style-type: none; display: flex; justify-content: space-between; } However, it seems that this approach is not working as expected. I am confused ...

htmlcssflexbox

Can Vuetify's grid system seamlessly integrate with the Bootstrap grid system?

According to information from the Vuetify documentation: The Vuetify grid draws inspiration from the Bootstrap grid. It involves the use of containers, rows, and columns to organize and align content. If I utilize Bootstrap grid classes in a Vuetify pr ...

csstwitter-bootstrapvue.jsbootstrap-4vuetify.js

Utilizing JavaScript, create a dynamic grid gallery with Div Spin and expand functionality

I am looking to create a unique effect where a div rotates onclick to reveal a grid gallery on the rear face. Starting this project feels overwhelming and I'm not sure where to begin. <ul class="container-fluid text-center row" id=" ...

javascripthtmlcssbootstrap-5image-gallery

What is the best way to position an arrow in relation to a circle?

I'm struggling to center the arrow in relation to the circle How can I switch the arrow direction to point downwards when viewed on mobile, so that the images are stacked vertically with downward arrows? Here is the code snippet that I have experimen ...

csstwitter-bootstrapbootstrap-4