Thread Reader



Sep 23

18 tweets

CSS Backgrounds Visual Explanation. Complete Guide: Thread:šŸ§µ

šŸ‘‰ CSSĀ Backgrounds TheĀ `background-color` property specifies the background color of an element.

šŸ‘‰ CSS background-image TheĀ `background-image`Ā property specifies an image to use as the background of an element.

šŸ‘‰ CSSĀ Background Image Repeat By default, theĀ `background-image` property repeats an image both horizontally and vertically. Showing the background image only once is also specified by theĀ `background-repeat` Ā property:

šŸ‘‰ CSSĀ background-repeatĀ Property

šŸ‘‰ CSSĀ background-attachmentĀ Property TheĀ `background-attachment` property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page): CSSĀ background-attachmentĀ PropertyšŸ‘‡

Example of fixed šŸ‘‡

Example of scroll šŸ‘‡

CSSĀ background-positionĀ Property šŸ‘‰ TheĀ `background-position` property sets the starting position of a background image. Note:- By default, aĀ [background-image`is placed at the top-left corner of an element and repeated both vertically and horizontally.

Property Values of background-positionšŸ‘‡

Example of position centeršŸ‘‡

Example based on horizontal and vertical positionšŸ‘‡

Example of right centeršŸ‘‡

CSSĀ background-sizeĀ Property šŸ‘‡ TheĀ `background-size`Ā property specifies the size of the background images.

Example of length propertyšŸ‘‡

We can also use two images in background. ExamplešŸ‘‡

That's all for the time being. Please do the following if you enjoyed this thread: 1. Retweet the initial tweet. 2. Follow us and enable notifications: @codemarch Also, take a look at our JavaScript Ebook.šŸ‘‡

āœØ JavaScript for Starters: The Complete Guide āœØ āž± JavaScript Roadmap 2022 āž± JavaScript Fundamentals with Exp. āž± 50+ Programs to practice with Soln. āž± 50+ Project Ideas āž± 25+ Projects Code Grab it NOW.

Learning JavaScript is the best investment you can do today.What's Inside: šŸ‘‡Index:1. JavaScript Roadmap 20222. JavaScript Fundamentals with examples3. 50+ Programs to practice4. Learn JavaScript by...

JavaScript for Starters: The Complete Guide



We help developers to understand JavaScript & React in depth ā€¢ Web dev & design resources ā€¢ DM's are open.

Follow on Twitter

Missing some tweets in this thread? Or failed to load images or videos? You can try to .