Search code examples
javascripthtmlcss

Set the background color of the entire webpage (the browser's window)


I have very little experience with html, css, etc so probably this looks like a stupid question to those that are used to create web pages. But I cannot manage to set the background color of the entire window.

I mean the browser's window.

For example: imgur

What I've already tried is setting the background color of the body with, of course, no success.

Any help/link would be appreciated.

EDIT:

Probably, due to my English, I cannot explain what I mean. I'll try again. In the link I've posted, the web page is in the center of the screen (as 99% of the web sites).

This is the body, isn't it ?

No problems in changing the bg color of it so please stop posting obvious answers.

I need to change the bg color of the columns at the right and left side of the body, as in the link I've posted. So, I guess there's a way to set a color/texture of the entire window, not only the body.


Solution

  • marco -

    The body background of the page is a solid color, but they do apply an image (texture) to div elements on the page. I think this is what you are trying to duplicate. See the css in the example below, especially the background: url(); The texture they use is very subtle and not easy to see on my screen.

    image url: http://s.imgur.com/images/main-bg.png

    You can inspect the site yourself using the developer tools of your browser (usually press F12) and looking at the styles applied to the page.

    This is the actual style from the page:

    #fullbleed-bg {
        width: 100%;
        min-width: 1000px;
        height: 429px;
        position: absolute;
        top: 50px;
        background: url("//s.imgur.com/images/main-bg.png") no-repeat scroll center top transparent;
        max-width: 100%;
        overflow-x: hidden;
    }
    

    Run the snippet to view:

    <html>
    <head>
    <style type="text/css">
      
    body {
        width: 100%;
        height: 200px;
        background-image: url("//s.imgur.com/images/main-bg.png") 
    }
    </style>
    </head>
    <body>
    </body>
    </html>