CODEWITHSUNDEEP
jqueryhtmlimagecssresponsive-design
user2868232
user2868232

Reputation:

How to make my sprite responsive

What we have is a set of blue curtains on a sprite which I want to make fluid as the background jpg gets reduced in width. Be aware that the blue curtains inside the sprite are covering the blue curtains of the jpg. The sprite needs to cover the two blue curtains in the top center as the jpg is responsive.

See website: http://demo.chilipress.com/epic3/

The end result needs to look like this: enter image description here And as you can see the there are three layers here. The jpg (which is the background), the curtains (the sprite) and the eagle (the sprite). So when changing the dimensions the sprite must remain on the correct position and act responsive.

HTML

<img src="assets/contact.jpg" alt="background image">
<div id="sprite_contact" class="sprite_contact"></div>

CSS

#sprite_contact{
max-width: 684px;
background: url('sprite_contact.png');}

.sprite_contact{
width: 100%;
height: 128px;
top: 0;
position: absolute;
margin: 0 0 0 27%;
background-size: cover;}

Upvotes: 2

Views: 1118

Answers (4)

user2868232
user2868232

Reputation:

I've managed to make my sprite fully responsive. For this I didn't use any slicing (photoshop) or javascript. Also notice how the sprites are positioned absolute and yet still responsive according the background.

For a better understanding of this process, please see the following link: http://brianjohnsondesign.com/unlisted/demos/responsivesprite/

Also see my link in order to see how it looks on my website: http://demo.chilipress.com/epic3/ Should my link not work anymore, try the first link above.

See here the CSS and HTML

#sprite1_contact{
background-image: url('sprite_contact.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}

#sprite2_contact {
background-image: url('sprite_contact.png');
width: 27.5%;
height: 0;
padding-bottom: 28%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}

HTML

        <div id="sprite1_contact"></div>
        <div id="sprite2_contact"></div>

Upvotes: 1

user2567536
user2567536

Reputation: 237

I suggest you would be slicing each layers separately.

as from what I can see, we can slice it with the following:

a. wall - make it as your body background repeat (x and y)

enter image description here

b. floor - make this as background of a div, position it absolute, anchored to bottom and repeat-x, and center center position (z-index:1) and width 100%

enter image description here

c. curtains right - make this as background of a div, position it absolute, anchored to top and right (z-index:2)

enter image description here

d. curtains left -make this as background of a div, position it absolute, anchored to top and left (z-index:2)

enter image description here

e. curtains top - make this as background of a div, position it absolute, anchored to top and right and width 100% (z-index:3)

* * This is just to illustrate. This is not sliced properly for I dont have PSD. *

Upvotes: 0

Muhammed Basil
Muhammed Basil

Reputation: 1834

Try this. http://zurb.com/playground/foundation-interchange Really useful stuff. might help.

Upvotes: 0

durgesh.patle
durgesh.patle

Reputation: 720

add following properties to your css:

#sprite_contact {
 max-width: 100%;
 background-repeat: no-repeat;
 background-position: 50% 0%;
 margin-left: 0px;
 }

Upvotes: 0

Related Questions