Tile asymmetrical header background in CSS

MikeS009 · Feb 2, 2004

Hi, My background is in graphics, a bit of a newbie to web design, am learning code.

I'm aiming for an centred image as a header, size and proportions to remain fixed and centred. The centre image is asymmetrical, and I want the effect that the right and left edges of the header stretch off to the right and left edges of the screen without margins. The following code works in everything except Opera

The images Curves 7L.gif and Curves7R.gif are a 1 pixel crop off the edges of the centre image 'Curves7.gif' which I am trying to tile left & right, giving a stripey effect

<html>
<head>
<title>css header</title>
<style type='text/css'>
body
{ padding:0px;
margin:0px;}
div#back
{ position:absolute;
top:0px;
left:0px;}

div#back-left
{ width:49%;
height:85px;
background-image:url(Curves7L.gif);
border:none;
float:left;}
div#back-right
{ width:49%;
height:85px;
background-image:url(Curves7R.gif);
float:right;}

div#top
{ text-align:center;
position:absolute;
top:0px;
left:0px;
width:100%;}

img#top-image
{ width:901px;
height:85px;}

div.spacer
{ clear: both;
font-size:0px;
line-height:0px;}

</style>
</head>

<body>
<div id='back'>
<div class='spacer'> </div>
<div id='back-left'>
<div class='spacer'> </div>
</div>
<div id='back-right'>

<div class='spacer'> </div>
</div>
<div class='spacer'> </div>
</div>
<div id='top'>

<div class='spacer'> </div>

<img src='Curves7.gif' id='top-image'></img>

<div class='spacer'> </div>
</div>
</body>
</html>

I've also tried

background: #ffffff url(Curves7L.gif) repeat-x left;

instead of

background-image:url(Curves7L.gif);
border:none;
float:left;}

which also works in everything except Opera
One last thing, I'm down as an instructor, this is a mistake, I should be technical user, can this be changed?

Any help much appreciated

Cheers Mike

MichiganRon · Feb 2, 2004

Mike,

Here's a suggestion: Enclose your URL in double quotes (eg:

Code:

background-image:url(

Code:

&quot;

Code:

Curves7L.gif

Code:

&quot;

Code:

);

). I don't know if it will make a difference to Opera, but it's worth a shot.

For various reasons, your user "type" in Tek-Tips is strictly controlled by the owners of the site. They may be willing to allow you to change it, but you need to contact them directly. Click the "Contact Us" link at the top of this page.

Help that helps,
-Ron

We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are. -Me

murof siht edisni kcuts m'I - PLEH

MikeS009 · Feb 2, 2004

Thanks,Darkshadeau, but it hasn't made any difference in Opera

Thanks for the userinfo, I've mailed them

Cheers Mike

BillyRayPreachersSon · Feb 3, 2004

Mike,

Do you have a URL to a version of the page we can see, with all the relevant images?

Dan

MikeS009 · Feb 4, 2004

Hi Billy Ray,
unfortunately its all still in my computer. what gave me the idea was this

http://www.nt-online.org/

only with a photo or assymetrical gif instead of the fixed red bit at top center and with the left and right edges of the photo stretching to the edge of the screen

If you take any bitmap, resize to the dimensions above ( 901 x 85) and take a 1px x 85 px crop off the left and right edges, and switch urls, the code above works in everything except Opera
Cheers Mike

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Tile asymmetrical header background in CSS

MikeS009

Technical User

MichiganRon

MIS

MikeS009

Technical User

BillyRayPreachersSon

Programmer

MikeS009

Technical User

Similar threads

Part and Inventory Search

Sponsor