Chapter 8CSS Tutorial~1 min read
CSS Backgrounds
background-color, image, repeat, size, position
CSS background properties म्हणजे elements चे background styling — color, image, position, size सगळे control करता येते.
1. background-color
Background Color
css
div { background-color: yellow; }
h1 { background-color: #FF0000; }
p { background-color: orange; }
span { background-color: rgba(147, 51, 234, 0.3); }2. background-image
Background Image
css
div {
background-image: url('banner.jpg');
/* Image default म्हणजे repeat होतो — x आणि y दोन्ही axis वर */
}3. background-repeat
Background Repeat
css
div { background-repeat: repeat; } /* Default — दोन्ही sides */
div { background-repeat: repeat-x; } /* फक्त horizontal */
div { background-repeat: repeat-y; } /* फक्त vertical */
div { background-repeat: no-repeat; } /* एकदाच दाखवतो */4. background-size
Background Size
css
div { background-size: cover; } /* पूर्ण container cover करतो — aspect ratio ठेवतो */
div { background-size: contain; } /* Image fit होईल तेवढाच — सगळी image दिसते */
div { background-size: auto; } /* Original size */
div { background-size: 100% 100%; } /* Width × Height percentage */5. background-position
Background Position
css
div {
background-image: url('banner.jpg');
background-repeat: no-repeat;
background-position: center center; /* Default: top left */
/* Values: top, bottom, left, right, center */
}6. background-attachment
Background Attachment
css
div { background-attachment: scroll; } /* Content सोबत scroll होतो */
div { background-attachment: fixed; } /* Background fixed राहतो — parallax effect */Shorthand — सगळे एकत्र
Background Shorthand
css
/* background: color attachment image repeat position */
div {
background: #0a0c12 fixed url('banner.jpg') no-repeat center top;
}✅ Key Points — लक्षात ठेवा
- ▸background-color — solid color
- ▸background-image: url() — image as background
- ▸background-repeat — repeat, no-repeat, repeat-x, repeat-y
- ▸background-size — cover (fill), contain (fit), auto
- ▸background-position — top, center, left, right, combinations
- ▸Shorthand: background: color attachment image repeat position
0/16 chapters पूर्ण