CODEWITHSUNDEEP
htmlcssbackground
Jayant Bhawal
Jayant Bhawal

Reputation: 2204

CSS Background syntax issue

background: url('../city-lights.jpg') no-repeat fixed center center / cover  transparent;

How does that code work? I get that no-repeat stops the bg image from repeating, fixed means it's fixed to it's position, center center means it's centered along the x and y axes, cover means it'll cover the whole screen even if it has to stretch or shrink for it, and transparent renders it transparent.

What does the '/' do? Why's it there? In case anyone thinks, this is a perfectly legit code that works, but not written by me. Also, in case someone wonders, I did not know what to google, I tried something, it didn't give back helpful results.

Upvotes: 0

Views: 58

Answers (1)

j08691
j08691

Reputation: 207900

According to the W3 CSS Shorthand Reference:

...if you want to include the background-size value in the shorthand syntax, you need to:

  • Explicitly include background-position values even if these are the same as the defaults (see above).
  • Write background-position values before background-size values.
  • Put a slash in between these two pairs of values.

Upvotes: 3

Related Questions