CSS background-attachment is used to define whether an HTML image used as a background is fixed or scroll within the block. CSS background image will give the image as a background with the block.
The syntax for CSS background-attachment is:
|
1 |
background-attachment: enter its selected value; |
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-attachment syntax</title> <style> .div-attachment{ background-image:url(../../images/nature.jpg); background-attachment:fixed; min-height:200px; } </style> </head> <body> <div class="div-attachment"> <p>This is the HTML paragraph inside the div. The div contains some background image. This background image has fixed attachment.</p> </div> </body> </html> |
Output
CSS background-attachment values list
The values and description of this property is used to specify the background-attachment inside web document. You should also see CSS background-attachment.
| Sr. No. | value | Description |
|---|---|---|
| 1 | fixed | Used to make background image fixed with the block. |
| 2 | scroll | Used to make background image fixed with the block and will not scoll. |
| 3 | local | Used to give color name. The value for this can be red, blue etc. |
| 4 | transparent | Used to make a transparent color of an HTML element content. The value for this is transparent. |
| 5 | initial | Used to define as the property initial value. |
| 6 | inherit | Used to define the computed value of property on the elements parent. |
| 7 | unset | Used to set all the properties to their parent value if inheritable. |
scroll CSS background-attachemnt
In this example we will use CSS 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-attachment syntax</title> <style> .div-attachment{ background-image:url(../../images/nature.jpg); background-attachment:scroll; min-height:200px; } </style> </head> <body> <div class="div-attachment"> <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