Position background images

[nickburrett]

Hello

I am trying to get the background image images/home-middle.png to appear 186 pixels below images/home-top.png and failing!

.home-content { background-image: url(images/home-top.png), url(images/home-middle.png); background-repeat: no-repeat, repeat-y; background-position: 0px 0px, 0px 186px; width: 321px; height: 400px; }

In this example images/home-middle.png seems to start 0px from the top rather than 186px from the top.

www.burrett.net/cssissues/cssissues.html

Can you help me?

[D34th Maker]

Originally Posted by nickburrett

Hello

I am trying to get the background image images/home-middle.png to appear 186 pixels below images/home-top.png and failing!

.home-content { background-image: url(images/home-top.png), url(images/home-middle.png); background-repeat: no-repeat, repeat-y; background-position: 0px 0px, 0px 186px; width: 321px; height: 400px; }

In this example images/home-middle.png seems to start 0px from the top rather than 186px from the top.

www.burrett.net/cssissues/cssissues.html

Can you help me?

i would suggest doing this istead cause with that it looks a bit way to messy.

CSS

.home-top {      background: no-repeat;
                 position: absolute;
                 left: 0px; top: 0px;
                }
.home-middle {       background-repeat: repeat-y;
                     position: absolute;
                     left: 0px; top: 186px;
                    }

HTML coding for the CSS only. (meaning not the whole entire html code just the part that is gonna be affected by the css)

<img src="images/home-top.png" class="home-top">
<img src="images/home-middle.png" class="home-middle">

Hope this helps and if not just say so and ill try to help you further.

[nickburrett]

Sorry, I forgot to add... I need to add some content to the div.

<div class="home-content">This is where the text goes!</div>

[Excavator]

Hello nickburrett,
That seems to work fine in FF10. You know that putting two backgrounds on one element is a CSS3 thing and not widely supported? What browser are you testing in?

[nickburrett]

Safari

[nickburrett]

I've just tested in Firebox too but I am still seeing home-top behind home-middle.

If you can see any colour behind the rounded corners then it's not doing what it should be doing

[Excavator]

Yes, even though you specify 186px down, repeating it on the y axis makes it repeat the entire height. It does not start at that 186px point and repeat down from there like you're thinking.

[nickburrett]

Can anyone suggest a workaround?