1.3 CSS Background Properties Flashcards
What is the CSS shorthand property background controlling?
Background is shorthand CSS property sets
all background style properties at once
What are 5 background properties?
C.O.I.R.S.
- color,
- origin,
- image,
- repeat
- method,size,
Can a background color be just words?
Yes, you can set a background color to a color name.
Can you set a background to a hexadecimal color?
Yes
What is a hexadecimal color?
It’s a precise system for labeling colors based on letters and numbers.
Can a hexadecimal color have just 3 digits?
Yes
Just letters or just numbers
3 digits is shorthand for a color
Can you use RGB for color specification?
Yes
Red, green, blue (RGB) can be
used to specify background color.
What does the property background-image help you do?
It allows you to specify the URL of an
image to be used in the background.
What are the 8 background properties?
Background is shorthand
CCAPRIS O
- background-clip
- background-color
- background-attachment
- background-position
- background-repeat
- background-image
- background-size
- background-origin
Can a background have a gradient?
Yes
What is a background image?
A background image uses a picture for the background.
Sets one or several background images for an element.
What does background repeat do?
Background repeat controls whether or not the image
is tiled and how it gets tiled both vertically and horizontally.
What does background position control?
Controls the background position of a background image.
What’s the default for background image position?
By default, a background image’s initial position is the top-left corner of the containing element.
What rules does background value of cover apply?
Cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
How does the value of contain differ from that of cover?
Shows the entire image
Contain stays within the boundaries.
How do you use the property of background size to set size?
3 ways
Sets the size of a background image.
Keyword Values
1 Syntax
2 Syntax
What does background-repeat do?
Controls whether or not the image is tiled and how it gets tiled both vertically and horizontally.
What direction do repeated background images take?
Property: background-repeat
The property of background-repeat moves along Y and X, where
repeat-y repeats the image vertically,
while repeat-x repeats the background image horizontally.
What graphic formats does background-image accept?
The background-image property in CSS applies a graphic (e.g. PNG, SVG, JPG, GIF, WEBP).
Does the property of background-image accept gradients too?
Yes
You can use background-image property to set a gradient to the background of an element.
How do you specify the background image source?
Using a URL, you can specify the location of the image.
Are background properties combined?
Yes, you can have multiple background properties working together to create the desired effect.
