CSS background tutorial

CSS background tutorial

CSS background tutorial

CSS background tutorial:

CSS background is an important issue. CSS has several properties for changing the background of HTML elements. Discussed below.

background Color:

There is a property called background-color, you can give it any color. Hexadecimal (e.g. # fff000, # 000000 etc.), RGB (e.g. rgb (192,192,192), rgb (255,255,0) etc.) or color names (e.g. maroon, black, red, etc.) will work. If no value is set, the default is "transparent".

background image:

There is a property called background-image with which any image can be given behind the element. The value is given in this way.

background-image : url(path/to/image);

 Show the source of the image inside the url.

background repetition:

The background-repeat property allows you to specify how or where the image in the background (if there is a background-image) will be repeated. E.g.


"repeat" If the image is repeated along both X and Y axes, this is the default. In addition, 3 more values ​​can be given:

"no-repeat" If given, there will be no repetition.

"repeat-x" Will only repeat along the X axis

"repeat-y" Will repeat along the Y axis.

background location:

With the background-position property, the position of the background image can be moved to the desired position. By default the value is 0% 0%

It could be a potential value

background-position:left top;
background-position:left center;
background-position:left bottom;
background-position:center top;
background-position:center center;background-position:center bottom;background-position:right top;
background-position:right center;
background-position:right bottom;
background-position:x% y%;
background-position:Xpx Ypx;

By looking at the values, it is clear which direction the image will be on. The last 3 lines x% y% means how far away from the X axis and y% means how far away from the Y axis. If any one value is given, the value of the rest is 50%. Above all, the plaintiff will work from 0% to 0%.

 If you give any of the values ​​like left center, left top, etc., then the rest will take center.

The value of% can be given in pixels. And if you inherit, you will get the parent element.

background-attachment There is another property called "scroll" (it is by default) and "fixed". If you have scroll, the background will scroll along with the mouse scrolling (if the content is longer than the browser window) and if fixed, the background will not be removed with mouse scrolling.

An example with all of them

background-color: #5d8e50;
background-image:url(/images/stories/pos_back.jpg); background-repeat: no-repeat;
background-position: center right;}

Use all properties together


All of the above can be used together with the property. The values ​​have to be given one by one with space.

For example, you have to give number 1

background-color Its value then background-image Then background-repeat Then background-position Finally background-attachment.

#header{background: #5d8e50 url(/images/stories/pos_back.jpg) no-repeat  center right scroll;}

There must be a space in each value

This code will do the same thing by removing all the properties of the previous example.

CSS3 has several new properties. IE (Internet Explorer) supports these in almost all browsers except previous versions.

You can change the size of the background image with the name property. The size of the image along the X and Y axes is determined by% or px / em. E.g.

background-size: 40% 80% 2./* or */background-size: 200px 100px;

If you can only give auto value then the whole picture will show.

In addition two more values ​​can be given.

"contain" and "cover"

contain If given, the maximum length of the whole image will show the width (keeps the proportions of the image correct).

 And the cover will show the maximum length width of the whole image (keeps the proportions of the image right) and the whole element will be spread as far as it covers the space.

See cover, contain in the example above.


Another new property named CSS 3A has arrived. Its value can be value

"padding-box" If given, the background image will show the padding part of the element (if there is padding).

"content-box" If given, it will only show as the background of the content (ie element).

And give "border-box" when there is a border and you want the background image to show under the border.

Gradient background

Gradient background can be created with CSS 3, before doing this, it was done by making gradient image in Photoshop and working with the background image. For example, the slogan on the top right of our site, the search button, etc., the following background gradient has been given.

#logo{/* mozila firefox 3.6 +*/background:-moz-linear-gradient(center top , #76BF6B, #3B8230) repeat scroll 0 0 #62AF56; /* Safari 5.1, Chrome 10+ */background:-webkit-linear-gradient(top, #76BF6B, #3B8230);}

The first line works in Mozilla and the next in Google Chrome. Give the color gradient inside -moz-linear-gradient or -webkit-linear-gradient as I gave it.

 The gradient that I gave here is that linear means straight background.

Radial ackground:

#logo{/* mozila firefox 3.6 +*/background : radial-gradient(circle , #76BF6B, #3B8230) repeat scroll 0 0 #62AF56; /* Safari 5.1, Chrome 10+ */ background:-webkit-radial-gradient(circle, #76BF6B, #3B8230);}

Jonny Richards

Templateify is a site where you find unique and professional blogger templates, Improve your blog now for free.

Previous Post Next Post