Neverside

tiling an image in horiontal div

Howdy everyone. This is my first post, although I've been reading the boards for quite some time now.

What I'm trying to do.

I have a div with a background picture aligned in the top left corner of the page. At the top of the picture, is a 91px stripe, basically, that is tile-able. The stripe is part of the picture, because there is an extra graphic laying over the stripe just about the picture, but I also have just the stripe that I can tile.

Example:

+--------------+
.......stripe.....
+--------------+
---------------
.....picture...
---------------
+--------------+

Basically, I want to do set the stripe snug up next to the picture at the top, then tile it 100% across the top of the page.

Example:

+--------------+-----------------------------------------------------------+
.......stripe...|.......................tiled stripe...................................|
+--------------+-----------------------------------------------------------+
---------------
.....picture...
---------------
+--------------+

Hopefully that was understandable. I look forward to some help

and you want to put something else on top of the image, i assume?

i would try making two <div>'s on top of eachother, the top transparent.

<div style="background-image: url(stripe.jpg); background-position: top left; background-repeat: repeat-y;">
<div style="background-image: url(picture_with_stripe_at_top.jpg); background-position: top left; background-repeat: no-repeat;">

... then your content goes here ...

</div>
</div>

some help, as i understand your predicament hope that helps.

___________________

Jon Culver Chia Pets

He probably wants it to repeat horzontally, so in that case, it would be repeat-x

har.. whoops.

___________________

Jon Culver Chia Pets

Thanks guys, that basically gave me the look I wanted!

*edit* fixed

Thanks.

Last edited by the_jamester, February 9th, 2004 06:54 AM (Edited 1 times)