Backgrounds to the Edge of the Browser

HTML & CSS
1

I’m sure this probably has an answer somewhere findable, but I have no clue how to search for it.

Most sites have backgrounds that extend to the edge of the browser without any white space between the element(s) and the browser edge/chrome. It’s usually with footers (that I’ve noticed anyways). I can’t figure out how to do it without absolute positioning.

Help please!
Thanks :3

2

It’s normally the default padding or margin on the body element.

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

Hi ShinoKage, welcome to SitePoint! :slight_smile:

Browsers apply default margins and paddings to various element, so you have to remove these if you don’t want them.

If you add this to your style sheet, it will remove them:


* {margin:0; padding:0;}

However, it’s better not to do that, as it has consequences. The better approach is to remove margins/paddings from specific elements as you add them.

In your case, it sounds like you need


body {margin:0;}

Hope that helps!

4

Oh, well, there we go. I knew about that someplace in the back of my brain x.X Guess I forgot about it with all my book-learning (in the middle of Everything you Know About CSS is Wrong!).

But thank you! Much appreciated <3