CSS background-image is used to define HTML image used as a background for the block. CSS background image can be used for the background. This image can be any format like jpg, png etc. You should also see CSS background-attachment.
The syntax for background-image is:
|
1 |
background-image: url(enter the image location here); |
For Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>CSS background-image syntax</title> <style> .div-bg-img{ background-image:url(../../images/nature.jpg); background-attachment:fixed; min-height:200px; } </style> </head> <body> <div class="div-bg-img"> <p>This is the HTML paragraph inside the div. The div contains some background image. This background image has fixed attachment. The background showing the nature image.</p> </div> </body> </html> |
Output
This is the HTML paragraph inside the div. The div contains some background image. This background image has fixed attachment. The background showing the nature image.
CSS background-image values list
The values and description of this property is used to specify the background image inside web document. You should also see CSS background-attachment.
| Sr. No. | value | Description |
|---|---|---|
| 1 | url(image url location) | Used to make background image. The value for this is the location of the image. |
| 2 | none | Used to make no background image. |
| 3 | initial | Used to define as the property initial value. |
| 4 | inherit | Used to define the computed value of property on the elements parent. |
| 5 | unset | Used to set all the properties to their parent value if inheritable. |
CSS background-image with scroll attachment
In this example we will use background-image with scroll CSS background-attachement.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>CSS background-image syntax</title> <style> .div-img{ background-image:url(../../images/nature.jpg); background-attachment:scroll; min-height:200px; } </style> </head> <body> <div class="div-img"> <p>This is the HTML paragraph inside the div. The div contains some background image. This background image has scroll attachment.</p> </div> </body> </html> |
Output
This is the HTML paragraph inside the div. The div contains some background image. This background image has scroll attachment.