...

View Full Version : How do I make my header graphic position better ?



jeddi
06-14-2012, 05:45 AM
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.



.

cord
06-14-2012, 06:03 AM
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;

frickettz
06-14-2012, 08:06 AM
Try using background-size: 100%;

cord
06-14-2012, 08:42 AM
^you could, but the image may look pixelated.

frickettz
06-15-2012, 03:15 AM
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.

jeddi
06-15-2012, 05:48 AM
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.



.

frickettz
06-15-2012, 06:05 AM
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%;
}

jeddi
06-15-2012, 11:53 AM
Thanks,

That seems to be the best option.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum