CODEWITHSUNDEEP
cssbackgroundfallback
claronic
claronic

Reputation: 35

Fall-back color with multiple backgrounds css background property

When I use the background property like this, it works fine:

#my-element {
  background: #000000 url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed;
  color: #ff00ee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
  <div>
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
ut aliquip ex ea commodo consequat.</p>
  </div>
</body>
</html>

But when I try to use multiple images, none of the images load unless I take out the fall-back color:

#my-element {
  background: url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed, #000000 url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
  color: #ff00ee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
  <div>
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
    tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat.</p>
  </div>
</body>
</html>

Like this:

#my-element {
  background: url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed, url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
  color: #ff00ee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
  <div>
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
    tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat.</p>
  </div>
</body>
</html>

Any idea why this is? Is that just the way it is or am I doing something wrong?

Upvotes: 0

Views: 538

Answers (2)

claronic
claronic

Reputation: 35

So with Sam_'s help, I figured out that you can only have background-color specified on the second image, like this:

#my-element {
  background: url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed, #000000 url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
  color: #ff00ee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
  <div>
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
    tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat.</p>
  </div>
</body>
</html>

Thanks Sam!

Upvotes: 1

Sam_
Sam_

Reputation: 106

Try this: Remove the fallback background colour and specify it separately.

background: url("https://www.airstarkennels.com/images/m-main-background.webp") left 
bottom/cover no-repeat fixed, url("https://www.airstarkennels.com/images/main- 
background.jpg") left bottom/cover no-repeat fixed;


/*Falls back to this*/
background-color: #000000;

Upvotes: 0

Related Questions