Hello everybody,
I’m stuck on something and I’m in need of some help from the community. I’m working on this website: CLICK.
I gave #header three backgrounds with the following CSS:
background-image: url('images/inverted-rounded-corner-left.png'), url('images/inverted-rounded-corner-right.png'), url('images/header-bg.jpg');
background-position: bottom left -8px, bottom left 330px, center right;
background-repeat: no-repeat;
background-clip: border-box;
border-left: 8px solid transparent;
}
This allows me to position three seperate background images for #header, and this works perfectly for Firefox 23.0.1 and Chrome 28.0.1500.71. On Safari 6.0.5. not so much. With the code above, Safari manages to pick the last given background, doesn’t recognise the background position, but listens to no-repeat.
I’ve tried to pack it all up in one line of code, like background: url('url/to/image') bottom left no-repeat, background: url('url/to/image') top right no-repeat, background: url('url/to/image') center left no-repeat;
In this form, Safari doesn’t recognise it at all and you’ll end up with no background image at all.
What am I missing? I’d really appreciate some help here :) Thanks in advance.
