CSS: Two background images possible?

Erik Harris · Mar 4, 2004

What I want to do seems simple enough, and is something that's commonly done
in printed media. I want a vertically-repeated background image on each side
of the screen.

Is there any way to do this? I've got a margin defined for my <BODY>, and
would like an image repeated vertically on the left side of the screen and
another one repeated vertically on the right side of the screen. Specifying
two images doesn't do the trick, nor does specifying two complete
backgrounds.

If there's another way to do this, I'm all ears.. I had originally tried
doing something like this with absolutely posititoned <DIV>s, but apparently
IE6 doesn't support absolute positioning, and unfortunately, most people
still use IE, making me choose between "cater to the IE drones" and "make a
page that looks bad on IE."

(Furthermore, Firefox seems to limit the
height of an absolutely positioned DIV to the size of the view portal instead
of the page/content, which makes that option doubly useless).

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://www.eharrishome.com/cimac/

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

Leif K-Brooks · Mar 4, 2004

Erik said:
What I want to do seems simple enough, and is something that's commonly done
in printed media. I want a vertically-repeated background image on each side
of the screen.

Use one background image for the body element, another for the html element.

Erik Harris · Mar 4, 2004

Use one background image for the body element, another for the html element.

Now _that's_ a neat trick.

Thanks Leif, I'll go ahead and give that a shot. Hopefully most browsers
will do it.

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://cimac.eharrishome.com

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

Erik Harris · Mar 4, 2004

Now _that's_ a neat trick.

Thanks Leif, I'll go ahead and give that a shot. Hopefully most browsers
will do it.

I thought this would work.. Can you look at
http://www.eharrishome.com/new-cimac/ (and the CIMAC.css file in the same
directory) and let me know if you see any problems? This may simply be a bug
in Firefox, but I only get the background image for the BODY (on the right),
not the one for HTML (on the left), which is kind of odd, since I'm getting
the backgound color from HTML.

To make matters worse - This looks fine in Internet Explorer, AND it works
fine in Firefox _if_ the background image is the same for both HTML and BODY.
As soon as they're different images, the HTML background disappears.

Hmm....

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://cimac.eharrishome.com

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

Toby A Inkster · Mar 4, 2004

Erik said:
I thought this would work.. Can you look at
http://www.eharrishome.com/new-cimac/ (and the CIMAC.css file in the same
directory) and let me know if you see any problems?

Not specific to Firefox either. Regular Mozilla doesn't like it either.

Looks fine in Opera 5.x/6.x/7.x, although Opera 3.6x has the same problem
as Mozilla.

Konqueror 3.1 displays it fine, so I guess that means Safari would too.

One point of interest: why do you set 'position:absolute;top:0%' in the
CSS for BODY? Absolutely positioned elements have no intrinsic width, so
(in Opera 7.x at least) this causes the body to narrow as much as it can
(which is limited by your logo), leaving a big gap between the tigers and
the edge of the browser window. Screenshot is here:
http://www.goddamn.co.uk/tobyink/scratch/tiger

Have you tried instead: 'margin-top:0;padding-top:0'. It should have the
same effect in this case.

Spartanicus · Mar 4, 2004

Erik Harris said:
What I want to do seems simple enough, and is something that's commonly done
in printed media. I want a vertically-repeated background image on each side
of the screen.

http://www.spartanicus.utvinternet.ie/test/2_backgrounds.htm

