CSS background-image Properties

By | October 15, 2020

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..!

Share and Enjoy !

0Shares
0 0

Subscribe For Latest Updates

Sign up to best of PHP Code Solutions, informed analysis and opinions on what matters to you.
Invalid email address
We promise not to spam you. You can unsubscribe at any time.

2 thoughts on “CSS background-image Properties

  1. Pingback: How to Write Comments in CSS - PHPCODER.TECH

  2. Pingback: Concept of CSS Grid Layout With Example - PHPCODER.TECH

Leave a Reply

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