background-image (CSS property)

Description

This property sets the background image of an element via the specified URI. The image is placed on top of the background-color, and if the image is opaque, the background-color will not be visible beneath it. When you’re setting a background-image, also set a background-color, where possible, in case the image is unavailable. The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots). Note that Internet Explorer versions up to and including 6 don’t support transparent borders. Some area of the element in question must be visible so that the background-image can show through. If the element has no intrinsic height (either defined by its content or dimensions), the background won’t have any space in which to display. If an element contains only floated children which haven’t been cleared—see clear—again, the background won’t display, since the element’s height will be zero. By default, the background-image is placed at the top-left (background-position) of the element; it’s repeated along the x and y axes (background-repeat) and will scroll with the document. These are the default settings that apply if you haven’t explicitly set any others, and can be adjusted with the other background properties. Refer to the other relevant stuff below for methods you can use to position and control the image.

Example

This style rule assigns a background image to the element with ID "example" :

#example {
  background-image:
  ➥    url(images/bg.gif);
}

Value

A URI value specifies a location at which the image can be found. The value none ensures that no background-image will be displayed; this is the default setting, so you don’t need to define it explicitly unless you want to override previous background-image declarations. The value inherit would cause the element to inherit the background-image of its parent. This approach would not normally be taken, as the element’s inherited background image would most likely overlap the parent’s image. In most cases, the parent’s background-image will be visible through the element’s transparent background unless another background-image or background-color has been set.

Frequently Asked Questions (FAQs) about CSS Background Image

How can I set a background image to cover the entire element in CSS?

To make a background image cover the entire element, you can use the ‘background-size’ property with the value ‘cover’. This will scale the image as large as possible to fill the container, while maintaining its aspect ratio. Here’s an example:

body {
background-image: url('image.jpg');
background-size: cover;
}
This will make the image cover the entire body of the webpage.

How can I position a background image in CSS?

The ‘background-position’ property in CSS allows you to position a background image. You can specify the position in terms of percentages, pixels, or keywords like ‘top’, ‘bottom’, ‘left’, ‘right’, ‘center’. Here’s an example:

body {
background-image: url('image.jpg');
background-position: right top;
}
This will position the image at the top right corner of the body.

How can I repeat a background image in CSS?

The ‘background-repeat’ property in CSS allows you to control the repetition of a background image. The values can be ‘repeat’, ‘repeat-x’, ‘repeat-y’, or ‘no-repeat’. Here’s an example:

body {
background-image: url('image.jpg');
background-repeat: repeat-x;
}
This will repeat the image horizontally across the body.

How can I set multiple background images in CSS?

CSS allows you to set multiple background images for an element by specifying each image in the ‘background-image’ property, separated by commas. The first image in the list is the topmost layer. Here’s an example:

body {
background-image: url('image1.jpg'), url('image2.jpg');
}
This will set two background images for the body.

How can I make a background image fixed in CSS?

The ‘background-attachment’ property in CSS allows you to make a background image fixed, so it doesn’t scroll with the rest of the page. Here’s an example:

body {
background-image: url('image.jpg');
background-attachment: fixed;
}
This will make the background image fixed.

How can I set a background image from an external URL in CSS?

You can set a background image from an external URL by specifying the URL in the ‘background-image’ property. Here’s an example:

body {
background-image: url('https://example.com/image.jpg');
}
This will set the background image from the specified URL.

How can I set a fallback color for a background image in CSS?

You can set a fallback color for a background image by specifying the color in the ‘background-color’ property. This color will be displayed if the background image cannot be loaded. Here’s an example:

body {
background-image: url('image.jpg');
background-color: #f00;
}
This will set a red fallback color for the background image.

How can I blend a background image with a background color in CSS?

The ‘background-blend-mode’ property in CSS allows you to blend a background image with a background color. Here’s an example:

body {
background-image: url('image.jpg');
background-color: #f00;
background-blend-mode: multiply;
}
This will blend the background image with the red background color using the ‘multiply’ blend mode.

How can I set a background image for a specific element in CSS?

You can set a background image for a specific element by specifying the element selector before the ‘background-image’ property. Here’s an example:

#myElement {
background-image: url('image.jpg');
}
This will set the background image for the element with the id ‘myElement’.

How can I set a background image for a pseudo-element in CSS?

You can set a background image for a pseudo-element by specifying the pseudo-element selector before the ‘background-image’ property. Here’s an example:

div::before {
content: "";
background-image: url('image.jpg');
}
This will set the background image for the ‘::before’ pseudo-element of the ‘div’ element.

The above is the detailed content of background-image (CSS property). For more information, please follow other related articles on the PHP Chinese website!