One problem, there needs to be enough content to stretch the container
div enough to the full viewport height. Perhaps there is a work around
for that problem (I can't recall at the mo).

apparently IE6 doesn't support absolute positioning

Sure it does.

page that looks bad on IE." (Furthermore, Firefox seems to limit the
height of an absolutely positioned DIV to the size of the view portal

View portal?

instead of the page/content

The height of an absolutely positioned block element will expand with
the content if no "bottom" property is specified.

Malcolm · Mar 4, 2004

What I want to do seems simple enough, and is something that's commonly
done

in printed media. I want a vertically-repeated background image on each side
of the screen.

There has just been a thread on this in
comp.infosystems.www.authoring.stylesheets
(The thread is How to colour an entire DIV column?)

The suggestion there is to look at this site:
http://www.pixy.cz/blogg/clanky/css-3col-layout/

It uses vertically repeating backgrounds to create a 3 column layout. All 3
columns are always the same length.

Malcolm

Erik Harris · Mar 4, 2004

Not specific to Firefox either. Regular Mozilla doesn't like it either.

Same renderer, so I'm not surprised. Thanks for confirming, though.

One point of interest: why do you set 'position:absolute;top:0%' in the
CSS for BODY? Absolutely positioned elements have no intrinsic width, so

It was to get around another inconsistency between rendering in Firefox and
in IE. IE put the BODY at the top of the page if I set the margins and
padding to zero. Firefox (and presumably Mozilla), however, drops the body
down at least 1em from HTML. I didn't notice it before I defined a
background for HTML, because Firefox apparently uses the entire canvas for
the BODY background if (and only if) no HTML background is defined. As soon
as I defined a background for HTML, the background for my BODY got moved to
within the margins (which is why I had to add a DIV class="body" for the 10%
horizontal margin). This resulted in a distracting vertical offset between
the left and right background images.

(in Opera 7.x at least) this causes the body to narrow as much as it can
(which is limited by your logo), leaving a big gap between the tigers and
the edge of the browser window. Screenshot is here:
http://www.goddamn.co.uk/tobyink/scratch/tiger

Hmm... I'm confused about how this was rendered.. I specifically gave both
HTML and BODY 0em margins on all sides, and DIV.body 10% margins on both
sides. I don't understand where that gap is coming from. It does not appear
in Firefox or in IE.

Have you tried instead: 'margin-top:0;padding-top:0'. It should have the
same effect in this case.

It should, but it doesn't in Firefox (and presumably other Gecko-based
browsers), unless I did something else wrong that caused the top margin or
padding to be ~1em despite specifying zero.

I can think of at least one other kludgy ways around this (having a 90% width
DIV on the left and having a 90% DIV on the right, specifying the
backgrounds, and putting the whole page imbedded in both DIVs), but it seems
like such an inelegant solution.

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://cimac.eharrishome.com

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

Toby A Inkster · Mar 4, 2004

Erik said:
It was to get around another inconsistency between rendering in Firefox and
in IE. IE put the BODY at the top of the page if I set the margins and
padding to zero. Firefox (and presumably Mozilla), however, drops the body
down at least 1em from HTML.

Ah, this one. I've had that trouble before. I can't remember the exact
solution, but try fiddling with the margin-top and padding-top of the H1.

Toby A Inkster · Mar 4, 2004

Erik said:
Hmm... I'm confused about how this was rendered.. I specifically gave both
HTML and BODY 0em margins on all sides, and DIV.body 10% margins on both
sides. I don't understand where that gap is coming from.

body{width:100%;} should fix it.

As I said, absolutely positioned elements should have an explicit width
set.

Erik Harris · Mar 4, 2004

http://www.spartanicus.utvinternet.ie/test/2_backgrounds.htm

