[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1034
  • Last Modified:

slice image using css sprite

hi,
I have this image:

 to be sliced
I wanna the blue umbrella to be sliced using background and position css properties

I got it's coordination,

 x=111 px, y= 115 px
width = 34 px
height = 40 px

thanks
0
njgroup
Asked:
njgroup
  • 3
1 Solution
 
Eternal_StudentCommented:
You need something like this ... the coordinates are not completely accurate
.blueUmbrella{width:34px; height:40px; background:url(pokemon.gif) no-repeat -190px -83px;}

Open in new window

0
 
Eternal_StudentCommented:
Full version:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
	.blueUmbrella{width:34px; height:40px; background:url(pokemon.gif) no-repeat -190px -83px;}
</style>
</head>
<body>
	<div class="blueUmbrella">&nbsp;</div>
</body>
</html>

Open in new window

0
 
njgroupAuthor Commented:
the width is for div or to tell the image how long the width is for rectangle to cut?
0
 
Eternal_StudentCommented:
The width is for the div, you use sprites as background images inside an element (such as a div).
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now