Css background-images issue

**august** · 01-31-2006 08:29 PM

Hi everybody.

Css is complicated, when you go advanced it ain't easy anymore.

Here's what I want to do:

Code:

<body>

<div><p><span>text</span></p>
<span id="brCorner">&nbsp;</span>
</div>

</body>

I would like to insert 4 background-images for each corner of the "outer" box.
Since the text can be resized I figured it's a bad idea to use just one background-image for the div, that fills the entire box, since it has to be aligned with a background pattern of the body and a text resize could throw the alignement off.

That's why I figured it's better put one background-image in each of the <div> s. But the p and the spans are smaller than the div which means their corners will land in different places. Sorry to make this long, but do you know of a good way to use several background-images but make it look as if they formed just one image in just one element, and that is also robust?

Thank you, hope you can help.

**bathurst_guy** · 01-31-2006 08:49 PM

There are heaps of articles on the net about rounded corners.

A List Aparts article
Google Search

**august** · 02-02-2006 01:24 AM

Still sort of complicated.

Why can't you just give the containing div position: relative, and then simply place 4 s in each of its corners by positioning them absolutely and then assign the corner images to the s?

Why mess with headers and s if you think you don't need them, or why use more <divs> than needed? Divs look confusing, better use spans, one for each corner and place them by position: absolute within a relatively positioned div. (Haven't tried yet

, but their method looks too verbose with ps, and divs, and hs, and ps, and divs, are they just trying to be fancy?

)

**bathurst_guy** · 02-02-2006 01:41 AM

Spans are inline elements and divs are block elements, so use divs, you can do something like this

Code:

<html>
<head>
<style type="text/css">
.corners {
margin: 0;
padding: 0;
}
#tl { background: #000 url('images/tl.gif') no-repeat top left; }
#tr { background: transparent url('images/tr.gif') no-repeat top right; }
#bl { background: transparent url('images/bl.gif') no-repeat bottom left; }
#br { background: transparent url('images/br.gif') no-repeat bottom right; }
</style>
</head>
<body>
<div id="tl" class="corners"><div id="tr" class="corners"><div id="bl class="corners"><div id="br class="corners">
<p>lt is lop left, tr is top right, bl is bottom left and br is bottom right</p>
</div></div></div></div>
</body>
</html>

**terrawolf** · 02-02-2006 05:06 PM

CSS code that I really like cos it works so well in most browsers and is really flexible is this one:
http://www.456bereastreet.com/lab/teaser/flexible/

Why mess with headers and s if you think you don't need them, or why use more <divs> than needed? Divs look confusing, better use spans, one for each corner and place them by position: absolute within a relatively positioned div.

I don't like using too much code to create boxes and the like either... to me it removes the purpose of separating the visual from the content a little, but I think that it makes it easier to deal with later.

**august** · 02-02-2006 05:18 PM

I'm checking it out. That latter one seems to be a good more simple solution than the ALA version, but again the ALA version used 5 images.

Thanks.

Thread: Css background-images issue

Thread Tools

Display

Css background-images issue

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions