...

View Full Version : 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.


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



<!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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum