CSS3 Backgrounds

Written By: Avinash Malhotra

Updated on

  1. Home
  2. Frontend
  3. CSS
  4. Backgrounds

CSS3 Background Properties

Since css2, we were using background images. But there were some limitation( in css2 ) that only one image can be used for a single element. Another limitation were that background images with background-repeat:no-repeat are for fixed elements only. For liquid elements like body, background images are full only if screen resolution and image size are same. But CSS3 introduced background size property to overcome this issue.

Various Background Properties

Background Property Value
Background-size auto( default), cover, contains
Background-origin border-box, padding-box, content-box
Background-clip border-box, padding-box, content-box, text
Backdrop-filter blur, brightness, contrast, grayscale
Multiple Backgrounds Add multiple background images

Background Size

CSS3 Background size property allow us to change size of background images. Default size for a background image is actual size of image. We can set Background size of image in px, %, cover and contain.

Background Size Values

PropertyvalueexpDescription
Background sizepx100px 50pxwidth of background-image is 100px an height is 50px
Background size%100% 50%width of background-image is 100% of parent element an height is 50% of parent element
Background sizecovercover autoon x axis image will cover full width, and height will be auto adjusted
Background sizecontaincontain auto scale image in x axis with same aspect ratio.

Change background-size

Background Origin

Background Origin property specify background area for background image, this could be border-box, content-box or padding-box.

Background origin will not work if background-attachment is fixed.

Background Origin Values

Property:valueDescription
border-boxbackground-image will extend till outer edge of border.
padding-box (default) background image will cover content and padding.
content-boxbackground-image will cover only content box.

Change Background Origin

Background Clip

background-clip property set from where background-color or background-image should starts, i.e border-box, padding-box or content-box.

Background Clip Values

valueDescription
border-box (default) background-color will extend till outer edge of border.
padding-box background color or image will cover content and padding.
content-boxbackground-color will cover only content box.
textbackground will cover only text.

Change background clip

Background Clip

background-clip text

background-clip text fill background image or gradient in text. It is supported in webkit based browsers only.

Background clip text 

<style>
h1{
  background: linear-gradient(180deg,red 40%,blue 60%);
  -webkit-background-clip: text;
  color: transparent;
}  
</style>

<h1>Background clip text</h1>

Backdrop Filter

Backdrop Filter property is used to add graphical effects like blurring, brightness, change colors etc in the area behind an element. Don't add background colors, images or gradients to same elements. Make sure the background is transparent to see the effect.

Caption of image

Multiple Backgrounds

Multiple backgrounds were introduced in css3. Using this property, when can add Multiple backgrounds images with color, and multiple background gradients in a single element. Hera are some examples of how to use multiple background images.

Multiple background images example

Check Multiple Background Images

            
<style>
    .box{
        background:url(x.png), url(y.png), url(z.png), #000;
    }
<style>        

<div class="box"></div>

Multiple background images with shorthand

            
<style>
    .box{
        background:url(x.png) repeat-x left top,
        url(y.png) repeat-y left top, 
        url(z.png) no-repeat center top, 
        #ccc;
    }
<style>        

<div class="box"></div>

For Old Firefox, use -webkit-, for chrome and safari, use -webkit- and for Internet explorer IE 9, use -ms- prefix.