RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/background-image below:

background-image · WebPlatform Docs

background-image Summary

Applies one or more background images to an element. These can be any valid CSS image, including url() paths to image files or CSS gradients.

Overview table

Initial value: none
Applies to: All elements
Inherited: No
Media: visual
Computed value: As specified, but with URIs made absolute
Animatable: Yes
CSS Object Model Property: backgroundImage
Percentages: N/A

Syntax

background-image: <image>
background-image: <image>, <image>, …
background-image: none

Values

none: Default. Color of the next parent through which the background is visible.
<image>: Any valid CSS image value, including image files through CSS images: url() or CSS gradients.
<image>, <image>, …: You can apply multiple background images to a single element (image files, gradients, or a mixture) by including all the image references in the property value, with each one separated by a comma. Images referenced earlier in the property value appear in front of images referenced later.

Examples

Three simple div elements

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Background-image example</title>
  <link href="background-image.css" type="text/css" rel="stylesheet">
</head>
<body>

  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>

</body>
</html>

The first div has a simple image file applied to it, the second div has a background gradient applied to it, and the third div has both applied simultaneously.

.one {
  background-image: url(images/icon.png);
  
  
}

.two {
  background-image: linear-gradient(to bottom, #aaa, #eee);
  
}

.three {
  background-image: url(images/icon.png), linear-gradient(to bottom, #aaa, #eee);
  
}

View live example

Usage

 Background images in general have good support across browsers; there are a few things to take note of, however:

Older browsers do not support multiple background images, SVG as background images or CSS gradients, so be careful when using these options to make sure that a fallback is provided that will make content readable on older browsers, such as a simple solid colour.
When using multiple background images, the image at the start of the comma delimited list appears on top of ones later on. This might seem contrary to how CSS is expected to behave.
Because gradients are still supported in some browsers with prefixes and some not, and some with a slightly older syntax, you should use multiple background gradient properties with different syntaxes, as shown in the below examples.

Notes

Internationalization topics related to the background-image property:

Preparing for text expansion

Related specifications

CSS 2.1: W3C Recommendation
CSS Backgrounds and Borders Module Level 3: W3C Candidate Recommendation