css for beginners part 2

What we going to learn in this tutorial

Today we are going to cover CSS property from this tutorial. In this tutorial you are going to discuss CSS background property in details.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color

Background color is very crucial property of CSS. This is one of the vastly used properties in CSS.

—What type of color CSS color supports

• a HEX value – like “#ff0000″
• an RGB value – like “rgb(255,0,0)”
• a color name – like “red”

Example

CSS

1

h1  {

2

3	background-color:#cccccc;

4

5

}

6

7

p    {

8

9	background-color:#e0ffff;

10

11

}

12

13

div  {

14

15	background-color:#b0c4de;

16

17

}

HTML

1

</pre>

2	<h1>CSS background-color example!</h1>

3

<div>

4	This is a text inside a div element.

5

6	This paragraph has its own background color.

7

8	We are still in the div element.</div>

9

<pre>

Background Image

Background image is also one of the popular CSS properties. There is very few website that do not have used CSS background property. The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Example

CSS

1	body {background-image:url('bgdesert.jpg');}

 HTML

1	Hello World!

2	This text is not easy to read on this background image.

Background Image Repeat

Background repeat property very useful property to handle to dimension of images in website vertically and horizontally. By default, the background-image property repeats an image both horizontally and vertically.

—Background-repeat option

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

“repeat-x” repeats background images horizontally and “repeat-y” repeats background images horizontally.  “No-repeat” stops images to repeat in both dimensions. “Inherit” Specifies that the setting of the background-repeat property should be inherited from the parent element.

Example

Repeat X CSS

1

div

2

{

3	background-image:url('smiley.gif');

4	background-repeat:<b>repeat-x</b>;

5

}

Repeat Y  CSS

1

div

2

{

3	background-image:url('smiley.gif');

4	background-repeat:<b>repeat-y</b>;

5

}

No Repeat CSS

1

div

2

{

3	background-image:url('smiley.gif');

4	background-repeat:<b> no-repeat</b>;

5

}

Background Attachment

Background attachment is a wonderful property of CSS it let you to stick background image in fixed position and scroll with when you scroll the pages. The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. Default value is scroll.

—Background-Attackment option

• Scroll
• Fixed

 CSS Example for scroll

1

{

2

3	background-image:url('smiley.gif');

4

5	background-repeat:no-repeat;

6

7	background-attachment: scroll;

8

9

}

CSS Example for Fixed

1

{

2

3	background-image:url('smiley.gif');

4

5	background-repeat:no-repeat;

6

7	background-attachment: fixed;

8

9

}

Background Position

Background position property is property that sets the position of attached background. Background position is can be declared vertically and horizontally.  Even only vertically or only horizontally. Background position value can be declared in percentage, pixel and words such as left top

Value

• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom

x% y%

Example in pixels

1

div

2

{

3	background-image:url('smiley.gif');

4	background-repeat:no-repeat;

5	background-position:<b>50px 50px</b>;

6

}

Example in percentage

1

div

2

{

3	background-image:url('smiley.gif');

4	background-repeat:no-repeat;

5	background-position:<b>50% 50%</b>;

6

}

7

8

<i>

Background - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing with backgrounds.

To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.

The shorthand property for background is simply "background":

Example of CSS Shorthand property

view source

print?

1	background:#ffffff url('img_tree.png') no-repeat right top;