Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

best way to position an image below main content?

image, positioning, css rules, below bounds



8:25 pm on Dec 1, 2009 (gmt 0)

5+ Year Member

Hi All,

I'm working on a page and I've got what I think is a clumsy way of putting a "shadow" below my main content, which is centered in the page. Essentially I've created a div in-between my wrapper div, and content div.

The CSS rule is essentially:
#wrap { background: (url/tile.png) repeat;}
#shadow {width: 1044px; margin-right: auto; background: (url/shadow.png) repeat-x bottom left;}
#main_content {width: 1024px; background: #159; margin-right: auto;}

And the HTML looks like:

<div id="wrap">
<div id="shadow">
<div id="main_content">

Don't get me wrong, this works and it's alright. But what I'm really hoping to accomplish is having an image placed with a negative margin that you _won't_ be able to scroll down to see, but is _only_ visible when the main content is smaller than the window.

I've tried searching, and got a few HTML/CSS books but couldn't exactly what I'm looking for.
Is there a better way to do this?


8:46 pm on Dec 1, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Priority #1 - Validated code prevents and fixes a lot of problems. Validate your code.

This is NOT correct and will not work;
#wrap {
background: (url/tile.png) repeat;

Correct is:
#wrap {
background: url(path-to-image/title.png)repeat;

W3C - Background Properties [w3.org]

W3C (X)HTML Validator [validator.w3.org]

W3C CSS Validator [jigsaw.w3.org]

<edit> Typ0 </edit>

[edited by: D_Blackwell at 9:04 pm (utc) on Dec. 1, 2009]


9:01 pm on Dec 1, 2009 (gmt 0)

5+ Year Member

Oh sorry, I was typing fast but it is validated XHTML strict - let me see if I can add this a bit better:

Ideally I'm looking for a shadow dropped below the main content that you cannot scroll to see. You can only see it when the main content is shorter than the window.

Something like negative margins when you do a drop shadow on an image in the content.


9:16 pm on Dec 1, 2009 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Hi, and Welcome (in case I've not said so before ;))

Pseudo code is allowed, don't apologise! :)

Do you mean a like a right/bottom shadow, and you're trying for it not to cause any scrollbars unless the actual content dictates them?


9:17 pm on Dec 1, 2009 (gmt 0)

5+ Year Member

Exactly as you say it SuzyUK.


9:48 pm on Dec 1, 2009 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

OK, what's needed is to be able to use the HTML and/or body background, I think.. but what's that #wrap div holding, is it a solid color or a patterned tile of the right side of the shadow?

and is the main content the whole window (width) or are the body and HTML elements already holding something else?

I am guessing (it's really difficult to talk images sometimes ;)) but the way I might tackle it would be to make a huge background image kind of like this


where the dots are transparent (or your actual background color) and the and == are your shadow, make it very tall, to cover the worst case scenario and at least 1044px wide, then if it's not too big as in file size1, place it as the background to the body element positioned to the bottom right or probably more accurately <bottom 0px> where the 0px can be adjusted, negatively, to make sure the right side is @1024px.

1 another way, if that image is too big is to make an image for the right side of the shadow say 20px wide and 1-10px high then repeat that down the right side of the body element at the co-ordinates <1024px 0>, this won't take into account the bottom right corner though so what I might be inclined to do is put the previous image on the HTML element then put a little "bottom right" corner as a non-repeating image on the BODY element positioned <bottom 1024px>. Then you can make the bottom part of the shadow meet this by placing a simple repeat-x shadow as the background to your footer or what ever else is at the very bottom of your page to meet the "corner"

It's really hard to explain, but hope some of these thoughts help you to see it for your purposes, I'm not sure I would go the negative margin route for this, but YMMV

Q. do you want your content 1024px wide or the content+shadow to be 1024px?


10:51 pm on Dec 1, 2009 (gmt 0)

5+ Year Member

A. 1024px wide, but I have an image 1044px on the wrapper for the right side and it creates my faux columns. It works like your option two.

I'm not sure how I could get this to work for the bottom.

Q. how do you position the image co-ordinates below the content? since it's not an absolute value like 1024px, but instead depends on the content's height.

I can place a DIV around the faux column and content DIVs, but it will cause a scrollbar to reveal the bottom shadow.


1:23 am on Dec 2, 2009 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

did you read the bit about the BODY and HTML elements?
I think I know what you've done, and it works according to you, but the way you've done it on wrapper divs is what is causing the scrollbars..

not sure negative margining will work here, but if it did the background image would still work best on the HTML/BODY elements with the bottom part of the image on the main wrapper, then pad the top and left side of the content div and negatively margin it (this is untested)

Don't get me wrong, this works and it's alright

You asked for another way, I think I provided another way, it just might take a bit of working out to fit your image. We don't do everyone's homework here you know ;)

I'm not sure how I could get this to work for the bottom.

I'm sorry I tried to explain two options, but if I wasn't clear enough, then do provide some code so we can see what you've tried, thanks

It basically is a faux column image for the right side, but until we can use a multiple background properly some creative thinking is needed. For the bottom bit add in an extra div at the bottom or use an existing footer div, pad it at the bottom and put the bottom image on it. This could also be done using a "sticky" footer possibly.

My way of thinking:
You know the width so you can position the right side properly, you don't know the height so you need it to appear at the bottom where ever that is, even with the width, the scrollbar will appear unless you put the background on the HTML or BODY element


Featured Threads

Hot Threads This Week

Hot Threads This Month