homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Trying to position an image on top of a background

Msg#: 4527469 posted 6:41 pm on Dec 12, 2012 (gmt 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-position: bottom left;



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

Thanks, Scott



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

Msg#: 4527469 posted 11:07 pm on Dec 12, 2012 (gmt 0)

does it show if you remove the body background-image?


WebmasterWorld Senior Member

Msg#: 4527469 posted 11:13 pm on Dec 12, 2012 (gmt 0)

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

<!DOCTYPE html>
<html lang="en-ca">
<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;}
<div id="container">
<div id="shadow"></div>

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.


Msg#: 4527469 posted 11:33 pm on Dec 12, 2012 (gmt 0)

@phranque - Yes!


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

Msg#: 4527469 posted 12:15 am on Dec 13, 2012 (gmt 0)

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


WebmasterWorld Senior Member 10+ Year Member

Msg#: 4527469 posted 4:55 pm on Dec 13, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved