#1
  1. No Profile Picture
    .
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Posts
    296
    Rep Power
    13

    css: various background images at same time?


    has anyone got any ideas how to do this? :

    i've got an image on the background, centred at the top of the page which is fine. i also, aswell as this strip that goes accross the top, want to place various other small images, dotted arround in a haphazard fashion, also on the background.

    here's my attempt/example of what i'm talking about

    all the css is in the html

    so the bluecircle.jpg is an example of one of the images i want to dot round on the background. there's 2 problems with it.

    main problem is that the bluecircle isn't actually on the background - it's infront of the body stuff.

    also, but this is less of a problem but still would like to sort it out, i'd like to position these dotted about images relative to the centre - but not actually centred.

    possible? any help/pointers much 'preciated.
    Last edited by balance; March 28th, 2003 at 05:30 PM.
  2. #2
  3. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    25
    Something like:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>testing clickable banner</title>
    
    <style type="text/css"> 
    
    body {
    	margin-top: 0px;
    	background: transparent
    	url(http://www.pinkgoblin.com/~cumminjo/...testbanner.jpg)
    	no-repeat
    	top center
    	
    	}
    
    .bgimage1 {
     background-image:  url(http://www.pinkgoblin.com/~cumminjo/...bluecircle.jpg);
     position: absolute;
     height: 45px;
     width: 45px;
     z-index:-1;
    }
    
    p.nomargin {
    margin: 0;
    } 
    
    #Content {
    	margin:50px 0px; padding:0px;
    	text-align:center;
    	width:500px;
    	margin:0px auto;
    	text-align:left;
    	padding:0px;
    	border:1px dashed #333;
    	}
    
    </style> 
    
    </head>
    
    <body>
    <script type='text/javascript'>
    noOfItems = Math.round(Math.random() * 20)
    for (x = 0; x <= noOfItems; x++) {
    	thisTop = Math.round(Math.random() * 100)
    	thisLeft = Math.round(Math.random() * 100)
    	document.write ("<div class='bgimage1' style='position:absolute; top:" + thisTop + "%; left:" + thisLeft + "%;'></div>")
    }
    
    </script>
    <div class="bgimage1"></div>
    <div id="Content">
    
    <p class="nomargin"><a href="testbannerclick5.html"><img src="http://www.pinkgoblin.com/~cumminjo/testbanner/invisablebox.gif" width="93" height="25" alt="" /></a></p>
    
    <p>
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    </p>
    
    </div>
    </body>
    </html>
  4. #3
  5. No Profile Picture
    .
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Posts
    296
    Rep Power
    13
    yup that's great - thanks very much binky.

    the z-index was the most helpful. - which unfortunately isn't working with my usual browser which is safari, but it's a beta version so best not to take too seriously. works fine in explorer. and i suppose if the browser can't deal with it, then it just won't show it - ignores that bit, and this is for decoration so it's not the end of the world.

    you absolute-ised the urls - is that necessary/best?

    i dropped the javascript bit - surprised me once i realised what you were doing with it - very clever indeed but i want to keep it as simple as pos. i can place hardwired hapharzardly - that's not a problem.

    i also changed the way it's positioned to centre rather than % - i can make the images much wider than they look to shift them over, if you see what i mean - that way the images stay locked to the centred body, which is what i'm after. if i make them gifs, an extra wide transparent area shouldn't add much extra file size. so i just want to check that this:
    Code:
    <div class="bgimage1" style="position:absolute; top: 200px; left: center;"></div>
    is the correct syntax for that bit?

    but yes apart from it not working in safari this is pretty much exactly what i was after:
    http://www.pinkgoblin.com/~cumminjo/...imagetest.html

    i've put both images on z-index -1. and when i do this properly i'll have maybe 10 images - all on z-index -1 - is that ok?

    thanks
  6. #4
  7. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    25
    Absoluting the URLs was because I tested my theory without downloading the images.

    You can have as many images as you like on z-index -1. A thing that needs to be done however is to make your backgrounds transparent where necessary (to avoid background overlapping another image). Items on the same z-index get priority in order they are put in the code, the last item sits on top of the previous..

    Never seen the style 'left:center;' so can't comment.
  8. #5
  9. No Profile Picture
    .
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Posts
    296
    Rep Power
    13
    A thing that needs to be done however is to make your backgrounds
    transparent where necessary
    ok, will do.

    Never seen the style 'left:center;' so can't comment.
    i tried validating it, which worked fine first time, but then i realised that the validator
    had only checked the <style type="text/css"> block, so i put it in there and tried
    again and it failed - so that's why you haven't seen it before - it's made up.
    shame - seemed quite logical to me. oh well.

    thanks very much for your help
  10. #6
  11. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    25
    To place the images central you'll have to use some javascript. Calculate the screen resolution:

    screenWidth = parseInt(screen.width)

    May need parseInt() to convert from string to integer.

    then get your image width, which is 45.

    Devide both by two, so say you have a 1024 width screen, then you'll have:

    512 and 22.5.

    Minus the image width/2 from the screen width/2 and then place the image that far from the left of the screen:

    var thisLeft = parseInt(screen.width)/2 - 22.5
    document.write ("<div class='bgimage1' style='position:absolute; top:" + thisTop + "%; left:" + thisLeft + ";'></div>")
  12. #7
  13. No Profile Picture
    .
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Posts
    296
    Rep Power
    13
    ok thanks. i'm not a big fan of javascript, one reason being that i don't know it
    at all but also it does seem to complicate and add further reliance on
    browser capability, but then again this is for decoration so no big deal. so
    maybe i will give that a go.

    k. thanks v.much for your input

IMN logo majestic logo threadwatch logo seochat tools logo