Chapter 2 – CSS Background Properties

Background Properties
sets color, image, repeat, attachment, and position

1) background
———————————
.myDiv{
background: #030000 url(image/myImage.jpg) no-repeat fixed left top;
}

2) background-attachment
———————————
background-attachment
fixed
scroll : default value

.myDiv{
background-image:url(image/myImage.jpg);
background-attachment: fixed;
}

3) background-color
———————————
.myDiv{
background-color: #030000;
}

4) background-image
———————————
.myDiv{
background-image:url(image/myImage.jpg);
}

5) background-position
————————————–
background-position
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x%,y%
x is horizontal position and y is vertical position
Ex. 20%,30%
xpos, ypos
xpos is horizontal position and ypos is vertical position
Ex. 30px,20px

.myDiv{
background-image:url(image/myImage.jpg);
background-repeat: no-repeat;
background-position: left;
}

6) background-repeat
———————————
background-repeat
repeat
repeat-x : repeats the background horizontally
repeat-y : repeats the background vertically
no-repeat

.myDiv{
background-image:url(image/myImage.jpg);
background-repeat: no-repeat;
background-position: left;
}

7) background-clip (Added in CSS3)
————————————————–
background-clip : specifies the area of background
border-box
padding-box
content-box

.myDiv{
background-clip:content-box;
}

8 ) background-origin (Added in CSS3)
————————————————-
background-origin : specifies the Position of the background image relative to the content box
border-box
padding-box
content-box

.myDiv{
background-origin:content-box;
}

9) background-size (Added in CSS3)
————————————————
background-size : Specifies the size of the background image
length      (Ex. 10px 20px)
percentage    (Ex. 100% 50%)
cover
contain

.myDiv{
background-image:url(image/myImage.jpg);
background-repeat: no-repeat;
background-size:10px 20px;
}

_______________________________________
Thanks,
Nikhil, Sr. Web Designer, Pune [MH, INDIA]
Like this Page on Facebook : – https://www.facebook.com/littlewelt

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

2 Responses to Chapter 2 – CSS Background Properties

  1. kalekushal says:

    Nice blog nikx… i m a web developer myself and even we need to do all these CSS and all… it helped me a lot… Thnx.. i got ur blogs link from copypasteblog… ne ways keep it up.. even i m trying my hands on blogging and sharing some of my knowledge and experiences ..

    Regards
    kK
    kalekushal.blogspot.com

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: