Prelims - CSS backgrounds

Question 1

properties are used to add background effects for elements

Answer 1

CSS Backgrounds

Question 2

property specifies the background color of an element

Answer 2

background-color

body {
  background-color: lightblue;
}

Question 3

specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent

Answer 3

opacity

div {
  background-color: green;
  opacity: 0.3;
}

Question 4

property specifies an image to use as the background of an element

Answer 4

background-image

body {
  background-image: url("paper.gif");
}

Question 5

By default, the ____ property repeats an image both horizontally and vertically

Answer 5

background-image

Question 6

To repeat an image vertically, set

Answer 6

background-repeat: repeat-y;

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-y;
}

Question 7

To repeat an image horizontally, set

Answer 7

background-repeat: repeat-x;

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Question 8

Show the background image only once

Answer 8

background-repeat: no-repeat;

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

Question 9

property is used to specify the position of the background image

Answer 9

background-position

Question 10

property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page

Answer 10

background-attachment

Question 11

Specify that the background image should be fixed

Answer 11

background-attachment: fixed

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Question 12

Specify that the background image should scroll with the rest of the page

Answer 12

background-attachment: scroll

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

Question 13

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a

Answer 13

CSS background - Shorthand property

Question 14

Instead of writing:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Answer 14

Use the shorthand property to set the background properties in one declaration

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

Question 15

CSS backgrounds

When using the shorthand property the order of the property values is

Answer 15

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Question 16

Specifies the size of the background image(s)

Answer 16

background-size

Question 17

Specifies the painting area of the background

Answer 17

background-clip