CSS Image Doesn't Cover Screen

Question

I have a website where I have an image that I would like to cover my entire screen width wise.

Here is my css:

            .header {
            background-image:url('images/header.png');
            height: 120px;
            width: 100%;
            position: absolute;
            left: 0;
            z-index:1;          
        }

My bug is that, if I resize the browser window so it has a scroll bar and I scroll to the right my image stops drawing after a certain point. It seems that the image is drawing 100% width of window but it doesn't apply if some of the window is not visible, and only is via using the scroll bar.

How do I fix this? Here is a picture of my problem:

Edge of screen before scrolling right:

Edge of screen after scrolling:

Answer 1

Use background-size:cover; and background-repeat:no-repeat;

.header {
        background-image:url('images/header.png');
        background-size:cover;
        background-repeat:no-repeat;
        height: 120px;
        width: 100%;
        position: absolute;
        left: 0;
        z-index:1;          
    }

Currently, you are not telling the background image to 'stretch' so it stays fixed in it's original dimensions.

You also have ANOTHER problem - your html css property is not set to width:100%; your bootstrap.css is overriding it. Therefore, your header element stretches to 100% of html element, which is not 100% of the screen's width.

Find your local css and add (or edit) the current html & body rules:

html,body {
    width:100%;
    margin:0;
    padding:0;
}

Make sure it is loaded AFTER the bootstrap css (and therefore overrides bootstrap.css).

If it still makes problems, try using

width:100% !important;

Just for general knowledge, I recommend using your browsers' built in inspector tool (or FireBug) to see the element on the screen and what's their dynamic css values.

Hope this helps!