Background and blend modes Flashcards
What does background-image CSS property do?
The background-image property in CSS is used to set one or more background images for an element. It allows you to specify an image file (usually in formats like JPEG, PNG, GIF, or SVG) to be displayed as the background of the specified element. The images are layered on top of each other, with the first image in the list displayed on top and the last image at the bottom.
“background-image - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 4, 2023.
What is the syntax of the background-image CSS property?
Each background image is specified either as the keyword none or as an <image> value.
To specify multiple background images, supply multiple values, separated by a comma:
background-image: linear-gradient(
to bottom,
rgba(255, 255, 0, 0.5),
rgba(0, 0, 255, 0.5)
), url("catfront.png");
/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;
Valuesnone - Is a keyword denoting the absence of images.
<image> - Is an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.
“background-image - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 4, 2023.
What does background-position CSS property do?
The background-position CSS property is used to specify the initial position of a background image within an element. It determines how the image is aligned within the element, either using keywords, percentages, or length values to define the position.
“background-position - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 4, 2023.
What is the syntax of the background-position CSS property?
The background-position property can accept one or two values:
-
One value: This value sets the horizontal position (
left,center, orright) or the vertical position (top,center, orbottom) of the background image. If only one value is provided, the other axis defaults tocenter. -
Two values: The first value sets the horizontal position (
left,center,right, or a specific length/percentage), and the second value sets the vertical position (top,center,bottom, or a specific length/percentage).
Here’s the syntax for the background-position property:
background-position: value1 value2;
Examples:
1.- Using keywords:
/* Position the background image at the center horizontally and top vertically */
div {
background-position: center top;
}
2.- Using percentages:
/* Position the background image 50% from the left edge and 25% from the top edge */
div {
background-position: 50% 25%;
}
3.- Using length values:
/* Position the background image 20px from the left edge and 10px from the top edge */
div {
background-position: 20px 10px;
}
“background-position - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 4, 2023.
What does the background-size CSS property do?
The background-size CSS property is used to specify the size of a background image within an element. It allows you to control how the image is scaled and stretched to fit the element, either using keywords, percentages, or length values to define the dimensions.
Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency
To specify the size of multiple background images, separate the value for each one with a comma.
“background-size - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 4, 2023.
What is the syntax of the background-size CSS property do?
The background-size property can accept one or two values:
- One value: This value sets the width of the background image. The height is then automatically calculated to maintain the image’s aspect ratio. If the value is a keyword, it applies to both width and height.
- Two values: The first value sets the width, and the second value sets the height of the background image. Providing specific dimensions can distort the image if the aspect ratio is not maintained.
Keywords available for background-size:
-
auto: The image maintains its original size (default). -
cover: Scales the image, maintaining its aspect ratio, to cover the entire element. One dimension may be cropped if the aspect ratios of the element and the image differ. -
contain: Scales the image, maintaining its aspect ratio, to fit within the element. Empty space may be visible if the aspect ratios of the element and the image differ.
Here’s the syntax for the background-size property:
background-size: value1 value2;
Examples:
1.- Using keywords:
/* Scale the background image to cover the entire element */ background-size: cover;
2.- Using percentages:
/* Scale the background image to be 50% of the element's width and 100% of its height */ background-size: 50% 100%;
3.- Using length values:
/* Set the background image width to 200px and height to 100px */ background-size: 200px 100px;
4.- Using one-value syntax
/* Set the background image width to 50% (height becomes 'auto') */ background-size: 50%;
5.- Setting the size of multiple backgrounds (comma separated)
/* Multiple backgrounds */ background-size: auto, auto; /* Not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain;
“background-size - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 4, 2023.
What does background-repeat CSS property do?
The background-repeat property in CSS is used to control the repeating behavior of a background image within an element. By default, background images are tiled (repeated) both horizontally and vertically to fill the entire element.
“background-repeat - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What is the syntax of the background-repeat CSS property?
The background-repeat property allows you to modify this behavior by specifying whether the image should be repeated, and in which direction(s).
The property accepts the following values:
-
repeat: The default value. The background image is repeated both horizontally and vertically. -
repeat-x: The background image is repeated only horizontally. -
repeat-y: The background image is repeated only vertically. -
no-repeat: The background image is not repeated, and it will be displayed only once, covering the area according to thebackground-sizeproperty.
Example:
div {
background-image: url('path/to/your/image.png');
background-repeat: no-repeat;
}
In this example, the background image will be displayed once, without repeating, within the specified div element.
“background-repeat - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What does the background-origin CSS property do?
The background-origin CSS property is used to determine the background positioning area, which is the area within an element where the background image is positioned and/or clipped. This property works together with other background-related properties such as background-position, background-clip, and background-size.
“background-origin - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What is the syntax of the background-origin CSS property do?
The background-origin property accepts the following values:
-
padding-box(default): The background position is relative to the element’s padding box. The background image will be placed within the padding box, and it will be clipped if it extends beyond the padding. -
border-box: The background position is relative to the element’s border box. The background image will be placed within the border box, and it will be clipped if it extends beyond the border. -
content-box: The background position is relative to the element’s content box. The background image will be placed within the content box, and it will be clipped if it extends beyond the content.
Example:
div {
background-image: url('path/to/your/image.png');
background-origin: content-box;
}
In this example, the background image will be positioned within the content box of the specified div element, and it will be clipped if it extends beyond the content box.
“background-origin - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What does the background-clip CSS property do?
The background-clip CSS property is used to determine the area within an element where the background image, color, or both, will be clipped or trimmed. In other words, it defines the area beyond which the background will not be visible. This property works in conjunction with other background-related properties, such as background-origin and background-position.
“background-clip - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What is the syntax of the background-clip CSS property do?
The background-clip property accepts the following values:
-
border-box(default): The background is clipped to the element’s border box. The background image and/or color will be visible up to the border edges. -
padding-box: The background is clipped to the element’s padding box. The background image and/or color will be visible up to the padding edges but won’t be visible in the border area. -
content-box: The background is clipped to the element’s content box. The background image and/or color will be visible only within the content area, not extending to the padding or border areas.
Example:
div {
background-image: url('path/to/your/image.png');
background-color: lightblue;
background-clip: padding-box;
}
In this example, both the background image and the light blue background color will be clipped to the padding box of the specified div element. They will not extend to the border area.
“background-clip - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What does the background-attachment CSS property do?
The background-attachment CSS property is used to determine whether a background image should scroll along with the content or remain fixed in the viewport when the user scrolls the page. This property only affects background images and not background colors.
“background-attachment - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What is the syntax of the background-attachment CSS property do?
The background-attachment property accepts the following values:
-
scroll(default): The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element’s border.) -
fixed: The background image remains fixed in the viewport and does not scroll with the content. -
local: The background is fixed relative to the element’s contents. If the element has a scrolling mechanism, the background scrolls with the element’s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.
Example:
div {
background-image: url('path/to/your/image.png');
background-attachment: fixed;
}
In this example, the background image in the specified div element will remain fixed in the viewport and will not scroll along with the content of the element.
“background-attachment - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What does the background-color CSS property do?
The background-color CSS property is used to set the background color of an HTML element. This property defines the color that will be displayed behind the content, padding, and border of the element. The background color can be specified using predefined color names, RGB, RGBA, HSL, HSLA, or hexadecimal color codes.
It’s worth noting that if an element has both a background color and a background image, the background color will be displayed underneath the background image. If the background image is partially or fully transparent, the background color will be visible through the transparent areas of the image.
“background-color - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What is the syntax of the background-color CSS property do?
The background color can be specified using predefined color names, RGB, RGBA, HSL, HSLA, or hexadecimal color codes.
Example:
div {
background-color: #ff5733;
}
In this example, the specified div element will have a background color with the hexadecimal value #ff5733, which is a shade of orange.
“background-color - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What does the background-blend-mode CSS property do?
The background-blend-mode CSS property is used to define how an element’s background images or background color should blend with each other. It sets the blending mode of each background layer, except for the bottom-most one, which is always set to "normal" blending mode. This allows you to create interesting visual effects by combining multiple background images and colors with different blending modes.
“background-blend-mode - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
What is the syntax of the background-blend-mode CSS property?
The background-blend-mode property accepts various blending modes as values, including but not limited to:
-
normal: Default value. No blending occurs between the background layers. -
multiply: Multiplies the colors of the background layers, resulting in a darker image. -
screen: Inverts, multiplies, and then inverts the colors again, resulting in a lighter image. -
overlay: Combines multiply and screen blend modes, darkening the light colors and lightening the dark colors. -
darken: Retains the darkest color of the background layers. -
lighten: Retains the lightest color of the background layers. -
color-dodge: Divides the bottom layer by the inverted top layer, lightening the image. -
color-burn: Divides the inverted bottom layer by the top layer and inverts the result, darkening the image. -
hard-light: Similar to overlay, but with the layers’ roles reversed. -
soft-light: A softer version of hard-light, with less contrast. -
difference: Subtracts the darker color from the lighter color in the background layers. -
exclusion: Similar to difference, but with lower contrast.
Note: We can apply several blend modes, separated by commas.
Syntax
/* One value */ background-blend-mode: normal; /* Two values, one per background */ background-blend-mode: darken, luminosity; /* Global values */ background-blend-mode: inherit; background-blend-mode: initial; background-blend-mode: revert; background-blend-mode: revert-layer; background-blend-mode: unset;
Example:
div {
background-image: url('path/to/your/image.png');
background-color: #ff5733;
background-blend-mode: multiply;
}
In this example, the specified div element has a background image and a background color. The multiply blend mode is applied, causing the background image and color to blend, resulting in a darker image where they overlap.
“background-blend-mode - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 5, 2023.
List the 8 properties the background CSS shortcut property sets
-
background-image— Specifies an image from a file or a generated color gradient image. -
background-position— Sets the initial position of the background image. -
background-size— Specifies how large to render the background image within the element. -
background-repeat— Determines whether to tile the image if necessary to fill the entire element. -
background-origin— Determines whether background positioning is relative to the element’sborder-box,padding-box(initial value), orcontent-box. -
background-clip— Specifies whether the background should fill the element’sborder-box(initial value),padding-box, orcontent-box. -
background-attachment— Specifies whether the background image willscrollup and down along with the element (the initial value), or if the image will befixedin place in the viewport. Note that using the valuefixedcan have negative performance implications on the page. -
background-color— Specifies a solid background color. This will render behind any background image.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
Initial values of the background CSS shortcut property
background-image: nonebackground-position: 0% 0%background-size: auto autobackground-repeat: repeatbackground-origin: padding-boxbackground-clip: border-boxbackground-attachment: scrollbackground-color: transparent
Source MDN
Why should you avoid using background CSS shortcut property?
Because it sets 8 CSS properties at the same time. Even if you don’t add values for all of them.
What happens when you apply multiple images to a background-image CSS property?
When you apply multiple background images, those listed first render in front of those listed afterward.
Example:
background-image: url(bear.jpg), linear-gradient(to bottom, #57b, #148);
In this example, bear.jpg will cover the linear gradient. The gradient won’t be visible. To make it visible you will need to apply a blend mode with background-blend-mode CSS property
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
How can you blend 2 different images in the same background?
You could:
.blend {
min-height: 400px;
/* A comma separates two background images. */
background-image: url(images/bear.jpg), url(images/bear.jpg);
/* Specifies one value to apply to both background images */
background-size: cover;
background-repeat: no-repeat;
/* Applies different background positions to each image */
background-position: -30vw, 30vw;
/* Applies the blend mode */
background-blend-mode: multiply;
}
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What does mix-blend-mode CSS property do?
The mix-blend-mode CSS property sets how an element’s content should blend with the content of the element’s parent and the element’s background.
In other words, it lets you blend multiple images but, it’s limited to the background colors or images of one element.
“mix-blend-mode - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 10, 2023.
What is the syntax of the mix-blend-mode CSS property?
The mix-blend-mode CSS property accepts a blend-mode keyword.
Here’s an example of using mix-blend-mode:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.image1, .image2 {
position: absolute;
width: 300px;
height: 200px;
}
.image1 {
background-image: url('image1.png');
}
.image2 {
background-image: url('image2.png');
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<div class="container">
<div class="image1"></div>
<div class="image2"></div>
</div>
</body>
</html>
In this example, there are two elements with background images (image1.png and image2.png) stacked on top of each other inside a container. The mix-blend-mode property is set to “multiply” for the second element (image2), which means that the content and background of the second element will be blended with the content and background of the first element using the “multiply” blending mode.
“mix-blend-mode - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 10, 2023.
Given the following html:
<div class="blend"> <h1>Ursa Major</h1> </div>
Propose CSS rulesets to generate the following image
.blend {
background-image: url("images/bear.jpg");
background-size: cover;
background-position: center;
padding: 5em 0 10em;
}
.blend > h1 {
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 6rem;
text-align: center;
/* Uses hard-light blend mode */
mix-blend-mode: hard-light;
/* Sets text and background color for the foreground element */
background-color: #c33;
color: #808080;
border: 0.1em solid #ccc;
border-width: 0.1em 0;
}
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What are the differences between background-blend-mode and mix-blend-mode CSS properties?
The background-blend-mode and mix-blend-mode CSS properties are related to blending in CSS, but they serve different purposes and apply to different aspects of an element:
1.- background-blend-mode:
- Blends an element’s background images and background color within the element itself.
- Sets the blending mode of each background layer, except for the bottom-most one.
- Affects only the blending of background layers within a single element.
- Does not impact how the element blends with other elements or its parent.
2.- mix-blend-mode:
- Blends an element’s content and background with the content and background of the element’s parent and elements stacked below it.
- Affects the blending of the entire element (content and background) with other elements in the stacking context.
- Creates interesting visual effects and image composition techniques by blending the current element with the elements beneath it in the stacking order.
