How do I make my header graphic position better ?

Hi,

I have finished my website, and it has a nice graphic banner at the top.

The dimensions are 998px × 126px

The image is set as a background image so that I can add the
header text on the left-hand side.

Here is what it looks like:
Express Response (http://expressresponse.net/)

Now if my window is only 1000px wide then it looks great, but any wider
and the back ground image repeats. That repeating doesn't look very professional.

What do you suggest I do ?
Should I have a wider image - maybe 1400px ?

Problem with that is that the rest of the layout is designed to look
best for a 1000px layout. If image is wide I will get scroll bars and
a lot of empty space when the window is smaller.

I could auto resize the window to 1000px - but I think users don't like that.

Is there away to make the image "expand" over the width of the screen ?

Any suggestions ?


Thanks.



.

You can either set the

background-repeat:none;

or you could center it and make it the same width as the footer and set
margin-left:auto; and
margin-right:auto;

Try using background-size: 100%;

^you could, but the image may look pixelated.

That's true, what it does is stretches your image to fill the width of the container/browser.

I took a look at your site with that setting and it looks good on my 1200x900 resolution. Some viewers with very large resolutions could see some distortion though, depends.

I'd suggest making another image with larger dimensions.

Hi,
Thanks for your replies,

This is the code I already have for the background header image.

As you can see I already have width = 100%
so I was surprised to get a reated image, I thought it would stretch.

In css:

#header {
width: 100%;
height: 126px;
background: url("http://expressresponse.net/sys_images/banner4.png");
}



And the HTML:

<div id="header">
<h1 style="float:left; margin:20px 0 0 30px; color: #981b15; font-size: 36px;"><i>Express Response</i><br>
<span style="color: #000; font-size: 22px;">ExpressResponse.net</span></h1>
</div>





I tried adding no repeat like this:


In css:

#header {
width: 100%;
height: 126px;
background: url("http://expressresponse.net/sys_images/banner4.png");
background-repeat:none;
}



But nothing changed. :confused:

Any more ideas ?

Thanks.



.

jeddi, replace your header css with the following:


#header {
width: 100%;
height: 126px;
background: url("http://expressresponse.net/sys_images/banner4.png");
background-size: 100%;
}

Thanks,

That seems to be the best option.