Learn
Visual Rules
Background Image
One of the most attractive ways to style a web page is by using background images. Background images cover the entire element and add a visually appealing touch to your website. There is a range of properties available in CSS to style background images.
Setting a Background Image
To set a background image, we can use the background-image
property. Here’s the syntax:
Replace 'your-image-location'
with the path of the image you want to use as the background.
Background Repeat
By default, the background image will repeat itself to fill the entire area of the element. However, you can change this property according to your requirements.
Background Position
The background-position
property is used to define where the background image should be displayed within its container. The most common ways are:
Background Size
It is also possible to adjust the size of the background image. We can use the background-size
property for this. The most common values are:
Shorthand Property
We can use the background
shorthand property to apply all background-related properties in a single line. This property has several values that must be assigned in a specific order.
Example
Here’s an example of how to use the background
shorthand property:
Instructions
Add a background image to the header element. The image should be the following address: https://static.code-hl.com/resources/css-background.png
Set the background-size
to be cover
.
Sign up to start coding
Already have an account?
Sign In