How to make the Background Color of an element width the hole site

Question

<!DOCTYPE html>

<style>
  body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-large;
    color: black;
    text-align: center;
  }
  
  #heading {
    background-color: gray;
  }
</style>
<html>
<meta charset="utf-8">

<head>
  <title>Testsite</title>
</head>

<body>
  <div id="top">
    <div id="heading">
      <h1>Test</h1>
    </div>
    <div id="caption">
      <p>Testsite</p>
    </div>
  </div>
  <div id="main">

  </div>
  <div id="footer">

  </div>
</body>

</html>

With this code, the site looks like this:

But I want, that it looks like this: In this picture, there is no white bar over the gray bar. I hope, that you understand, what I am trying to say and I hope, that you can help me :)

`body { margin: 0; }` will reset the default margin of the UA. And as such you remove the white frame around your entire website. — tacoshy, Jul 10 '21 at 12:39
And I highly recommend to use a translator like google translate in the enxt time. It is not required to speak perfect english here but enough that others can understand you. Your question as such makes no sense and is super hard to understand. — tacoshy, Jul 10 '21 at 12:40
Thanks, it works but how to make the white bar above disappear too? — Skey, Jul 10 '21 at 12:54

Ankush Dogra · Answer 1 · 2021-07-10T13:06:19.590

0

Put style inside <head> . White spces are due to margin makeit 0. here you go:

<!DOCTYPE html>


<html>
<meta charset="utf-8">

<head>
<style>

  body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-large;
    color: black;
    text-align: center;
    margin:0;
  }
  
  #heading {
    background-color: gray;
    margin: 0;
  }
  
  h1 {
  margin:0;
  }
</style>


  <title>Testsite</title>
</head>

<body>
  <div id="top">
    <div id="heading">
      <h1>Test</h1>
    </div>
    <div id="caption">
      <p>Testsite</p>
    </div>
  </div>
  <div id="main">

  </div>
  <div id="footer">

edited Jul 10 '21 at 13:06

answered Jul 10 '21 at 12:50

Ankush Dogra

235
1
3
13

a global reset of all margins is nto advices. It will lead to unintended behavior for msot part and need to be fixed later on. Far easier to only reset the margins that you actually want to remove. – tacoshy Jul 10 '21 at 13:00
Ok, I have updated the answer. – Ankush Dogra Jul 10 '21 at 13:06

score 0 · Accepted Answer · edited Jul 10 '21 at 13:00

0

Add this to your CSS:

#heading h1 { margin: 0; }

edited Jul 10 '21 at 13:00

tacoshy

10,642
5
17
34

answered Jul 10 '21 at 12:51

Riyaz

28
6

score -1 · Answer 3 · answered Jul 10 '21 at 12:48

-1

background-color mean defines the color of the element's background. The color CSS property sets the foreground color value of an element's text and text decorations It can use like below:- color:gray; For more:- https://www.w3schools.com/css/css_colors.asp

answered Jul 10 '21 at 12:48

Imesh Isuranga

63
1
7

I think you miss the actual question. The question is not about the abckground-color itself but white-space that is caused by margins. – tacoshy Jul 10 '21 at 12:59

How to make the Background Color of an element width the hole site

3 Answers3