Background ‹ Advanced Programming Solutions

Positioning Background Image Using CSS

October 9th, 2009 Captain No comments

In this article, we are going to answer those questions:

Actually, there is a short method to do this. Look at structure 1.0:
Structure 1.0:

1
2
3
4

#[DIVID] {
background-image:url([image url]);
background-position:[Horizontal position] [Vertical position]
}

Example 1.0: Assume, we have a div named “ourdiv” and an image named “ourimage.jpg”.

1
2
3
4
5
6

#ourdiv {
width: 86px;
height: 30px;
background-image: url(ourimage.jpg);
background-position: right top;
}

Original view of ourimage.jpg:

It’s size: 259×202px
Click to Read Complete Article »