Css Background

Css Background


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
HOVER OVER/ANCHOR EXTRACT

a : active { color: red; }

a : link { color: yellow; }

a : visited { color: blue; }

a : hover { color: green; }

These are the four main extract for anchor links. Use your predefined color name from your CSS style or use one of the optional CSS codes.


BACKGROUND COLOR  EXTRACT


#selector { background: #e2eae2; }


MULTI-BORDER USING A PSEUDO SHADOW BOX EXTRACT


box-shadow: [inset] [horizontal offset] * [vertical offset]* [blur radius] [optional spread radius] [color]*;

*Horizontal, vertical, color are required. Rest are optional.

0 comments:

Post a Comment