CODEWITHSUNDEEP
htmlcssbackgroundmedia-queriesbackground-image
zer0-07
zer0-07

Reputation: 30

CSS Background Image not covering whole viewport width

CSS background is not covering whole viewport width while using media query @media (max-width: 62.5em)

enter image description here

I tried using background-size: cover, background-position: top left, background-repeat: no-repeat but still nothing works.

here's main CSS styles of 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;

Upvotes: 1

Views: 1286

Answers (3)

Talha Hori
Talha Hori

Reputation: 1

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

body {
  background: url(https://www.nasa.gov/images/content/296150main_2-226.jpg) no-repeat center center fixed;
  background-size: cover;
}
main {
  color: white;
}

<main>Hello world</main>

Upvotes: 1

Sam Sabin
Sam Sabin

Reputation: 1167

This is a fairly common error that I experience at times while working on layout.

The problem is NOT with the background of the html component, but rather with the layout on your footer, and your footer-cta-box div. These elements are pushing the layout outside of the viewport which is what is making it appear as though the background for the html is not rendering correctly. If you use "Inspect" in your browser to temporarily take out those elements you will see that the html background renders correctly! You're doing things right!

I'm not sure exactly how you want the footer and footer-cta-box to be laid out on the page, or else I could help you to get them in the right place, but those are the culprits of the problem.

Upvotes: 2

c.m.
c.m.

Reputation: 326

try

background-size: contain;

or

background-size: 100%;

instead of

background-size: cover;

Upvotes: 0

Related Questions