Home > DeveloperSection > Blogs > Background Position using CSS3

Background Position using CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 1829  View(s)
Rate this:

Background Position using CSS3

In this blog I am explaining the background position using CSS3.

The background-position property; as its name articulate, assent you to control the placement of the background. The following shows the syntax of the background- position property.

Syntax:

Background-position :[< percentage>|<length>] | [[top|center|bottom]||[left|center|]]

[< percentage>|<length>]

That the values may be a percentage or length values.

[[top|center|bottom]||[left|center|]]

That either one or two keywords values may be providing.

Example:

I am creating a class named ClassDiv and property.

    .ClassDiv

    {

        width:200px;

        height:200px;

        border: 1px solid red;

        background-image:url('mindstick.jpg');

        background-repeat:no-repeat

    }

This code will written in #position{} id.

    background-position:30% 30%;

    background-position: 30px 30px;

    background-position:top left;

    background-position:top center;

    background-position:top right;

    background-position:right center;

    background-position:bottom right;

    background-position:bottom center;

    background-position:bottom left;

    background-position:left center;

    background-position:center center;

This code will written <body> </body> tag.

<div class="d" id="length1">position:30% 30%</div>

<div class="d" id="length1">position:30px 30px</div>

<div class="d" id="length1">position:top left</div>

<div class="d" id="length1">position:top center</div>

<div class="d" id="length1">position:top right</div>

<div class="d" id="length1">position:right center</div>

<div class="d" id="length1">position:bottom right</div>

<div class="d" id="length1">position:bottom center</div>

<div class="d" id="length1">position:bottom left</div>

<div class="d" id="length1">position:left center</div>

<div class="d" id="length1">position:center center</div>

Output:


Don't want to miss updates? Please click the below button!

Follow MindStick