How to apply CSS styles in background

Please visit my new Web Site https://coderstechzone.com

The background of a website is the first priority, so please take your time to finalize background effects. If you are aiming for a professional website, a good rule of thumb is to use a light background with dark text. Since i am not graphics expert so that i can't suggest you graphics concept but i can give you the way, how we can apply CSS styles on a page when your graphics designer give you a home page & a child page. Your graphics designer supply you an image but your duty is to implement that image looks in your page in efficient way. Thats why CSS knowledge is required for you. Let your graphics designer provide you an image with texture from top to bottom for your page header. So what you do? Do you copy the image & paste it into your page? Nop this is not the right way. Just crop 1px width top to bottom image & think if you repeat this image horizontally then it will looks like a complete header which is provided by designer. It will faster your works, Save the page loading time which is more required. The following examples will show you how you can optimize your page loading time using CSS styles.

Focus Area:
1. CSS Background Color
2. CSS Background Image
3. CSS Background Image Repeat
4. CSS Fixed Background Image
5. CSS Background Image Positioning
5. CSS Gradient Background
6. CSS Background Shorthand Property

CSS Background Color:
The background-color property specifies the background color of an element like paragraph, div, list, header etc.

CSS Code:

div { background-color: magenta; }
p { background-color: #ff4450; }
h5 { background-color: rgb( 255,120,0); }

CSS Output:

This is the DIV block with background color "magenta".

This is the PARAGRAPH block with background color hexa code "#ff4450".

This is the HEADER block with background color rgb code ( 255,120,0).

Note: You can apply color name or hexcode or rgb in this property.


CSS Background Image:
If you want to set an image in your page background then first choose your image and copy the url path then paste the path into the element CSS properties. Keep in mind that by default the image is repeated through the entire element. You can specify your page backgound image in your body tag. Here i applied an image into a div like:

CSS Code:

div { background-image: url(bgstar.GIF); }
p { background-image: url(bgstar.GIF); }
h5 { background-image: url(bgstar.GIF); }

CSS Output:

This is the DIV block with background image.
This is the DIV block with background image.

This is the PARAGRAPH block with background image.
This is the PARAGRAPH block with background image.

This is the HEADER block with background image.
This is the HEADER block with background image.

Look at the output. I do not specify repetation but the background image has been repeated cause its a default property.


CSS Background Image Repeat:
As we knew that by default the image repitated both in horizontal and vertical direction. But sometimes you may need to repeat image either in vertical direction or in horizontal direction using CSS. Even no repetation may required. In the following example i try to cover each & every aspects.

CSS Code:

div { background-image: url(bgstar.GIF); background-repeat: repeat; }
p { background-image: url(bgstar.GIF); background-repeat: repeat-y;}
h5 { background-image: url(bgstar.GIF); background-repeat: repeat-x;}
span { background-image: url(bgstar.GIF); background-repeat: no-repeat;}

CSS Output:

THIS IS THE DIV FIRST LINE. SAME AS ABOVE EXAMPLE.
THIS IS THE DIV SECOND LINE. SAME AS ABOVE EXAMPLE.
THIS IS THE DIV THIRD LINE. SAME AS ABOVE EXAMPLE.
THIS IS THE DIV FOURTH LINE. SAME AS ABOVE EXAMPLE.
THIS IS THE DIV FIFTH LINE. SAME AS ABOVE EXAMPLE.

THIS IS THE PARAGRAPH FIRST LINE. REPEAT VERTICALLY.
THIS IS THE PARAGRAPH SECOND LINE. REPEAT VERTICALLY.
THIS IS THE PARAGRAPH THIRD LINE. REPEAT VERTICALLY.
THIS IS THE PARAGRAPH FOURTH LINE. REPEAT VERTICALLY.
THIS IS THE PARAGRAPH FIFTH LINE. REPEAT VERTICALLY.

THIS IS THE h5 FIRST LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 SECOND LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 THIRD LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 FOURTH LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 FIFTH LINE. REPEAT HORIZONTALLY.

THIS IS THE SPAN FIRST LINE. THIS IS THE EXAMPLE OF no-repeat.
THIS IS THE SPAN SECOND LINE. THIS IS THE EXAMPLE OF no-repeat.
THIS IS THE SPAN THIRD LINE. THIS IS THE EXAMPLE OF no-repeat.
THIS IS THE SPAN FOURTH LINE. THIS IS THE EXAMPLE OF no-repeat.
THIS IS THE SPAN FIFTH LINE. THIS IS THE EXAMPLE OF no-repeat.



CSS Fixed Background Image:
When you need a scrollable element with background then the below example will help you lot. You can fix the background image. So that when user scroll vertically or scroll horizontally the image position will be fixed. You can also set the image scrollable. Look at the example below:

CSS Code:

div.bgfixed
{
background-image: url(smallPic.jpg);
background-attachment: fixed;
}

div.bgscroll
{
background-image: url(smallPic.jpg);
background-attachment: scroll;
}

CSS Output:

This is the first line with fixed image background.
This is the second line with fixed image background.
This is the third line with fixed image background.
This is the fourth line with fixed image background.
This is the fifth line with fixed image background.

This is the first line with scroll image background.
This is the second line with scroll image background.
This is the third line with scroll image background.
This is the fourth line with scroll image background.
This is the fifth line with scroll image background.

CSS Background Image Positioning:
If you look at my above example you see that the repeated same in both direction. But if you want to position an image in a specific location then you can follow my below example.

CSS Code:

div
{
background-image: url(bgstar.gif);
background-position: 100px 50px;
background-repeat: no-repeat;
}

div
{
background-image: url(bgstar.gif);
background-position: 50% top;
background-repeat: no-repeat;
}

div
{
background-image: url(bgstar.gif);
background-position: left top;
background-repeat: no-repeat;
}

CSS Output:

This is the first line with fixed image position 100*100 px.
This is the second line with fixed image position 100*100 px.
This is the third line with fixed image position 100*100 px.
This is the fourth line with fixed image position 100*100 px.
This is the fifth line with fixed image position 100*100 px.

This is the first line with fixed image position 100*100 px.
This is the second line with fixed image position 100*100 px.
This is the third line with fixed image position 100*100 px.
This is the fourth line with fixed image position 100*100 px.
This is the fifth line with fixed image position 100*100 px.

This is the first line with fixed image position 100*100 px.
This is the second line with fixed image position 100*100 px.
This is the third line with fixed image position 100*100 px.
This is the fourth line with fixed image position 100*100 px.
This is the fifth line with fixed image position 100*100 px.

CSS Gradient Background:
To make a gradient backgroud, first draw an image in either photoshop or any graphics tool. Then crop a portion of that gradient image & set allow repeat by applying css within HTML elements. To demonestrate the example here i am presenting you a slide:
Fig: Demonestrate how to slice a gradient image.

From above figure if you load the full image instead of sliced image then your page become heavy & will take longer time to load. Now just by applying CSS you can create long width gradient image with just a single few kb image.

CSS Code:

p
{
background-image: url();
background-repeat: repeat-x;
}

CSS Output:

This the first line to draw a gradient background.
This the second line to draw a gradient background.
This the third line to draw a gradient background.
This the fourth line to draw a gradient background.
This the fifth line to draw a gradient background.

CSS Background Shorthand Property:
I have demonestrated a lot of properties which is difficult to remember & requires more line in your CSS file. There is another way you can minimize the code to a single line by the following way:

Syntax:
div {background:background-color background-image background-repeat background-attachment background-position}

Example:
div {background:#ff4500 url('bgstar.gif) repeat top left}