Ten examples to set image by CSS background image property

Purpose of CSS background image property

The background-image property of CSS is used to set the background image of the HTML elements like div, paragraphs, headings, table headings, body etc.

You can set images with different extensions like png, jpg, gif, svg etc.

You may use one or more images to set the background of elements by CSS3, as well. For example:

Setting single image background:

 

Or use shorthand background property:

 

You may use absolute path as well:

 

Setting multiple background images:

background-image:  url (“images/image1.jpg”), url (“images/image2.jpg”), url (“images/image3.jpg”) ;

Following are demos to use CSS background-image property in different ways. I will use single and multiple, images with the transition, position and other values. You can see live demos as well with each example.

A simple example to set background image of div

A CSS class is created where the background image is used. The class is assigned to a <div> tag. See code and demo online:

See online demo and code

The following class sets the background image:

 

Setting the fallback color example

If somehow, the background image is unable to download in user’s browsers: due to internet speed, slow server or browser issue, you can set the fallback color in the background property as follows:

background: url(“images/sunset1.jpg”) #eee;

See a demo online:

See online demo and code

In the URL, a wrong image name is given for demonstration purpose. As image is not available, the background color is used instead:

 

A multiple background image demo

In this example, I used two images in the background-image CSS3 property. Along with setting background images, background position and background-repeat properties are used as follows:

See online demo and code

This is how the multiple images are set with other CSS properties:

 

The background-repeat is used to ensure that image is not repeated by using no-repeat value. While, you may set the position of both images by using different directions.

If you do not specify a position, the default will be top-left for both images.

Displaying background image with transparency or opacity

While there is no property to set transparent images set in the background by CSS, you may either use Photoshop or some other tool to make images transparent.

In CSS, one of the ways can be using the background with linear-gradient and using RGB there that allows setting the opacity.

The following example demonstrates how you can do that:

See online demo and code

 

You can see complete code in the demo page. This is CSS used to achieve background opacity in image:

 

The CSS3 property is compatible to all major browsers; however, you have to handle each separately. For instance, in Mozilla Firefox you have to use this line:

 

In the example, I used same height and width for the div, as the image is. If you have smaller image or larger div then use repeat property as below:

 

In the case of above example, the image will not be repeated and the empty space will be filled by the given RGB color.

Note that, I used the same image as used in the above example with multiple background images.

Using background image in HTML tables

You may set background images of the table elements as well by using CSS background image property. The table heading and table data images can be set separately. If you set the background image in main the <table> tag, then background image can be applied to the whole table as well.

In the following demo, I will set the background image of table headings only:

See online demo and code

Following CSS is used to create the table, particularly focus at the table header CSS:

 

You can see the complete code in the demo page.

Alternatively, you can use CSS3 properties like the gradient to create an image like look by using colors. A guide is written here.

Setting full page background image CSS example

In the following example, I will show you how you can set an image as a full-screen background for the page.

You can see the complete code and demo by clicking the link below.

See online demo and code

Setting full background image of div example

Similarly, you can use background-image with other background properties to make a tiny image to cover full container or given elements. For example, you want to use the background image for the header, footer, left navigation or other elements in a web page rather full page.

For that demo, I am using a tiny image that repeats to cover the full space of the div elements.

See online demo and code

The CSS:

 

However, before using this, consider speed issues with browser cache.

Setting the background image size

By using the background-size property with the background-image, you can set the height and width of the background image.

The syntax to use CSS background-size property is, for example:

background-size: 200px 300px;

Where first value represents the width and second specifies the height of the image.

See an example below:

See online demo and code

You may also specify the height and width in percentage. For example:

 

You should use background-repeat:no-repeat; in that case, otherwise, remaining space of the container (div in that case) will be filled by that image.

Applying transformation to background images

By using transform property with background shorthand or background-image properties, you can rotate, scales images as well.

Following are a few examples of using the transform property with background images:

A demo to rotate image by 20 degrees

See online demo and code

The CSS:

 

Similarly, you can skew, scale, and translate the background images by using transform property.

The following is an example that uses skew with x and y values:

See online demo and code

Following CSS is used to skew the image by transform property:

 

See the complete code by clicking the above image or link.

The final word

The background-image property of CSS should be used if this is part of the design and not the content. The images are small and or supposed to repeat. You can mix small images with CSS3 properties.

If your images are part of design then you should use background-image property like in header background, as full web page background, table heads etc.

If images are for the content and it has some semantic meanings then you should use the <img> tag to include images in your web page. You can use alt and title tags in <img> tag that are important for SEO purpose to convey the meanings to search engines as well.

If you want to include images if web pages are printed, by default, then you should use <img> tag.