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
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH, my native place in Odisha. I am a Web Programmer by profession and working on more than 50 projects to date. My passion is working on the web-based project using PHP and relate to all CMS and frameworks which is based on PHP.
Posts created 175

5 thoughts on “CSS background-image Properties

Leave a Reply

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

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
mariobet - supertotobet - escort -

takip7.com

- milanobet giriş - gizabet giriş -
perabet giriş
- betkanyon giriş -

jojobet giriş

We are now accepting guest posting and creation of back-links.
This is default text for notification bar