0

This code works for me in Chrome & FF but for some reason not in Safari. Safari should support it though. Safari reports there's something wrong with the syntax. This is probably true but I just can't seem to figure it out.

.frontpage {
background: url(logo.png) no-repeat center center / 50% auto,
            url(background.png) no-repeat center center / cover;
}

I need the background.png to act as a cover and fill the whole background of the page while the logo should be centered and have a width of 50% & height auto.

sarukuku
  • 3
  • 5

1 Answers1

0

set background-size appart, to avoid this kind of failure with browsrers that are not yet old but not up to date anymore :)

edit 

.frontpage {
background: url(logo.png) no-repeat center center,
            url(background.png) no-repeat center center;
background-size: 50% auto,
            cover;
}
Hemerson Varela
  • 24,034
  • 16
  • 68
  • 69
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • How do I make the background-size: cover to affect only the background.png and not the logo.png while still having two backgrounds stacking on top of each other? If I just separate it and add it below both of the images start using the cover mode which ruins the logo stretching it like the background. – sarukuku Jul 02 '13 at 15:16
  • Great, that worked! Didn't know at all about the fact that you can use the comma separated list in each of the different background properties individually. Thanks! – sarukuku Jul 02 '13 at 15:28