Scribd
Upload
14 views3 pages

CSS Background Properties

The document provides an overview of CSS background properties, including background-color, background-image, background-repeat, background-position, background-attachment, and background-size. Each property is explained with examples demonstrating how to set colors, images, repetition, positioning, attachment behavior, and sizing of background images. It serves as a guide for effectively utilizing these properties in web design.

Uploaded by

krishna1kunal239
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views3 pages

CSS Background Properties

The document provides an overview of CSS background properties, including background-color, background-image, background-repeat, background-position, background-attachment, and background-size. Each property is explained with examples demonstrating how to set colors, images, repetition, positioning, attachment behavior, and sizing of background images. It serves as a guide for effectively utilizing these properties in web design.

Uploaded by

krishna1kunal239
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Background Properties in CSS

 background-color
ex - background-color: red;
background-color: #0000ff;
background-color: rgb(0, 255, 0);
background-color: rgba(0, 255, 0, 0.5); // here a stands for alpha where
0 stands for transparent and 1 stands for no transparent
background-color: transparent;
 background-image
.element {
background-image: url(‘example.jpg’);
}
.element {
background-image: url('');
}
 background-repeat
repeat | repeat-x | repeat-y | no-repeat
 repeat == The background image is repeated both vertically
and horizontally.
 The repeat-x keyword limits tiling tothe horizontal or x-
axis.
 repeat-y keyword limits tiling tothe vertical or y-axis.
 The no-repeat keyword turns offtiling altogether. The
image will be shown once.
 background-position
The background-position property,as its name implies, allows
you to control the placement of the background.
It takes either one or two values, representing the horizontal and
vertical positions, respectively.

Ex –
background-position: left top:
background-position: left center;
background-position: center center;
background-position: left bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: 25% 75%;
background-position: 25px 75px;

 background-attachment
use the background-attachment property to control whether a
background image scrolls or fixed with the content of a web page.

background-attachment: fixed;
background-attachment: scroll;

 background-size
The background-size property specifies the size of the background
images.
 background-size: auto;
Default value. The background image is displayed in its original
size.
 background-size:length;
Sets the width and height of the background image. The first
value sets the width, the second value sets the height. If only
one value is given, the second is set to "auto".

background-size: 30px 50px;


 background-size: cover;
Scales the background image to cover the entire container,
while maintaining its aspect ratio.

 background-size: contain;
Resize the background image to make sure the image is fully
visible.

You might also like