background

Question 1

What do background properties effect?

Answer 1

The background of the selected element/container

Question 2

background-color

Answer 2

Fills the container with a specified color

Question 3

opacity

Answer 3

Specifies the opacity/transparency of an element. Values 0.0 -> 1.0

Question 4

background-image

Answer 4

Specifies the background image of an element with a URL

body {
background-image: url(“myImage.jpg”);
}

Question 5

What is the default setting for a background image?

Answer 5

Placed top-left and repeated [V and H], so it covers the entire element.

Question 6

How many background images can you have?

Answer 6

As many as you’d like.

Question 7

Should you set a background-color if you already have a background-image?

Answer 7

Yes, in case the image fails to load.

Question 8

What background properties can you set with one declaration?

Answer 8

body {
background: lightblue url(“img_tree.gif”) no-repeat fixed center;
}
The background property is a shorthand property for:

background-color
background-image
*background-position/background-size
background-repeat
background-origin
background-clip
background-attachment

*must be position/size

Question 9

background-origin

Answer 9

sets the starting point for the background image.

padding-box //default starts from upper left padding

border-box //image starts from upper left border

content-box //image starts from the upper left corner of the content

inherit //inherit origin from the parent element

Question 10

background-position

Answer 10

Specifies the origin of the image

horizontal% vertical%;

horizontalpx verticalpx

inherit

left || right combined with [top, center, bottom]

Question 11

background-repeat

Answer 11

Specifies how to repeat the background

repeat //default x and y

repeat-x //only horizontally
repeat-y //only vertically

no-repeat

space, round, inherit

Question 12

background-size

Answer 12

background-size: auto|length|cover|contain|initial|inherit;

x% y%

Question 13

background-attachment

Answer 13

How a background image is set to the document

scroll //default will scroll with the page

fixed // will not scroll

local // scrolls with the element’s content

Question 14

Does background have a shorthand property?

Answer 14

Yes, can contain many properties with one declaration…

background: color image repeat origin

body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}