How to work with CSS Backgrounds
Posted on October 28, 2014 | by | No comments yet

Chapter 12 : CSS Backgrounds

Inherited: No

Background

You can style the background of an element in one declaration with the background property.

background: #ffffff url(path_to_image) top left no-repeat fixed;

Values:

  • attachment
  • color
  • image
  • position
  • repeat

Or you can set each property individually

Background Attachment

If you are using an image as a background. You can set whether the background scrolls with the page or is fixed when the user scrolls down the page with the background-attachment property

background-attachment: value;

Values:

  • fixed
  • scroll

Background Color

You can specifically declare a color for the background of an element using the background-color property.

background-color: value;

Values:

  • color name
  • hexadecimal number
  • RGB color code
  • transparent

Background Image

You can set an image for the background of an element using the background-image property.

background-image: url(path_to_image);

Values:

  • url
  • none

Background Position

You can position an image used for the background of an element using the background-position property.

background-position: value;

Values:

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • x-% y-%
  • x-pos y-pos

Background Repeat

You can set if an image set as a background of an element is to repeat (across=x and/or down=y) the screen using the background-repeat property.

background-repeat: value;

Values:

  • no-repeat
  • repeat
  • repeat-x
  • repeat-y

You may also like

About

Come in and join our tribe of enthusiastic and friendly folk. People just like you—crazy about learning something new and, more importantly, something you can tell your friends about. ilmabad citizens are the smartest people at the party!

Categories: Code |
[TOP]