One problem, there needs to be enough content to stretch the container
div enough to the full viewport height. Perhaps there is a work around
for that problem (I can't recall at the mo).

Using another DIV with a background in it was the kludgy solution I had
thought of that I mentioned (earlier in this thread, but maybe not in the
message you replied to). But as you point out, I don't know how to get it to
go to the bottom of the screen on short pages (such as the "Photos" page on
my www.eharrishome.com/new-cimac/ site). Unless there's a solution I'm not
aware of, the only way around that will be to make sure that all of my pages
are long enough that they're longer than one screen at any reasonable
resolution.

Sure it does.

None of my attempts worked. I had tried creating a pair of DIV's that were
absolutely positioned on the left and right side of the screen, either using
position: absolute or position: fixed. Both were using valid CSS code
(validated), and both worked in Firefox, but neither worked in IE.

View portal?

In the case of screen-viewing, the view portal is the window size. I'm
pretty sure that's what W3C uses for its terminology. When I used "bottom:
0" on an absolutely positioned DIV, it would take up the whole screen, but as
soon as I scrolled down, I'd see the bottom of it. The only solution was to
used "fixed" type of absolute positioning, but that didn't work at all in IE.
At least the "absolute" type of absolute positioning did _something_ in IE,
even if it was messed up.

I've since decided to go with another look, so I don't have that old CSS code
around to show what I mean, but I had basically tried making a "left margin
DIV" and a "right margin DIV." They had no content, and were just supposed
to be colored boxes that filled the margins.

The height of an absolutely positioned block element will expand with
the content if no "bottom" property is specified.

And if there's no content, that doesn't help.

Or in the case of using
embedded DIVs where all of the content is inside a DIV inside a DIV, the
outer DIV only goes to the bottom of the content, even if the page is less
than one screen long (as you mentioned above).

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://cimac.eharrishome.com

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

Spartanicus · Mar 4, 2004

Erik Harris said:
None of my attempts worked.

Blame your attempts.

In the case of screen-viewing, the view portal is the window size. I'm
pretty sure that's what W3C uses for its terminology.

Viewport.

Mark Parnell · Mar 4, 2004

position: absolute or position: fixed. Both were using valid CSS code
(validated), and both worked in Firefox, but neither worked in IE.

IE supports position: absolute; but not position: fixed; :-(

Erik Harris · Mar 5, 2004

Blame your attempts.

That's a distinct possibility.. But considering that IE has plenty of known
limitations in its implementation of both HTML and CSS (more the latter than
former, as it seems), and considering that the CSS validated and looked as
expected in Firefox, I don't think it's the only possibility, or even the
most likely.

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://cimac.eharrishome.com

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

Spartanicus · Mar 5, 2004

Erik Harris said:
That's a distinct possibility.. But considering that IE has plenty of known
limitations in its implementation of both HTML and CSS (more the latter than
former, as it seems), and considering that the CSS validated and looked as
expected in Firefox, I don't think it's the only possibility, or even the
most likely.

As Mark said, position:fixed is not supported by IE (and unsuitable for
your purpose), but position:absolute *is* supported. Post your code and
we can point out where you went wrong.

Erik Harris · Mar 5, 2004

As Mark said, position:fixed is not supported by IE (and unsuitable for
your purpose), but position:absolute *is* supported. Post your code and
we can point out where you went wrong.

And fixed positioning is a type of absolute positioning (According to W3C,
<http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning>). I guess my
statement should have been "IE does not fully support absolute positioning,"
since both of our claims (that it doesn't support it, and that it does) are
correct but incomplete.

As I said, though, I changed my mind on the direction I wanted to go with the
website after getting either form of absolute positioning ("absolute" or
"fixed") to work how I wanted it to in Firefox or at all in IE, so I've no
longer got the code. Basically, though, until I decided to abandon the idea
and go with "margin images", I was trying to get a <div> on each side of the
page that took up 10% of the width and the full height, containing no
content. For that purpose, position:fixed was certainly suitable for my
purpose, and was my first choice, but even with position:absolute, IE ignored
my top, bottom, left, and right placements (or perhaps it just ignored the
"bottom" one, I don't remember for certain). I don't think I tried adding
something redundant like "height: 100%" though. (that comes to mind after the
problems Opera had with my current design, where it left a large gap on the
right, despite the explicitly stated right margins).

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://cimac.eharrishome.com

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

Spartanicus · Mar 5, 2004

Erik Harris said:
I was trying to get a <div> on each side of the
page that took up 10% of the width and the full height, containing no
content. For that purpose, position:fixed was certainly suitable for my
purpose

It isn't, fixed elements are removed from the flow and are positioned
relative to the viewport.

Erik Harris · Mar 5, 2004

Ah, this one. I've had that trouble before. I can't remember the exact
solution, but try fiddling with the margin-top and padding-top of the H1.

Wonderful.. That did the trick. I've now got a background setup that, at
least in Firefox and IE, looks right on all pages except the "Photos" page,
because I used a DIV for the second background.

http://www.eharrishome.com/new-cimac/

Any further advice would be welcome (aside from "remove the navigational
table" - my next task is to turn that into a CSS navigational bar), if anyone
else knows of a way to get this to work regardless of content length (without
making Gecko choke). Hopefully I'll bring a camera into class and this
"problem" will go away at all reasonable resolutions anyhow. I still feel
like this is a kludge and not a "proper" solution (the whole "semantic
markup" thing that I'm still trying to get the hang of).

Thanks, all!

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://cimac.eharrishome.com

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

Stuck with html and css	25	Dec 14, 2022
CSS :hover and Internet Explorer 6?	6	Jun 25, 2003
CSS "drop shadow" block element effect	11	Feb 29, 2004
blurry edge backgrounds by css	7	May 21, 2014
Help with my responsive home page	2	Dec 14, 2022
Displaying images in css "frames"	12	Apr 28, 2008
User Control css images	0	Jun 30, 2010
Repeating Background Image Size	2	Aug 9, 2007

CSS: Two background images possible?

Erik Harris

Leif K-Brooks

Erik Harris

Erik Harris

Toby A Inkster

Spartanicus

Malcolm

Erik Harris

Toby A Inkster

Toby A Inkster

Erik Harris

Spartanicus

Mark Parnell

Erik Harris

Spartanicus

Erik Harris

Spartanicus

Erik Harris

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads