How to apply the background color to the entire viewport width?

Question

I can't figure out how to fit the background color to the viewport size. I used 100vh and it covers the height correctly. However, when I used 100vw, the background only covers the screen to its right and not the left.

Here is the link to my fiddle code.

Here is my code:

HTML

<div id="main-doc">
<section id="welcome-section">
    <div class="center-text">
        <h1 id="title">Hello, I am Lee</h1>
        <p>xxx</p>
    </div>
</section>
</div>

CSS

#main-doc{
text-align: center;}

#welcome-section{
background-color: #2A3D45;
background-size: cover;
padding-top: 25px;
width: 100vw;
height: 100vh;

.center-text{
position: absolute;
width: 200px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -25px;}

i just tested your code and everything is working fine, it does cover the entire page including the width. I have no idea why you said it only covers the right — I_love_vegetables, Jul 18 '21 at 08:32
@Anonymouse on my screen it does not.. do you have any idea why? — Rynell Lee, Jul 18 '21 at 08:34
hmm @RynellLee its probably because of the margins and paddings, refer to [my answer](https://stackoverflow.com/a/68427394/15366635) below — I_love_vegetables, Jul 18 '21 at 08:37
@RynellLee Please check my answer, Hope that helps. It is the issue with Browser default CSS being applied, for which we need CSS -resets. — Imran Rafiq Rather, Jul 18 '21 at 08:38

score 3 · Answer 1 · answered Jul 18 '21 at 08:34

3

there is some margin in the body of your page and also hide the overflow:

body{
margin: 0;
overflow: hidden;
}

answered Jul 18 '21 at 08:34

Anonymous Coder

556
2
16

why hide the overflow? – I_love_vegetables Jul 18 '21 at 08:40
so that the content will not overflow the size of the page – Anonymous Coder Jul 18 '21 at 08:41
overflow:hidden is not a good practice my friend :). Adding a CSS-reset is what developers have been using for decades now to start as a baseline – Imran Rafiq Rather Jul 18 '21 at 08:42
i mean yeah i know what `overflow:hidden` is but that isnt necessary at all for the question tho, hiding or showing the overflow completely depends on his own preference – I_love_vegetables Jul 18 '21 at 08:42
@Anonymouse yeah its not necessary but the content of the page is overflowing so it show some annonying horizontal scrollbar – Anonymous Coder Jul 18 '21 at 08:44
Hmm, @AnonymousCoder like OP has used background-cover without realizing that this has no impact at all. since that is a property applied after using background-image. :) Anyways, nice to talk with you guys. CHEERS !!! – Imran Rafiq Rather Jul 18 '21 at 08:44
@ImranRafiqRather yep i agree, you earned an upvote – I_love_vegetables Jul 18 '21 at 08:45
@Anonymouse GOD BLESS you all. Have a wonderful time Coders. – Imran Rafiq Rather Jul 18 '21 at 08:46
@ImranRafiqRather try to use it in your local editor instead of jsfiddle. it is working – Anonymous Coder Jul 18 '21 at 08:47
@AnonymousCoder I used this is codepen.io, and working fine. https://codepen.io/emmeiWhite/pen/zYwzOba – Imran Rafiq Rather Jul 18 '21 at 08:48
@AnonymousCoder If you are talking about overflow:hidden; that will work but then we are not using the best practice my friend, In DOM we can see that with is more and some part is hidden. Not a good way to do. It can mess other things in a Project actually :) Hope that helps :) Best is we as developers use a CSS-Reset, either custom or Eric Meyers CSS-Reset or any other CSS-reset so that our site works across every browser starting from a base line :) CHEERS !!! – Imran Rafiq Rather Jul 18 '21 at 08:50

score 2 · Answer 2 · answered Jul 18 '21 at 08:36

The simple answer is background-size: cover; property is the property of background-image which has nothing to do with background-color. So, using background-size:cover; makes no sense.

Second you just need to add some basic CSS-resets to make it work properly as padding option messes up things. (because Browsers add their own default CSS, e.g body tag has margins around and some block-level elements also have default margins and paddings. i-e., why we need a CSS reset as baseline to start with).

 /* This is Basic CSS reset */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#main-doc{
  text-align: center;
}

#welcome-section{
    background-color: #2A3D45;
    width: 100vw;
    height: 100vh;
    padding-top: 25px;
}
.center-text{
    position: absolute;
    width: 200px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -25px;
}

<div id="main-doc">
    <section id="welcome-section">
        <div class="center-text">
            <h1 id="title">Hello, I am Lee</h1>
            <p>Your friendly neighbourhood web developer</p>
        </div>
    </section>
</div>

Great explanation with regards to the background property usage and CSS resets! cheers — Rynell Lee, Jul 18 '21 at 08:53

keymasterr · Answer 3 · 2021-07-18T08:49:05.820

That's because body element has its own margin. You have to set it to 0 or compensate with negative margin of your #welcome-section block.

But if you want to set background for the whole page, you should style body itself (or even :root), not your custom element.

body {
  background: #2A3D45;
  margin: 0;
}

#welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  height: 100vh;
  color: #fff;
}

<div id="welcome-section">
  <h1 id="title">Hello, I am Lee</h1>
  <p>xxx</p>
</div>

score 0 · Accepted Answer · answered Jul 18 '21 at 08:36

0

you need to remove the margins and paddings on your page to remove the annoying white spaces at the side

like this

body{
  margin: 0;
  padding: 0;
}

answered Jul 18 '21 at 08:36

I_love_vegetables

1,575
5
12
26

How to apply the background color to the entire viewport width?

4 Answers4