How to show master with css spirit from one image
I have the above image using css how to show the image as below.
I am completely unfamiliar with this. I've tried this:
.step{
background-image: url(images/myimage.png);
background-repeat: no-repeat;
background-position: 40px -40px;
}
From the above, I can see how the gray image, like on top, puts the orange image on the gray?
source to share
I don't think you can do it with one class and one element as in your question, not with this image (because the circles have borders, because of the numbers inside, etc.).
In fact, you can use CSS3 multiple background images
(see a good article on this ), in your case, place the same image twice in two different places, one above the other;
this is how close you can go: http://jsfiddle.net/APNZL/
As you can see, there are a few drawbacks: the numbers must be added differently, the middle circle is cut by the gray line, and the last circle must be limited to the div's width to cover the next gray line ...
But you can do it with two different divs, one with an empty background image, the other with a "full" one, one above the other, using an absolute position, limiting the width of the first image and using the z-index ...
Working demo : http://jsfiddle.net/APNZL/1/
Code (you should only use one container and change the class to the first div, this is just a test case to show you all the possibilities):
<div class="container">
<div class="nosteps"></div><div></div>
</div>
<div class="container">
<div class="onestep"></div><div></div>
</div>
<div class="container">
<div class="twosteps"></div><div></div>
</div>
<div class="container">
<div class="threesteps"></div><div></div>
</div>
.container{
margin: 20px;
width: 230px;
position: relative;
height: 40px;
}
.container div{
width: 230px;
height: 40px;
background-image: url(http://i.stack.imgur.com/6jKtl.png);
background-repeat: no-repeat;
background-position: 0px 0px;
position:absolute;
left:0;
top: 0;
z-index: 2;
}
.container div + div{
z-index: 1;
background-position: 0px -40px;
}
div.nosteps {
width: 0px;
}
div.onestep {
width: 70px;
}
div.twosteps {
width: 140px;
}
div.threesteps {
width: 230px;
}
source to share
you probably want to make these clickable links.
First of all, you want to create a html builder suitable for your design. In your case, this is:
<div class="spirit">
<div class="button1"></div>
<div class="button2"></div>
<div class="button3"></div>
</div>
then you can style each button using the following
.spirit .button1 {display:inline-block;background:url('http://i.stack.imgur.com/6jKtl.png'); width:70px; height:40px; background-position:0px 0px;overflow:hidden;}
when someone clicks on a link or when the mouse is on a link .. you need to do something like this:
.spirit .button1:hover, .spirit .button1:active {display:inline-block;background:url('http://i.stack.imgur.com/6jKtl.png'); width:70px; height:40px; background-position:0px 0px;overflow:hidden;}
you can control the position of the image with the background position
more information can be found here: source
source to share