Welcome to WebmasterWorld Guest from 54.196.244.45

Forum Moderators: not2easy

Message Too Old, No Replies

Trying to position an image on top of a background

     
6:41 pm on Dec 12, 2012 (gmt 0)

Junior Member

joined:Feb 23, 2012
posts: 91
votes: 0


I have a background on my page and I want to position another on top of that. Here is my style/script.

<style type="text/css">

<!--
body {

background-image:url('style/bgtktsearch.jpg'); background-position:center top;

background-repeat: no-repeat;
}

image {
background-image: url('style/bgmanmglass.png');
background-repeat:no-repeat;
background-position: bottom left;


}

-->
</style>

I see my background, but the other image doesnít show. What Ďam I doing wrong?

Thanks, Scott
11:07 pm on Dec 12, 2012 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10542
votes: 8


does it show if you remove the body background-image?
11:13 pm on Dec 12, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:June 14, 2010
posts:985
votes: 0


There are various ways to accomplish it, here's one way...

<!DOCTYPE html>
<html lang="en-ca">
<head>
<style type="text/css">
#container{background:url(style/bgtktsearch.jpg) top no-repeat; height:20em; margin:0 auto 0; width:40em;}
#shadow{background:url(style/bgmanmglass.png) no-repeat; height:10em; position:relative; top:9em; left:3em; width:15em;}
</style>
</head>
<body>
<div id="container">
<div id="shadow"></div>
</div>
</body>
</html>

And needless to say make sure your images are in proper folder because the style directory is confusing, I would be looking for an "img" directory, but that's minor as long as your images are actually there.
11:33 pm on Dec 12, 2012 (gmt 0)

Junior Member

joined:Feb 23, 2012
posts: 91
votes: 0


@phranque - Yes!
12:15 am on Dec 13, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12689
votes: 243


What's the relevant html? Is everything in the same directory? Any change if your image URLs are both changed to site-absolute links? (These won't work locally. If you haven't already got a pseudo-server like WAMP/MAMP, install one. It's easy.)
4:55 pm on Dec 13, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


As long as you can live with no support on older versions of IE, it would seem to me that simply using multiple background images would be simplest (note that the stacking order is from top to bottom):

body { background: url('style/bgmanmglass.png') bottom left no-repeat,
url('style/bgtktsearch.jpg') center top no-repeat; }

You'll have to use an inline conditional <!--[if lt IE9]> to provide styles for IE<9, but I have hopes that since IE8 is down to about 12% the trend is to finally ignore them unless its an issue of usability.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members