Entire background image is not fitting on screen

Question

(Source:http://imgur.com/5pKaiea.)

Hey I basicly got two of the files above one "header" and one "footer" both same size kinda just flipped.

The problem is the width doesn't fit on page, any ways other than background-image: cover?

The file is basicly 1280 px wide and around 114 px tall.

div #header {
    background-image:url(../img/webclient_header.png);

    height: 114px;
    width: initial;
    margin: 0; /* If you want no margin */
    padding: 0; /*if your want to padding */
}

Answer 1

In CSS you can use the property background-size to resize the image to fit:

div #header {
    background-image:url(../img/webclient_header.png);
    background-size:800px 114px; /* Choose your size here W x H */
    height: 114px;
    width: initial;
    margin: 0; /* If you want no margin */
    padding: 0; /*if your want to padding */
}

UPDATE: Checkout the code update on jsfiddle http://jsfiddle.net/bKZ8N/

Answer 2

If you're looking to have responsive images on your website, background-image is not really the best path to take. You'd need to either use may CSS media queries to serve different background images sizes or use something like background-size property which is not compatible with older browsers.

I would suggest doing something like this:

<header>
  <img src="you-image.jpg" width="100%" height="auto" />
</header>

Answer 3

That's a lot going on for one header / footer image... I would look into possibly breaking it up.. You can make the center part a set width of the whole site that would essentially contain the menu. Then after that you would cut a 1px width (x-value)px height and use that as a repeating background behind your header div. The other elements can be strategically planned to be added to other portions of the site to better reflect the image.

Not a great answer, but it is what I would do in this situation. Otherwise you're looking at the image being stretched and possibly lose some focus.

EDIT: To answer your question in comments Kind of...

So you would have at least 3 images header_middle_piece.jpg (the middle of the image that is pointing "down"), footer_middle_piece.jpg (the rotated version of header.), and repeating_pattern.jpg

From there you would have your leveled layout.

<div id="header">
    <div id="container">
       <div id="content"></div>
    </div>
</div>

Use the same type of layout for your footer.

#header{
   width: 100%;
   background: url('repeating_pattern.jpg') repeat 0 0 scroll transparent;
   height: 20px; // Make this the height of the pattern you are using.
}
#container{
   background: url('header_middle_piece.jpg') no-repeat 0 0 scroll transparent;
   height: 40px; // height of the middle piece.
   width: 200px; // width of middle piece
   margin: 0 auto; // center the container.
}

Those are the only styles you need to get that working in the whole. After wards you would need to target the background for the repeating background of those stripes if you still do those, and make a div for the other shapes. If you didn't make this image you will have a hard time breaking it up. But it is doable.