CSS backgrounds define the background colors and images of HTML elements. They allow you to use different colors, gradients, or images behind the content. In this chapter, we will learn about various CSS background properties, including how to set background colors, apply images, adjust their size and position, control repetition, and more.
CSS Backgrounds Example
The following section shows an example of setting color, image, and gradient for an HTML element.
Background: None
Background: Color
Background: Gradient
Background: Image
Try Different Background Options
CSS Background Shorthand Property
The background shorthand property allows you to specify all background properties in a single declaration.
The correct order of properties when using the shorthand background property is as follows:
background-colorbackground-imagebackground-positionbackground-size(must be used with /)background-repeatbackground-originbackground-attachmentbackground-clip
Syntax
The syntax for the background property is as follows:
background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;/* Example */background: green url('image.jpg') top/20% no-repeat border-box content-box fixed;
Note: If background-size is to be added, it must be included immediately after the background-position, separated with ‘/’. For example: “left/50%”.
Setting Background Color
You can set the background color for elements like div, span, body, paragraph, etc using the background-color property.
Example
In this example, we have used three different types of color values for body and div tags. For a complete reference of color in CSS, check out the CSS colors chapter.
<!DOCTYPE html><html><head><style>body { background-color: lightgray; } div{ padding: 25px; } .firstDiv{ background-color: rgb(255, 215, 0); } .secondDiv{ background-color: #f0f0f0; } .thirdDiv{ background-color: hsl(120, 100%, 75%); } </style></head><body><h2>CSS Background Colors</h2> Body Color: lightgray; <br><br><div class="firstDiv"> Color: rgb(255, 215, 0) </div><br><div class="secondDiv"> Color: #f0f0f0</div><br><div class="thirdDiv"> Color: hsl(120, 100%, 75%)</div></body></html></pre>Setting Images in Background
To set an image as background for another element such as div, span, body, paragraph, etc., you can use the background-image property. It can be used to set one or more than one image as the background. To set multiple images as background, we separate the images using commas.
Example
In this example, we have set a background image for the body element.
<!DOCTYPE html><html lang="en"><head><style>div{ background-color: rgba(255, 255, 255); opacity: 70%; padding: 20px; } body { background-image: url(/css/images/logo.png); height: 350px; } </style></head><body><div><h1>Welcome to My Website</h1><p> This is an example of setting a background image using CSS </p></div></body></html></pre>Define Background Position
The background-position property sets the initial position of the element's background image. The position of the image is relative to the value set by the background-origin property.
Example
In this example, we have set the position of the background image to the right of the div element using the background-position property.
<!DOCTYPE html><html><head><style>.position-right { background-image: url('/css/images/logo.png'); background-position: right; background-repeat: no-repeat; width: 100%; height: 300px; border: 3px solid black; position: relative; } </style></head><body><div class="position-right"></div></body></html></pre>Setting Background Size
To set the size of the background image of an element, you can use the background-size property. The background image can either be stretched, constrained, or left to its normal size.
Example
In this example, we have set the size of the background image to 100% of the div element using the background-size property.
<!DOCTYPE html><html><head><style>.size-contain { background-image: url('/css/images/pink-flower.jpg'); background-size: contain; width: 300px; height: 300px; } </style></head><body><h2>CSS background-size property</h2><div class="size-contain"></div></body></html></pre>Repeating Background Image
You can control the repetition of the background images using the background-repeat property. The image can be repeated along the horizontal and vertical axes, or not repeated.
Example
In this example, we have used the background-repeat property to repeat the background image horizontally and vertically.
<!DOCTYPE html><html><head><style>.repeat { background-image: url('/css/images/logo.png'); background-repeat: repeat; width: 800px; height: 400px; position: relative; } </style></head><body><h2> CSS background-repeat property </h2><div class="repeat"></div></body></html></pre>Defining Background Origin
CSS background-origin property is used to set the origin of the background, which could be from the start of the border, inside the border, or inside the padding.
Example
In this example, we have used the background-origin property to set the origin of the background image to the content box of the div element.
<!DOCTYPE html><html><head><style>div { border: 10px rgb(13, 7, 190); border-style: dashed; margin: 5px; padding: 1cm; font: 700 1em sans-serif; color: aliceblue; display: inline-block; background-image: url('/css/images/yellow-flower.jpg'); height: 200px; width: 200px; background-size: contain; }.content-box { background-origin: content-box; } </style></head><body><div class="content-box"></div><p> This image background start from content box of div element. </p></body></html></pre>Controlling Background Scrolling
You can use the background-attachment property to determine whether the position of the background image is fixed within the viewport or scrolls within its container.
Example
In this example, we have used the background-attachment property to set the background image to be fixed within the viewport.
<!DOCTYPE html><html><head><style>.fixed { background-image: url('images/logo.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: left top; background-color: lightblue; background-size: 40% 30%; padding: 5rem; width: 250px; height: 500px; } </style></head><body><h2>CSS background-attachment Property</h2><div class="fixed"><p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p></div></body></html></pre>Controlling Background Display
You can use CSS background-clip property to specify how the background image or color should be displayed within an element's padding box, border box, or content box. It determines the area of an element to which the background will be applied.
Example
In this example, we have used the background-clip property to apply the background to the content and padding area of the div element.
<!DOCTYPE html><html><head><style>p { border: 10px dotted black; padding: 15px; background: green; color: white; }.border-area { background-clip: border-box; } .padding-area { background-clip: padding-box; } </style></head><body><h2>CSS background-clip property</h2><p class="border-area"> Background applied to the entire element. </p><p class="padding-area"> Background applied to the content & padding area. </p></body></html></pre>CSS Background Properties
All the properties related to background are listed in the table below:
Property Description Example background Shorthand for background-related properties. Try It background-attachment Specifies the position of the background relative to the viewport, either fixed or scrollable. Try It background-clip Controls how far a background image extends beyond the element's padding or content box. Try It background-color Sets the background color of an element. Try It background-image Sets one or more background image(s) on an element. Try It background-origin Sets the origin of the background. Try It background-position Sets the initial position of each image in a background. Try It background-position-x Sets the initial horizontal position of each image in a background. Try It background-position-y Sets the initial vertical position of each image in a background. Try It background-repeat Controls the repetition of an image in the background. Try It background-size Controls the size of the background image. Try It background-blend-mode Determines how an element's background images blend with each other. Try It
Leave a Reply