Thread by @Vanshsh2701

14/7/2021
📌📌 CSS Background Properties 📌📌
In this 🧵 we are going to discuss:

▶️ background-color
▶️ background-image
▶️ background-position
▶️ background-size
▶️ background-repeat
▶️ background-origin
▶️ background-clip
▶️ background-attachment

#DEVCommunity
#CSS3

1⃣ background-color: The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

2⃣ background-image: The background-image property sets one or more background images for an element.

Values: URL | none | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient

3⃣ background-position: The background-position property sets the starting position of a background image.

4⃣ background-size: he background-size property specifies the size of the background images.

values: auto | cover | contain | length

5⃣ background-repeat: The background-repeat property sets if/how a background image will be repeated.

Values: repeat | repeat-x | repeat-y | no-repeat

6⃣ background-origin: The background-origin property specifies the origin position (the background positioning area) of a background image.

Values: padding-box | content-box | border-box

7⃣ background-clip: The background-clip property defines how far the background (color or image) should extend within an element.

Values: border-box | padding-box | content-box |

8⃣ background-attachment: The background-attachment property sets whether a background image scrolls with the rest of the page or is fixed.

Values: scroll | fixed | local |

⚠️ ⚠️ Shorthand for background

9⃣ background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment

▶️▶️▶️ If you learnt from this 🧵

- Do LIKE/RETWEET ♥️
- Follow @Vanshsh2701 for more threads like this