CSS: Two background images possible?

03-04-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.

03-04-2004

Erik Harris wrote:
> 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.

03-04-2004

On Thu, 04 Mar 2004 02:03:09 GMT, Leif K-Brooks <>
wrote:

>Erik Harris wrote:
>> 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.

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.

03-04-2004

On Wed, 03 Mar 2004 21:36:25 -0500, Erik Harris <n$wsr$ader@$harrishom$.com>
wrote:

>On Thu, 04 Mar 2004 02:03:09 GMT, Leif K-Brooks <>
>wrote:
>
>>Erik Harris wrote:
>>> 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.
>
>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.

03-04-2004

Erik Harris wrote:

> 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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

03-04-2004

Erik Harris <n$wsr$ader@$harrishom$.com> wrote:

>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.i...ackgrounds.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.

--
Spartanicus

03-04-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

03-04-2004

On Thu, 04 Mar 2004 08:08:20 +0000, Toby A Inkster
<> wrote:

>Erik Harris wrote:
>
>> 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.

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.

03-04-2004

Erik Harris wrote:

> On Thu, 04 Mar 2004 08:08:20 +0000, Toby A Inkster
> <> wrote:
>
>>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.

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 BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

03-04-2004

Erik Harris wrote:

> 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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Re: background images and span element when images are turned off	Adrienne Boswell	HTML	1	08-04-2009 10:51 AM
Re: background images and span element when images are turned off	Travis Newbury	HTML	0	08-04-2009 10:27 AM
not able to click on background tab and backgrounds in properties to change the background.	rex	Computer Support	2	12-06-2006 02:26 AM
Background transparent when 'background' is used	JWL	HTML	4	09-26-2006 05:37 PM
Background Check - Background search - People search	mason66	ASP .Net	0	07-27-2006 10:20 AM