SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    multiple postitioned background images

    i've got an image strip at the top of the page that acts as a title banner like so:
    Code:
    body {
    margin-top: 0px;
    background: #ffffff
    url("../images/bar.jpg")
    no-repeat
    top center
    }
    i would like, also on the background, or at least not as part of the body/content, to also have a handful of other small images dotted about in an apparent haphazard manor. so i'd like to position these small images here and there, on the background, while keeping the strip that's in the above code where it is.

    i can't see how to do it without messing up the one that's already there. how can i do this? thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure if this is what you mean but couldn't you just place the background pictures in the background of a div and then absolutely position it where you want.

    Something like this:

    Code:
    <style type="text/css" media="screen">
    <!--
    .bground1 {
     background-image:  url(image.gif);
     position: absolute;
     left: 200px;
     top: 200px;
     height: 200px;
     width: 200px;
    }
    -->
    </style>
    
    and then in the body
     
    <div class="bground1"></div>
    Of course you'd need to set up a class (or ID) for each image you want.

    Paul

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hiyer.

    thanks very much for the suggestion.

    yes that is what i was after, apart from one problem: the bg image isn't completely acting like background things do - it's interferring with things in the body. :/ is there anyway to make it not interfere? i used pretty much what you've stated above. thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you can supply a link or some code elaborating on what you want or what you've got then I'm sure someone can offer a better solution.

    Paul.

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok thanks.

    just wondering if anyone has any suggestions how to position the bluecircle image on the background along with the background image strip that's already there? at the moment the bluecircle is interfering with the body.

    both the pages are identicle, apart from the added css and div as suggested above. (all the css is in the html.)

    without bluecircle: http://www.pinkgoblin.com/~cumminjo/...nerclick3.html

    with bluecircle: http://www.pinkgoblin.com/~cumminjo/...nerclick4.html

    so what i'm hoping for is a way to put additional things on the background. any suggestions appreciated. thanks
    Last edited by johnyboy; Mar 27, 2003 at 08:15.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to make your bgimage1 position absolute not relative.(position: absolute

    If you make it absolute you remove it from the normal flow of the document so that it won't affect other content. (You will of course need to position other content so that it doesn't obscure your image.)

    Hope this helps.

    Paul

  7. #7
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh yes, i didn't realise that effected it quite like that.

    it's not behind the body though :/ sorry to pester. i would like to get it behind the body stuff somehow. possible?

    thanks for your input so far

    and there's more :/ (but less important).. if there is a way to get that image behind the body, is there anyway to also have it positioned relative to the centre, rather than relative to the left of the window? failing that just centred?

    so this is how it is now: http://www.pinkgoblin.com/~cumminjo/...nerclick5.html

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You'll need to play around with the z-index, which can set the stacking level of an element. e.g. z-index: 1; ( or z-index: 2 etc

    The higher an elements z-index the closer it is to the reader. so to put an element behind another element ensure that it has a lower z index. (I think it gets a bit more complicated with nested elements.)

    As for centering your divs there's already a thread about this near the top of the page which has some good solutions.

    Paul

  9. #9
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    z index - ok i will look into that. thanks for the advice Paul

    so i just want to check. i guess this is the case - there's no (non z index) way of putting multiple images onto the background?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by johnyboy

    so i just want to check. i guess this is the case - there's no (non z index) way of putting multiple images onto the background?
    Well if there was a way you would still have to decide which background image goes in front of which background image anyway.

    I'm sure you should be able to achieve the effects you want using the z-index but maybe someone else can offer a better solution.

    If you can't work it out let us know exactly what you are trying to achieve and maybe we can suggest something else.

    Paul

  11. #11
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    k. thanks just checking


Bookmarks

Posting Permissions

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