Background image positioning difficulties

HTML & CSS
1

Hoping this one will be a doddle for one of the many CSS experts we have here.

I’ve designed myself into something of a corner by using a drop shadow on a patterned body background on this site being developed http://www.visit.turnstone-media.co.uk/ which should look like this concept design - http://visitbuxton.co.uk/new-site/

The drop shadow down to 1010px is a single image (called main-shadow-bg.jpg) without repeat used as the BG image for the Div #wrapper. To try and have the drop shadow continue past the bottom of that into the white background area I made a second wrapping div called #innerwrapper and tried to position a new dropshadow image (called horizontal-shadow.jpg) 1000px from the top of the 'innerwrapper div so that the drop shadow extends all the way to the bottom of the page. As you can see, the second drop shadow image is starting at the top instead of 1000px down the page.

Never tried to use this technique before, not sure why it’s not working, can someone point me in the right direction?

2

Hi,

The solution is pretty straight forward. :slight_smile:

Apply the repeatong horizontal shadow to the first element and the overlay to the second element.

e.g move the innerwrapper to be the first element on the page.


<body>
<div id="innerwrapper">
 <div id="wrapper">

Then change the css:


#innerwrapper {
    background-image: url(http://www.visit.turnstone-media.co.uk/templates/visit2/images/horizontal-shadow.jpg);
[B]    background-repeat: repeat-y;
    background-position: 0 0;
    width:1022px;
    margin:auto[/B]
    }

You will need to remove the bottom line from the shadow-bg-main.jpg img of course.

When the image stops at the bottom the repeating background from behind takes over.

Looks like your right column is 1px to far over to the right as the background causes a jog. It doesn’t need a background colour anyway :slight_smile:

3

Making me feel better about posting with a solution request, I couldn’t find anything when I searched but always concerned about looking like a ‘help vampire’.

If I figure it out, which I haven’t yet, I’ll post the solution.

4

Hah! Thanks Paul, I have a blind spot for stuff like that, probably why I could never solve Rubic’s cubes either.

Cheers :slight_smile:

5

Hi, background-repeat is a bit tricky.

When you specify a background position (in this case 1000px vertical), it does start down there, but since you are repeating it vertically down the y axis it will repeat up and down to fill the space, not really whaty ou are after :slight_smile:

You could rework the image to have 1000px of blank transparent space at the top of the image and then it will work.

Or you could remove the innerwrapper element, and place it on 2 empty absolutely positioned elements (positioned accordingly).

I like the first option though :). Slightly larger image file.

6

Thanks Ryan.

Yeah, wondered if it had something to do with the repeat.

If I do that presumably I can’t use repeat so I’d have to make a full size image and the point of the way I’m trying to do it now is that it will expand downwards and always be as long as the page is.

Trying this now. I never normally use positioned elements, always managed to avoid the need so far.

7

To be hoenst there probably is a better way and I know it has been said coutnless times here on how to approach this issue, though my memory is failing me (even with searches) on this subject.

Hopefully someone will come along and point out the correct solution :slight_smile:

Off Topic:

Forgot about the repeating issue witih the blank space in the image, I blame sleep deprivation :stuck_out_tongue: