CSS Issue with Background Image not Fully Covering Viewport Width

Why isn't the CSS background covering the entire viewport width when using media query @media (max-width: 62.5em)?

https://i.sstatic.net/yvGWd.png

I've attempted to use background-size: cover, background-position: top left, and background-repeat: no-repeat, but nothing seems to be working.

Below are the main CSS styles for that section:

  max-width: 100vw;
  min-height: 100vh;
  background: url(../images/bg-hero-desktop.svg);
  background-color: #ebfbff;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 20rem;
  padding-left: 5rem;
htmlcssbackgroundmedia-queriesbackground-image

Answer №1

Occasionally, I come across a common error while working on layout designs.

The issue does not stem from the background of the html element, but rather from the layout of your footer and footer-cta-box divs. These specific elements are causing the layout to extend beyond the viewport, creating the illusion that the html background is not displaying properly. By using the "Inspect" feature in your browser to temporarily remove these elements, you can observe that the html background renders correctly. You are on the right track!

If you provide me with details on how you would like the footer and footer-cta-box to be positioned on the page, I can assist you in placing them correctly. However, it seems that these elements are the root cause of the problem at hand.

Answer №2

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: url(https://www.planetearth.com/images/nature/beautiful-scenery.jpg) no-repeat center center fixed;
  background-size: cover;
}
main {
  color: white;
}


<main>Greetings to all</main>

Answer №3

experiment with

background-size: contain;

try using

background-size: 100%;

as an alternative to

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

Arranging sibling buttons to wrap seamlessly like text

Is there a way to turn every syllable of a specific phrase into clickable buttons while maintaining regular text wrapping behavior? For reference, in the first image each syllable is plain text, in the second they're wrapped in <span>, and in t ...

htmlcss

Tips for deleting an additional empty line while styling a <ul> bulleted list?

I'm working on creating a vertical menu positioned on the left side of the screen. To achieve this, I utilized an online CSS button generator to style my <li> tags within the menu structure. However, I've encountered an issue where an extra ...

htmlcss

How to Alter the Color of a Hyperlink in HTML

I've been working on an angular2 application and I'm using a hyperlink to trigger a method that opens a small popup window. I've tried different methods to change the color of the link when it's clicked, but so far none have worked. Th ...

htmlcssangular

When using CSS @media print with inches, different dimensions are displayed post-printing

I'm currently working on a project that involves printing a single div from my webpage. However, I've encountered some issues with the @page tag not affecting the print output as expected. I attempted to manually set the dimensions of the element ...

htmlcssreactjsprintingmedia-queries

In Internet Explorer, when utilizing a table-cell with a variable height, the position should be set to absolute for

I'm struggling with getting a uniform height in my horizontal layout using display: table-cell. While it looks great in Chrome, I can't seem to get Internet Explorer to display it the same way. Check out this link for reference This is how I wa ...

htmlcssinternet-explorerhtml-table

What is the best way to scale a div proportionally within a bootstrap grid?

Despite spending hours reading numerous online sources, I am still struggling to fully grasp the CSS/HTML box model. Specifically, I am attempting to create sections with a ratio of 3:2, where 3 represents the width and 2 represents the height. https://i.s ...

htmlcsstwitter-bootstrapsass

What are the best tools to develop a browser-based 2D top-down soccer simulation?

I'm looking to create a 2D top-down soccer simulation game for web browsers using modern technologies and without the need for additional plugins like Flash or Silverlight, making it compatible with mobile devices as well. The game will be AI-controll ...

phpjavascripthtmlnode.jswebsocket

Excessive Blank Space Issue on Mobile Devices with MDBootstrap

I have been working on creating a replica of Watch2Gether, and it looks great on medium and large screens. However, when viewed on a phone, everything seems perfect until you scroll to the left and notice a large white space on the right side. I've ex ...

htmlcsstwitter-bootstrapresponsive-designmdbootstrap

Tips for modifying jsFiddle code to function properly in a web browser

While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle ...

javascriptjqueryhtmlcss

Attempting to align multiple images in the center

I'm struggling with this issue, trying to center my images. It seems like the first image referenced in imgTop is centered while the second one goes to the right. I want both to be centered evenly. Any help would be appreciated! #imageContainer { ...

htmlcssimage

Tips for ensuring a functioning dropdown menu while maintaining a fixed navigation bar position

I am facing an issue with my navigation bar. I have set the position to fixed to keep it at the top, but this is causing the drop-down functionality to stop working. Please advise on where I should move the position fixed property so that my nav bar remai ...

htmlcss

Ensure that the icon at the conclusion of the <p> tag remains intact and does not break off on its

Issue at hand: The clock icons on my phone screen sometimes break off, see example here: https://i.sstatic.net/NQz9i.png Preferred outcome: The icons should be intact along with the time value, like this: https://i.sstatic.net/nZmC9.png Here is the H ...

cssvuejs3bootstrap-5

Guide to activating the submit button when a radio button is selected

Here is the code snippet for an edit form <form [formGroup]="editForm" (ngSubmit)="saveUser()" novalidate> <div class="form-group"> <label class="block">Gender</label> <div class="clip-radio radio-primary"> &l ...

htmlangularformstypescript

Tips for stopping html form from refreshing upon submission

Hello, despite extensive searching and testing, I am still unable to locate the issue and therefore I am reaching out to seek your assistance in resolving my problem. Within a form that I have created, upon clicking the submit button, a javascript functio ...

javascripthtmljqueryforms

Resolving the issue of nested modals within Bootstrap

I am experiencing some issues with my customer visits list page. When I try to add a visit, it opens a bootstrap popup ("#Pop1") to record the visit details. Within this modal, there is an option to add a new customer on the spot, which then triggers anoth ...

javascriptjquerycsstwitter-bootstrapmodal-dialog

I am having trouble selecting Bootstrap radio buttons on my ASP.NET Core MVC application

My asp.net mvc core web application has the following code to display 2 radio buttons:- <div class="form-group"> <label class="control-label" style="font-weight:bold"> ...

htmlasp.net-corebootstrap-4asp.net-core-mvcradio-button

``I'm having trouble getting the onchange event to function properly in a customized

After following a tutorial, I successfully created a custom select dropdown using the provided link. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select However, I am facing an issue with the onchange event not working for the select ...

javascripthtmlcss

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

javascripthtmlcsscss-selectors

Place an element in relation to the vertical size of a div that includes written content

Currently, I am working on implementing a button with a popup that appears underneath it when the user hovers over it. The specific requirements for this setup are: The size of the button should not affect the size of the popup The popup should always be ...

javascripthtmlcss

How can I adjust the size of the renderer in Three.js to fit the screen?

Encountering issues with the code snippet below: //WebGL renderer renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size document.body.appendChild(renderer ...

javascripthtmlcssthree.js