HTML/CSS

CSS background-image Properties

The CSS background-image property used to apply the graphic or gradient to the HTML element. Graphics like JPEG, JPG, PNG GIF. There...

Written by Bikash · 1 min read >
Css Background Image Properties

The CSS background-image property used to apply the graphic or gradient to the HTML element. Graphics like JPEG, JPG, PNG GIF.

There are also two types of CSS background-image, one is the gradient image and another is a regular image.

Css Background Image Properties
CSS Background Image Properties

Syntax: CSS background-image

Setting background image on HTML <body> element.

The url() part of the background image syntax is used for setting the path of the image.

You can also set base64 encoded image URL on the same url() part of the background property.

Url pattern like that. This method can reduce HTTP requests which is a good part of this. But there are some pros and cons of this you have to check about first.

Setting Gradients as Background

This another background setting the property for any HTML element. Here is a very simple example to set a gradient on the body tag.

See the Pen CSS Background-Image Property by Bikash Panda (@phpcodertech) on CodePen.

more about linear-gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Another type of gradient property is redial gradient,

See the Pen redial-gradient by Bikash Panda (@phpcodertech) on CodePen.

Set Background Color with Image (Fallback Color)

You can set both on the element background image or any colour,

Fallback color means if your image is not loading then that color will appear in the place of that image.

Multiple background-image

If you want to set multiple background image on the single background property it possible.

Main things are, first image appears first and last is in last place. You have to manage this using repeat property.

Here is the complete explanation of CSS background-image property and all the background image property with live example.

Also Check:

Happy Coding..!

Was this article helpful?
YesNo
Written by Bikash
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH. I am a web Programmer by profession and working on more than 50 projects to date. Currently I am working on the web-based project and all the CMS and frameworks which are based on PHP. Profile

6 Replies to “CSS background-image Properties”

Leave a Reply

Your email address will not be published. Required fields are marked *