0

I want the background of my <body> to span the whole width of the page and to go all of the way to the top of the page. This is what my page looks like right now. As you can see the grey background does not extend all of the way to the left. The grey background also does not extend all of the way to the top. And the grey background also does not extend all of the way to the right. I do not want the grey to extend down anymore but I want it to fill all above, left, and right. Here is the coding in my style sheet for the <body> part: 

#title {
    text-align: center;
    color: white;
    background-color: #3B3C36;
    font-family: Eras;
    background-size: cover;
    height: cover;
    width: cover;
}
GAntoine
  • 1,265
  • 2
  • 16
  • 28
tyler.904
  • 19
  • 6

6 Answers6

1

All browsers add default styling to elements. It is a good idea to start your project with either CSS normalize or CSS reset. This will prevent you from encountering problems like the one you have here.

css reset

css normalize

Difference between css reset and normalize

You have a couple of invalid values in your css as height & width 'cover' won't do anything. See here You can use either %, px or viewport units to set the the height & width. It's also best practice to use classes to style the dom rather than id's.

Simplest way to achieve what you want would be to do the following:

html

<h1>Life as a Welsh</h1>

css

html,
body,
h1 {
  margin: 0;
  padding: 0;
}

h1 {
  background: #000;
  color: #fff;
  text-align: center;
}

jsfiddle example

Community
  • 1
  • 1
Stuart
  • 83
  • 1
  • 1
  • 8
0

Try this:

html, body {
    margin: 0;
    height: 100%;
}
SeleM
  • 9,310
  • 5
  • 32
  • 51
  • that worked for extending the width of the grey background! Now can you help me extend to th top of the page? – tyler.904 Apr 03 '16 at 00:31
0

Probably zero out your <body> with CSS:

body {
margin: 0;
padding: 0;
}
Ira
  • 87
  • 7
0

Here is what I got and it fixed the problem: #title { text-align: center; color: white; background-color: #3B3C36; font-family: Eras; background-size: cover; height: cover; width: cover; margin: 0; padding: 0; } html, body { margin: 0; padding: 0; }

tyler.904
  • 19
  • 6
0

Add the background color to the body tag if you wish for the whole page to be the one color. 

body {
  background: #3B3C36 ;
}
Nathan Bone
  • 1
  • 1
0

You should reset all css before normalize.css or * { margin: 0; padding: 0; } for this question

Easy Websites Maker
  • 11
  • 3