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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Full size image on top of background

    Hey,

    So i have a background set to be full size and centers so the larger the window the more of the background you see.

    Code:
    .background {
            background: url(images/body-bg.jpg) no-repeat center top;
    }
    I want to have an image set up to act in the same way, that sits on top of every other element of the website. This image is mostly transparent, but contains a t-shirt which i want to overlap the main content box.

    How can i achieve this? Using img src in the html stretches the page and doesn't place the image over the top of the background. And i can't get it to work using CSS either.

    Any help would be appreciated! Thanks!

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Cobb,

    here is an example for you to try...
    Code:
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>two backgrounds</title>
    
    <style type="text/css">
    body {
        background-image:url(buddha.jpg),url(blood.jpg);
        background-size:50% 50%,100% 100% ;
        background-position:center center,center top;
        background-attachment:fixed,fixed;
        background-repeat:no-repeat,no-repeat;
     }
    </style>
    
    </head>
    <body>
    
    <div></div>
    
    </body>
    </html>
    
    Notice that the first background-image has the higher stacking order.

    The code will work in the browsers listed at this site...

    coothead

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    But the second image needs to be placed on top of all other elements. Won't that code still place it underneath everything else?


  •  

    Posting Permissions

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