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.
|
1 2 3 4 |
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.
|
1 2 3 |
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
This another background setting the property for any HTML element. Here is a very simple example to set a gradient on the body tag.
|
1 2 3 |
body{ background: linear-gradient(black, white); } |
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,
|
1 2 3 |
body{ background: radial-gradient(circle, black, white); } |
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.
|
1 2 3 |
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.
|
1 2 3 |
body { background: url(logo.png), url(backgroundImage.png); } |
Here is the complete explanation of CSS background-image property and all the background image property with live example.
Also Check:
- Send Mail Attachments with PHP Mail()
- Selection in CSS | CSS ::selection
- How to Integrate Google Translate on website
- Login with Google Account using PHP Step by Step
Happy Coding..!
How to Include Comments in CSS
6 Replies to “CSS background-image Properties”