CSS background-image Properties

CSS background-image

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.

Syntax: CSS background-image

Setting background image on HTML <body> element.

body {
background: url(anyImage.jpg);
background-color: #fff;
}

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.

body{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMEAAAEFCAMAAABtknO4AAABg1BMVEX////);
}

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

body{
background: linear-gradient(black, white);
}

Another type of gradient property is redial gradient,

body{
background: radial-gradient(circle, black, white);
}

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.

body {
background: url(myImage.jpg) blue;
}

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.

body {
background: url(logo.png), url(backgroundImage.png);
}

Content taken from PHPCODER.TECH. we will like to thank you PHPCODER.TECH for this.

Please Post Your Comments & Reviews

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