HTML Guides for background-blend-mode
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
background-blend-mode only accepts certain keywords as values, such as normal, multiply, screen, and others.
The background-blend-mode property in CSS specifies how background images and background colors blend together. Its value must be one or more blend mode keywords defined by CSS, for example, normal, multiply, screen, overlay, etc. Using an unrecognized value will generate a validation error.
Valid values include:
- normal
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
Example of an invalid value:
/* Invalid: 'X' is not a recognized value */
background-blend-mode: X;Example of a valid value:
/* Valid: 'multiply' is a recognized blend mode */
background-blend-mode: multiply;Example HTML with correct CSS property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Blend Mode Example</title>
<style>
.blended-bg {
background-image: url('image1.jpg'), url('image2.jpg');
background-blend-mode: overlay;
}
</style>
</head>
<body>
<div class="blended-bg" style="width:200px; height:200px;">
Blended background
</div>
</body>
</html>Replace any invalid values for background-blend-mode in your CSS with one of the supported keywords.
Ready to validate your sites?
Start your free trial today.