Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Apr 2003
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple backgrounds

    Hi,

    Simply put, I am looking for a way in CSS to for example place one image fixed to the leftcenter of a div, and another image on the rightcenter of the same div. Is this possible without all kinds of hacks in the html? I've been looking for it but wasn't succesful in finding any..

    Thanks

  • #2
    New Coder
    Join Date
    Apr 2003
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In that case... anyone know a way to do this with hacks?
    Quite a bummer, I thought CSS would support this on its own :'(

  • #3
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Only way is to have 2 divs with different backgrounds.

  • #4
    New Coder
    Join Date
    Jan 2004
    Location
    South Midlands
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    From what I've learned on CF, you can have two fixed backgrounds on NS (?and mozilla?) but not on IE. On IE, you can only attach a fixed background to the body through css.

    Code:
    body {background-image: url(image.jpg);
                background-attachment: fixed;}
    However, I'm having my own css background-nightmare at the moment, so my advice may not be worth its weight in bytes.
    And is our future wounded by Philosophies our daddies had?
    - - Alisha's Attic - -

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    maybe you could make another div and set it to the same width, height, position as the first and then put nothing in it (except for   so it shows....) and set a background.
    You might need javascript to set the width, height, position if theses values vary...
    Shawn

  • #6
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    why not just use two <div>s as somebody already suggested? the extra markup is minimal..

  • #7
    New Coder
    Join Date
    Jan 2004
    Location
    South Midlands
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just reread my post, and for the sake of pedants (me), I'll amend my words:
    you can only attach a fixed background to the body through css.
    You can attach a fixed (non-scrolling) background only to the background.

    Just reread your original post, and it seems you're asking for one div, with two sub-divisions with fixed images? Is there any reason you can't just have a larger image with "sub-picture1.jpg" on the left and "sub-picture2.jpg" on the right, divided by a blank space? You could then fix it within the div, or even on the body element of your stylesheet.

    If I misread that, and only one of the images is fixed, then you could place the fixed image absolutely by attaching it to the body element (works in IE, remember?) and then place the scrollable image as an attachment to the relevant div.

    If I'm barking up all the wrong trees, let me know and I'll rethink.
    And is our future wounded by Philosophies our daddies had?
    - - Alisha's Attic - -

  • #8
    New Coder
    Join Date
    Jan 2004
    Location
    South Midlands
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...you can only attach a fixed background to the body through css... You can attach a fixed (non-scrolling) background only to the background
    I'll get it right in a minute: You can attach a fixed (non-scrolling) background only to the body element in IE.

    Retiring, hugely embarrassed, from roars of laughter...
    And is our future wounded by Philosophies our daddies had?
    - - Alisha's Attic - -

  • #9
    New Coder
    Join Date
    Apr 2003
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about my late reply

    @ coderseth&nightfire:
    Right now I have did it with an extra div which is containing the second image as you already suggested here. My problem with it is that for as far I know making an extra div just for layout is.. wrong.. So I prefer to do it without.. Well maybe CSS4

    @ gabrielle:

    Well what I am trying to do is to add a special effect to my div, kind of an inner shadow, with a part again the left border, and a part which always sticks to the bottom of the div. The length of the div is variable so one big pic with both shadows is no option.

    @ all.. Sorry about my bad use of fixed. I just meant it should be stuck on the left of the div, not stuck at the same place of the viewport. My bad

  • #10
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    about "wrong" markup, i think you have to remember too that CSS and HTML are tools and part of making a web page is designing it. if you're using valid markup and CSS, i don't see anything wrong with some extra markup here and there to achieve desired effects that current specs for CSS do not allow.

    don't live and die by a purists mind set. the world does not operate on ideals, so it's okay to abandon them occasionally.

  • #11
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    Check the coding at http://csszengarden.com. The bottom right background image is positioned there while the top left is a left is a left floated div with no margins containing a background. They're not fixed, but I hope it gives you some ideas.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •