How to use 2 background images in one DIV?

HTML & CSS
1

Helloa,

I almost finished my website everything is easy. But i have this problem i am trying to add 2 background images to archieve this look:

http://www.balkaneros.nl/demo/this.png

Current site:
http://balkaneros.nl/demo/

Thanks in advance again :)))))))

@PaulOB @ralphm

2

Just place it as a background image on .wpa-middle-slogan and place it like 30 pixels from the bottom. Report back if you have any issues.

CSS3 multiple background images isn’t supported in IE8 so if you did want to add in support for that, create another container element inside of .wpa-middle-slogan and have that element hold the image.

3

As mentioned by Ryan if you want two images and want to support IE8 then simply nest two containers and apply the image to each.

I would create the arrow image and line as an over sized image wider than any monitor (say about 2500px) and it will still only be about 2k.

Here is it added to one of my sticky footer pages.

4

The arrow image would be perfect for SVG, rather than a giant image with loads of transparent pixels and probably relying on scaling algorithms to avoid an ugly pixilated look. Again, IE8 doesn’t support SVG though.

I suppose one of these tricks could be considered:

5

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