CSS Colors and Backgrounds

Colors

Colors are specified by the color property, which is defined using various techniques like predefined color names, RGB, HEX, HSL, RGBA, HSLA values.

Format	Syntax	Example
Predefined Color	red, green, blue etc.	h1 { color: red }
RGB	rgb(rrr, ggg, bbb)	rgb(255, 91, 77)
RGBA	rgba(rrr, ggg, bbb, a)	rgba(255, 91, 77, 0.7)
HEX	#rrggbb	#00ff00;
HSL	hsl(h, s, l);	hsl(9, 100%, 65%)
HSLA	hsla(h, s, l, a);	hsla(9, 100%, 65%, 0.7)

Colors Using Predefined Color Names

example

										    
											h1 {
												color: green;
											}

Colors Using RGB

RGB stands for 'red, green, and blue'. RGB is used for defining the color of any HTML element by specifying the values of RGB, that are in the range of 0 to 255.

example

										    
											h1 {
												color: rgb(255, 91, 77);
											}

Colors Using HEX

example

										    
											h1 {
												color: green;
											}

Colors Using HSL

example

										    
											h1 {
												color: green;
											}

Colors Using RGBA

example

										    
											h1 {
												color: green;
											}

Colors Using HSLA

example

										    
											h1 {
												color: green;
											}

Backgrounds

Background properties in CSS are used to define background styles of the HTML elements. There are various background properties available for styling in CSS, which are given bewlow-

Background Color

It is used to specify or set the background color by the CSS background-color property.

example

										    
											h1 {
												background-color: green;
											}

Background Image

It is used to specify or set the background image as a background of an element by the CSS background-image property.

example

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

Background Repeat

By default the background-image property in CSS repeats an image in horizontal and vertical direction, but by using background-repeat property we can control this default behaviour. We can easily set a background image repeat vertically (i.e. y-axis), and horizontally (i.e. x-axis), in both directions, or in neither direction with background-repeat property.

example

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

Background Attachment

The background-attachment property defines whether the background image should scroll or should be fixed with the web page.

example

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

Background Position

By default the background-image property in CSS placed the image at the top-left position of the element i.e. at (0,0), but we can control the position of the background image by using background-position property.

example

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

Background Shorthand Property

We can specify all the background properties in one single property, known as shorthand property (i.e. background). The order of the background property values are:- background-color, background-image, background-repeat, background-attachment, background-position.

example

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