Full size image on top of background

Cobb · 01-31-2012, 10:32 AM

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!

coothead · 01-31-2012, 02:22 PM

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...

http://caniuse.com/#search=background-size

coothead

Cobb · 01-31-2012, 02:55 PM

But the second image needs to be placed on top of all other elements. Won't that code still place it underneath everything else?