CSS Background Styling

---

---

---

CSS Background Color

To set the background color of an element you must use the background-color property.

selector { background-color: value (or color name); }

Color is usually indicated in the following ways:

• an RGB value - like: "rgb(0,0,255)", "rgb(255,0,0)", "rgb(255,255,255)" (used rarely)
• a color name - like: "blue", "red", "white" (quite often)
• a HEX value - like: "#0000FF", "#FF0000", "#FFFFFF" (nearly always)

Take a look at color names and HEX values here: Color Codes

Example: changing the color of the entire page.

body { background-color: rgb(0,0,255); }
/* or */
body { background-color: blue; }
/* or */
body { background-color: #0000FF; }

Also you can set the background color of an element using only the "background" property.

selector { background: value (or color name); }

Example: changing header and paragraph background color.

p { background:#B3FFB3; }
h4 { background:#DBDBDB; }

CSS Background Image

To set the background image of an element you must use the background-image property.

selector { background-image:url('path to image'); }

Example:

.example { background-image:url('example.jpg'); }

The background-image property, by default, repeats an image both horizontally and vertically, so it covers the entire element.

CSS Background Image Repeat

There is a possibility to set a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.

Example:

h4 {  
	background-image: url('example.jpg');
	background-repeat: repeat;}
p {  
	background-image: url('example.jpg'); 
	background-repeat: repeat-y; }
ol {  
	background-image: url('example.jpg'); 
	background-repeat: repeat-x;}
ul {  
	background-image: url('example.jpg'); 
	background-repeat: no-repeat;}

Or less code:

h4 { background: url('example.jpg') repeat; } /* default */
p { background: url('example.jpg') repeat-y; } /* repeat vertically */
ol { background: url('example.jpg') repeat-x; } /* repeat horizontally */
ul { background: url('example.jpg') no-repeat; } /* no repeat */

CSS Background Image Fixed or Scroll

You may choose to have your background scroll naturally (default), or to have it in a fixed position.

Example:

/* background fixed */
body { 
	background-image: url('example.jpg'); 
	background-attachment: fixed; }
/* default */
body { 
	background-image: url('example.jpg'); 
	background-attachment: scroll; }

CSS Background Image Position

To define where exactly an image appears you must use the background-position property. There are three different ways of defining position: length, percentages, and keywords (top, right, bottom, left, and center).

Example:

.example1 { 
	background-image: url('example.jpg'); 
	background-position: 200px 100px; }
.example2 { 
	background-image: url('example.jpg'); 
	background-position: 45% 35%; }
.example3 { 
	background-image: url('example.jpg'); 
	background-position: top center; }

---