CODEWITHSUNDEEP
htmlcssbackground-imagebackground-position
Manoz
Manoz

Reputation: 6617

Background positions

This Image I'm using for making 3 direction animation. I need to show only first character of this image. Well i am using background position-

background-position:0px 200px;

But it is showing full image here.

Styles

position:absolute;
    top: 40px;left: 40px;
background-position: 0px 200px;

Image- Image i want to use for first character

Please guide me through Js fiddle. Fiddle

Upvotes: 1

Views: 286

Answers (5)

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

see this link i hope this will help for you: http://jsfiddle.net/9RYph/7/

div {

    top: 40px;left: 40px;
    background-size:100%;
    background:url('https://i.sstatic.net/PuAjg.jpg');
    width: 50%;
    height: 600px;
}

Upvotes: 1

user1423506
user1423506

Reputation:

Try this one 

img{
clip:rect(0px,300px,auto,0px);
position:absolute;
}

Upvotes: 2

Muhammad Usman
Muhammad Usman

Reputation: 10946

You have to put this image in a div as background and then use background-position property.

background-position only works if you use background image.

LIVE DEMO

Upvotes: 1

mfjones
mfjones

Reputation: 739

You need to set the background image in the #character id:

background: url(http://img391.imageshack.us/img391/432/scorpionortholp0.jpg)

Then add the width and height properties to suit your needs.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157404

You are using img but background-position property wont apply on img element, you need to use background-image property in your CSS and need to set the width of the element here, so if the character width is say around 100px and height of 200px, than set height and width as 200px and 100px respectively

<div></div>

div {
   height: 200px;
   width: 100px;
   background-image: url();
   background-position: ;
   background-repeat: no-repeat;
   /* Other styles goes here */
}

Upvotes: 1

Related Questions