css and corner image on a div

[Philippe Rousselot]

Hi,

is there a way to assign an image to each upper corner of a div using css

kind of
..roundtop {
background: url( ) no-repeat top right;
background: url( ) no-repeat top left ;
}
but something that works ...


Thanks

Philippe

 

[Steve Pugh]

is there a way to assign an image to each upper corner of a div using css

kind of
.roundtop {
background: url( ) no-repeat top right;
background: url( ) no-repeat top left ;
}
but something that works ...

Not yet. It has been suggested and may end up being included in a
standard and/or implemented sometime in teh next decade.
See http://ln.hixie.ch/?start=1098915335&order=-1&count=5

At the moment you'll need to introduce some redundent elements in
order to place the additional background(s).

Steve

 

[Philippe Rousselot]

Not yet. It has been suggested and may end up being included in a
standard and/or implemented sometime in teh next decade.
See http://ln.hixie.ch/?start=1098915335&order=-1&count=5

At the moment you'll need to introduce some redundent elements in
order to place the additional background(s).

Steve

Thanks, I will then wait for the next decade

Philippe

 

[Mark Parnell]

is there a way to assign an image to each upper corner of a div using css

As Steve said, not directly on the <div>, but you can work around it.
Here are some links that might help:

http://www.albin.net/CSS/roundedCorners/
http://www.alistapart.com/articles/mountaintop/
http://virtuelvis.com/gallery/css/rounded/
http://kalsey.com/2003/07/rounded_corners_in_css/

 

[Nik Coughin]

Hi,

is there a way to assign an image to each upper corner of a div using
css

kind of
.roundtop {
background: url( ) no-repeat top right;
background: url( ) no-repeat top left ;
}
but something that works ...


Thanks

Philippe

Hi Philippe,

You just have to wrap blocks inside other blocks in order to do this,
instead of trying to assign all of the background elements to the same
block.

Think about a compass:

NW N NE

W E

SW S SW

Assume that you use this system to label each of your corners, and also
assume for the moment that you are using corners that are 24x24px, you can
do something like this:

..bodyNW
{
background: url( bodyNW.png ) no-repeat top left;
}

..bodyN
{
background: url( bodyN.png ) repeat-x top;
margin-left: 24px;
margin-right: 24px;
}

..bodyNE
{
background: url( bodyNE.png ) no-repeat top right;
}

..bodyW
{
background: url( bodyW.png ) repeat-y left;
}

..body
{
background: url( body.png );
margin-left: 24px;
margin-right: 24px;
}

..bodyE
{
background: url( bodyE.png ) repeat-y right;
}

..bodySW
{
background: url( bodySW.png ) no-repeat bottom left;
}

..bodyS
{
background: url( bodyS.png ) repeat-x bottom;
margin-left: 24px;
margin-right: 24px;
}

..bodySE
{
background: url( bodySE.png ) no-repeat bottom right;
}

..bodyN img
{
height: 24px;
}

..bodyS img
{
height: 24px;
}

..bodyNW, .bodyNE, .bodyN, .bodySW, .bodySE, .bodyS
{
font-size: 0;
lineheight: 0;
}


<div class="bodyNW">
<div class="bodyNE">
<div class="bodyN">
<img src="spacer.png" alt="">
</div>
</div>
</div>
<div class="bodyW">
<div class="bodyE">
<div class="body">

Content.

</div>
</div>
</div>
<div class="bodySW">
<div class="bodySE">
<div class="bodyS">
<img src="spacer.png" alt="">
</div>
</div>
</div>

If you would like to see this in use, here is a site I am working on at the
moment:
http://www.nrkn.com/masterpiece/

 

[Travis Newbury]

Not yet. It has been suggested and may end up being included in a
standard and/or implemented sometime in teh next decade.

Which sadly means it will not be supported by Microsoft until 2022...

 

[Travis Newbury]

is there a way to assign an image to each upper corner of a div using css

What are you trying to do? Use images for the corners? if so, google
rounded corners CSS and be rewarded with a ton of examples.

 

[Leif K-Brooks]

is there a way to assign an image to each upper corner of a div using css

As with most neat features, it's proposed [1] in the CSS3 working draft,
but no browsers currently supports it.

[1] <http://tinyurl.com/6gocr>