Search code examples
cssbackgroundsafarishorthandcover

Multiple backgrounds in Safari

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.

Solution

  • 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;
}