PDA

View Full Version : full page banner (horizontally)


longie1985
05-11-2012, 01:45 PM
Hi,

Sorry if this sounds amateur, however I am in the process of creating a site and I want to incorporate a banner approx 50pixles in height, but wish it to fit the width of any page it is viewed on automatically,

Can someone point me in the right direction or provide coding to support this?

Much appreciated

Longie1985

d a v e
05-11-2012, 03:31 PM
but that's going to distort the dimensions of the banner- stretching it horizontally

longie1985
05-11-2012, 03:36 PM
but that's going to distort the dimensions of the banner- stretching it horizontally

Thanks for the Reply Dave,

Sorry, not a jpg banner, say for example on http://www.firebox.com/ at the top of the page there is a red banner, that will stretch the width of any browser you open up the site up in, just wanted to know how this is done?

Thanks

Longie1985

domedia
05-11-2012, 04:50 PM
That is a repeating background image. Is that what you want?

longie1985
05-11-2012, 07:09 PM
That is a repeating background image. Is that what you want?

Hi Domedia

Basically yes, I just want a rectangle to go across the screen and fit any browser by default.

Thanks

Longie1985

johnMoss
05-12-2012, 02:52 PM
Think x & y like in geometry class. x up & down, y left & right. As a background image, all you have to do is tell the browser to repeat the y positioning indefinitely. You said 50 pixels in height, so your basic div looks like this:
On the page:
<div id= "header"> (anything inside, like words or pictures, goes here)</div>

In your css stylesheet:

#header
{background-color: #F00;
background-repeat: repeat-y;
margin: auto;
height: 50px;
}


The color above is red, you of course can choose whatever color you like.

johnMoss
05-12-2012, 10:08 PM
Geez... Am I gettin' old or what... how stupid... reverse x & y in the moronic answer above... here corrected below...

Think x & y like in geometry class. y up & down, x left & right. As a background image, all you have to do is tell the browser to repeat the y positioning indefinitely. You said 50 pixels in height, so your basic div looks like this:
On the page:
<div id= "header"> (anything inside, like words or pictures, goes here)</div>

In your css stylesheet:

#header
{background-color: #F00;
background-repeat: repeat-x;
margin: auto;
height: 50px;
}


The color above is red, you of course can choose whatever color you like.

edbr
05-14-2012, 02:50 AM
Geez... Am I gettin' old or what... how stupid... reverse x & y in the moronic answer above... here corrected below...

I am so happy to hear that i'm not the only one that messes them up :)
It took me 40 years to remember which was stalagmite and which was stalactite till some one said to me remember tights always come down. cant make one like that for x and y though :)