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

    Join Date
    Feb 2001
    Location
    Netherlands
    Posts
    7
    Rep Power
    0

    Question CSS: 2 overlapping background images


    I have 2 images, a background pattern and a logo.

    I want the background pattern to repeat over the whole page and the logo to be centered over the background.

    I don't know if this is possible though.

    Thx for any help :)
  2. #2
  3. No Profile Picture
    ,-)
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2000
    Location
    Germany
    Posts
    13
    Rep Power
    0
    ain't possible with bg-images.

    you could make the pattern with the background-tag and center the other image with an absolute positioned layer in the center of the screen (z-index:1).
    put the content in another layer (z-index:2).

    bombel
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    Netherlands
    Posts
    7
    Rep Power
    0

    Thumbs up


    Can you give me an example of how to do this?
    (I never used z-layers before)

    thx, nimr0d
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    knee deep in sh*t
    Posts
    254
    Rep Power
    65
    Nimrod,

    I am going to do my best to explain this to you. If you still have trouble, e-mail me at sschling@kaneland.org.

    If you have taken a math class that deals with "3-space", which is actually how dimensions the real world we live in is made of, the teacher should of talked about the x and y axis but with a twist: the z axis thrown in. This allowed you to get depth and 3-dimensional objects. i.e. cones, cylinders, spheres, etc.

    Enough with the math lesson (I am an old math teacher )!

    When you use the z-index attribute within a css, the image is placed a distance from your starting canvas. Sounds confusing, let me use an example.

    If you have two objects, trying to keep with your question, two images. If I start with a cork board and I want to tack the images to the board, but the board is too small, they will have to overlap. The image that is "in front" of the other is said to have a greater z-index, since it is further off the cork board.
    The image on the cork board would have a z-index of 4, while the image in front of it would have a z-index greater than 4, so 5 would work. So would 6, 10, 100, just as long as it is greater than the z-index of the bottom picture.

    Try this little code in a document and you can see what happens:
    <html>
    <head>
    <title>Testing the z-index in Style Sheets</title>
    <style type=text/css>
    <!--
    h2 { color=#ff0000; position: relative; left: 5px; top: 0px; z-index: 1}
    h1 {color=#00ff00; position: relative; left: 20px; top: -40px; z-index: -2 }
    -->
    </style>
    </head>
    <body>
    <h2>This should be on top</h2>
    <h1>This should be behind the header of size 2</h1>
    </body>
    </html>

    I hope this helps!
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    Netherlands
    Posts
    7
    Rep Power
    0

    Talking


    Thanx, it almost works now. Only have to figure out how to center the img. 50% relative or absolute places it to the rigtht.

    nimr0d
  10. #6
  11. No Profile Picture
    ,-)
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2000
    Location
    Germany
    Posts
    13
    Rep Power
    0
    the only way to center the image is to get the screen-width (height) with a java-function and pass the value to the style-attribute of the layer.
    i.e.
    layer width=200px
    screen-width=800px
    left (in css-style for layer)=(screenwidth-layerwidth/2)

    same with height.

    You should find scripts on this issue everywhere.
    percentages in layer-positioning don't work as far as I know.

    bombel

IMN logo majestic logo threadwatch logo seochat tools logo