How to add background image in css
By FoxLearn 6/13/2024 1:14:45 AM 184
Here's how add a background image in css.
body { background-image: url('your-image-url.jpg'); /* Optionally, you can add more background properties */ background-size: cover; /* Adjusts the size of the background image to cover the entire element */ background-repeat: no-repeat; /* Ensures the background image is not repeated */ }
In this example:
- url('your-image-url.jpg')
: Replace 'your-image-url.jpg'
with the path to your image file. You can use either a relative path or an absolute URL.
- background-size
: This property sets the size of the background image. In this case, cover
is used to make sure the image covers the entire background area - without stretching.
- background-repeat
: This property ensures that the background image is not repeated. It can take values like repeat
, repeat-x
, repeat-y
, and no-repeat
. In this case, no-repeat
is used to prevent repetition.
You can apply this CSS to the body
element or any other element you want to have a background image. Make sure to adjust the CSS selector according to your HTML structure and requirements.