Multiple background images

Hi,

I have a div element and I would like to place a single image in the
top left corner, and then a different repeating image vertically below
that along the left hand side.

Is this possible using CSS? If not what is the best way to go about
this? Manually embedding further elements within the element would be
a pain, as each parent div could have a different classname, and
therefore would need different background images set.

Thanks for any suggestions.

On 2009-01-05, Mark Smith <marksmith5555 (AT) jungle-monkey (DOT) com> wrote:

Hi,

I have a div element and I would like to place a single image in the
top left corner, and then a different repeating image vertically below
that along the left hand side.

Is this possible using CSS?

Not entirely. You can do the repeating image (using background-image,
background-position and background-repeat), but you'll need an IMG for
the one in the top left corner.

"Mark Smith" <marksmith5555 (AT) jungle-monkey (DOT) com> wrote

Hi,

I have a div element and I would like to place a single image in the
top left corner, and then a different repeating image vertically below
that along the left hand side.

Is this possible using CSS? If not what is the best way to go about
this? Manually embedding further elements within the element would be
a pain, as each parent div could have a different classname, and
therefore would need different background images set.

This demonstrates several techniques for doing what you want, but uses all
four corners and repeating along the top, bottom, left and right sides. It
should be trivial to reduce it to what you need:
http://nrkn.com/skinning/

Nik Coughlin wrote:

"Mark Smith" <marksmith5555 (AT) jungle-monkey (DOT) com> wrote in message
news:d3c792a2-2e19-45e2-9a21-7551e1cc07da (AT) q36g2000vbn (DOT) googlegroups.com...
Hi,

I have a div element and I would like to place a single image in the
top left corner, and then a different repeating image vertically below
that along the left hand side.

Is this possible using CSS? If not what is the best way to go about
this? Manually embedding further elements within the element would be
a pain, as each parent div could have a different classname, and
therefore would need different background images set.

This demonstrates several techniques for doing what you want, but uses
all four corners and repeating along the top, bottom, left and right
sides. It should be trivial to reduce it to what you need:
http://nrkn.com/skinning/

That's pretty nice Nik.

It looks like for the time being nesting is the way to go.

I've been using this as my standard small container:

<div class="[class_] [class_2]">
<div class="tl">
<div class="tr">[heading]
</div>
</div>
<div class="l">
<div class="r">[content]
</div>
</div>
<div class="bl"><div class="br">[footer]</div></div>
</div>

and styling as descendents of whatever class_ is. I think I got the idea
from you. .tl=> top left .tr=>top=>top right... Not perfect but has
worked so far...

Jeff

"Jeff" <dont_bug_me (AT) all (DOT) uk> wrote

Nik Coughlin wrote:
http://nrkn.com/skinning/

I've been using this as my standard small container:

div class="[class_] [class_2]"
div class="tl"
div class="tr">[heading]
/div
/div
div class="l"
div class="r">[content]
/div
/div
div class="bl"><div class="br">[footer]</div></div
/div

and styling as descendents of whatever class_ is. I think I got the idea
from you. .tl=> top left .tr=>top=>top right... Not perfect but has worked
so far...

Initially I used compass points, N/NE/E/SE/S/SW/W/NW, as in this page, which
is positively ancient (2004?):
http://www.nrkn.com/round/

I realised that it was more consistent to follow the same convention as CSS


You can reduce the amount of classes in your markup by being more specific
with your selectors but sometimes it's nice to be explicit about your
intentions.

Nik Coughlin wrote:

"Jeff" <dont_bug_me (AT) all (DOT) uk> wrote in message
news:GrCdnYeyud847f_UnZ2dnUVZ_gudnZ2d (AT) earthlink (DOT) com...
Nik Coughlin wrote:
http://nrkn.com/skinning/

I've been using this as my standard small container:

div class="[class_] [class_2]"
div class="tl"
div class="tr">[heading]
/div
/div
div class="l"
div class="r">[content]
/div
/div
div class="bl"><div class="br">[footer]</div></div
/div

and styling as descendents of whatever class_ is. I think I got the
idea from you. .tl=> top left .tr=>top=>top right... Not perfect but
has worked so far...

Initially I used compass points, N/NE/E/SE/S/SW/W/NW, as in this page,
which is positively ancient (2004?):
http://www.nrkn.com/round/

Yow. You've been thinking about this for a long time!

I realised that it was more consistent to follow the same convention as
CSS

I had to think about that for a while as I was thinking of top right
bottom left. Now I think you must mean the convention used for
positioning backgrounds. Still thinking...

You can reduce the amount of classes in your markup by being more
specific with your selectors but sometimes it's nice to be explicit
about your intentions.

It's all CMS stuff, so I leave it all in and style what I need. Often
nothing gets styled. Purists will sniff, but purists aren't pragmatists.

I've been doing nearly the same thing with my page templates with all
the sites using roughly the same header layout followed by 3 equal
columns and then a footer. A few years ago, at least for me, I couldn't
do that and each site's basic html looked different. Background images
change the way you think about html. Every design seems much easier now.

Jeff