Setting Backgrounds & Gradients in CSS
body {
background-color: rgb(200,200,200);
color: #ffffff;
}
h1 {
background-color: DarkCyan;
}
h2 {
background-color: #ee3e80;
}
p {
background-color: white;
color: rgb(200,200,200);
}
Coloring the Background — background-color
body {
background-color: rgb(200,200,200);
color: #ffffff;
}
h1 {
background-color: DarkCyan;
}
h2 {
background-color: #ee3e80;
}
p {
background-color: white;
color: rgb(200,200,200);
}
p.one {� background-color: rgb(0, 0, 0);� opacity: 0.5;� padding: 10px;
}��p.two {� background-color: rgb(0, 0, 0);� background-color: rgba(0, 0, 0, 0.5);
}
Setting Transparency —
opacity / rgba()
Two rules offer an ability to make things appear transparent at levels from 0 (clear) to 1 (solid) using decimal numbers in between to fill out the range.
p.one {� background-color: rgb(0, 0, 0);� opacity: 0.5;� padding: 10px;
}��p.two {� background-color: rgb(0, 0, 0);� background-color: rgba(0, 0, 0, 0.5);
}
Opacity sets how transparent/opaque
the ENTIRE element is
Setting Transparency —
opacity / rgba()
p.one {� background-color: rgb(0, 0, 0);� opacity: 0.5;� padding: 10px;
}��p.two {� background-color: rgb(0, 0, 0);� background-color: rgba(0, 0, 0, 0.5);
}
The last value of RGBA (alpha) sets how
transparent/opaque that specific rule is
Setting Transparency —
opacity / rgba()
CSS Color Properties & Values Summary
color | Property that sets the foreground color of text |
background-color | Property that sets the background color of any element |
#rrggbb | Value representing a color in hexadecimal in which each of "rr", "gg", and "bb" is in the range 00 to ff. |
rgb(#, #, #) | Value representing a color in decimal in which each # has a value in the range 0 to 255 in the order RED, GREEN, BLUE. |
opacity: # | Property that sets the transparency of an element where # is any decimal value from 0 (clear) to 1 (solid). |
rgba(#, #, #, @) | Value representing a color in decimal in which each # is in the range 0 to 255 with the order RED, GREEN, BLUE, and the @ is any decimal from 0 (clear) to 1 (solid) representing the transparency of the property to which the value applies. |
p {� background-image: url("images/pattern.gif");
}
Setting an Image in the Background —
background-image
background-image places an image behind the content of a box. The url() value takes an absolute or relative URL path to an image file.
body {� background-image: url("images/header.gif");� background-repeat: repeat-x;
}
Repeating a Background Image —
background-repeat
background-repeat allows a pattern to form from repeating an image.
Possible values: repeat-x (horizontally), repeat-y (vertically), repeat (both directions), no-repeat (none)
body {� background-image: url("images/tulip.gif");� background-repeat: no-repeat;� background-position: 50% 50%; /* horizontal vertical */
}
Positioning the Background —
background-position
background-position sets the background image at a specific spot relative to the initial view of the page. The first value is the horizontal position. The second is the vertical position.
Possible values: Any numeric units or "left, center, right" for horizontal and "top, center, bottom" for vertical
body {� background-image: url("images/tulip.gif");� background-repeat: no-repeat;� background-attachment: fixed;
}
Fixing a Background Image in Place —
background-attachment
background-attachment determines if a background moves when the page is scrolled.
Possible values: fixed, scroll (the default action)
Live Example:
body {� background: #ffffff url("images/tulip.gif") no-repeat top right;
}
Shorthand Property for Backgrounds —
background
Using "background" allows you to specify multiple property values at once for a background.
div.one {� background: linear-gradient(#648880, #293f50);�}
div.two {
background: radial-gradient(#648880, #293f50);
}
Adding a Background Gradient —
linear-gradient() / radial-gradient()
linear-gradient displays a gradual shift from one color to another. If more than two colors are used, the shift moves from left to right inside the parentheses.
radial-gradient works similarly except it shifts colors from inside to outside.
Possible values: At least two hex codes, rgb(a) set of values, or named colors
.one {� background: linear-gradient(to left, #648880, #293f50);�}
.two {� background: linear-gradient(to bottom right, #648880, #293f50);�}
.three {� background: linear-gradient(45deg, #648880, #293f50);�}
Changing Gradient Direction
Adding a directional value before the color list, allows you to change the direction that the gradient draws.
Possible values in various combinations: "to" + bottom, top, left, right, Xdeg (where X is a number in degrees of a circle).
CSS Practice
Use JSBin to work with backgrounds