Ghostly wedding dress is not stacking infront of the background image :-(

HTML & CSS
1

Hi from

Ive been battling unsuccessfully to get the wedding dress image to look like its stacked on top of the background image but it looks washed out and transparent. This link illustrates my pain:

611×579 73.6 KB

Now i know the background image is jinxed but its just there for illustration but why is the dress image at CSS line 338 faded. Is it somehow conflicting 334 CSS line of the other image. Code pen below for reference.
http://codepen.io/Pingbat/pen/xbBQqE

Any insights welcome :slight_smile:

2

It’s faded because it’s the background image for the body, and all background image for #imagewrap is sitting on top, but must be light enough for the dress to come through…

3

Try putting both images in the same element, either body or imagewrap:

body    {
                background: url(http://i216.photobucket.com/albums/cc53/zymurgy_bucket/bride-groom-abbey-1000_zpsyjfhjqgv.png),
                url(http://i216.photobucket.com/albums/cc53/zymurgy_bucket/wedding-dress-200-346-3_zpsnkxbo5un.jpg)  no-repeat top left;
            }

or put the dress in a child element of the one with the main background.

4

Thanks Dave, ive since ditched the dress and replaced with rose petals which i prefer :slight_smile:

5

Nice one Sam, this worked :slight_smile:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.