CSS: Two background images possible?

Discussion in 'HTML' started by Erik Harris, Mar 4, 2004.

  1. Erik Harris

    Erik Harris Guest

    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.
    Erik Harris, Mar 4, 2004
    #1
    1. Advertising

  2. 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.
    Leif K-Brooks, Mar 4, 2004
    #2
    1. Advertising

  3. Erik Harris

    Erik Harris Guest

    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.
    Erik Harris, Mar 4, 2004
    #3
  4. Erik Harris

    Erik Harris Guest

    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.
    Erik Harris, Mar 4, 2004
    #4
  5. 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
    Toby A Inkster, Mar 4, 2004
    #5
  6. Erik Harris

    Spartanicus Guest

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

    --
    Spartanicus
    Spartanicus, Mar 4, 2004
    #6
  7. Erik Harris

    Malcolm Guest

    Re: Two background images possible?

    > 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
    Malcolm, Mar 4, 2004
    #7
  8. Erik Harris

    Erik Harris Guest

    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.
    Erik Harris, Mar 4, 2004
    #8
  9. 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
    Toby A Inkster, Mar 4, 2004
    #9
  10. 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
    Toby A Inkster, Mar 4, 2004
    #10
  11. Erik Harris

    Erik Harris Guest

    On Thu, 04 Mar 2004 08:35:39 +0000, Spartanicus <> wrote:

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

    >>apparently IE6 doesn't support absolute positioning


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

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


    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.

    >>instead of the page/content


    >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.
    Erik Harris, Mar 4, 2004
    #11
  12. Erik Harris

    Spartanicus Guest

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

    >>>apparently IE6 doesn't support absolute positioning

    >
    >>Sure it does.

    >
    >None of my attempts worked.


    Blame your attempts.

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

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

    --
    Spartanicus
    Spartanicus, Mar 4, 2004
    #12
  13. Erik Harris

    Mark Parnell Guest

    On Thu, 04 Mar 2004 17:54:50 -0500, Erik Harris
    <n$wsr$ader@$harrishom$.com> declared in alt.html:

    > 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; :-(

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Mar 4, 2004
    #13
  14. Erik Harris

    Erik Harris Guest

    On Thu, 04 Mar 2004 23:04:19 +0000, Spartanicus <> wrote:

    >Erik Harris <n$wsr$ader@$harrishom$.com> wrote:
    >
    >>>>apparently IE6 doesn't support absolute positioning

    >>
    >>>Sure it does.

    >>
    >>None of my attempts worked.


    >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.
    Erik Harris, Mar 5, 2004
    #14
  15. Erik Harris

    Spartanicus Guest

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

    >>>>>apparently IE6 doesn't support absolute positioning
    >>>
    >>>>Sure it does.
    >>>
    >>>None of my attempts worked.

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


    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.

    --
    Spartanicus
    Spartanicus, Mar 5, 2004
    #15
  16. Erik Harris

    Erik Harris Guest

    On Fri, 05 Mar 2004 08:09:29 +0000, Spartanicus <> wrote:

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


    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.
    Erik Harris, Mar 5, 2004
    #16
  17. Erik Harris

    Spartanicus Guest

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

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

    --
    Spartanicus
    Spartanicus, Mar 5, 2004
    #17
  18. Erik Harris

    Erik Harris Guest

    On Thu, 04 Mar 2004 17:56:58 +0000, Toby A Inkster
    <> wrote:

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


    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.
    Erik Harris, Mar 5, 2004
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. pmdvs
    Replies:
    1
    Views:
    748
    Woolly Mittens
    Oct 26, 2003
  2. Geoff Schultz

    CSS: 2 Images for background?

    Geoff Schultz, Oct 28, 2004, in forum: HTML
    Replies:
    14
    Views:
    800
    Mitja
    Oct 30, 2004
  3. Noozer
    Replies:
    5
    Views:
    52,343
  4. Adrienne Boswell
    Replies:
    1
    Views:
    507
    dorayme
    Aug 4, 2009
  5. Travis Newbury
    Replies:
    0
    Views:
    437
    Travis Newbury
    Aug 4, 2009
Loading...

Share This Page