CODEWITHSUNDEEP
htmlcssresponsive-designcss-sprites
Maverick
Maverick

Reputation: 11

Sprite Image Resize - Make Responsive when resizing browser

I am having issues making the sprite I have resize, when I resize browser window. The remiander of the template is repnsive including the Nav Menu.

The sprite remains fixed and sticks out of the page when resizing.

How would I make it size like the rest of the template (removing the width scroll bars)

If you just remove the sprite everything displays correctly.

I have created a Fiddle but its not showing the when I click results.

I have uploaded the page to here:

Test Page

Thank you.

Upvotes: 1

Views: 2700

Answers (4)

user2868232
user2868232

Reputation:

So I was stuck with the same question and noticed the answer was not yet given here. Here is the answer:

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

pareshm
pareshm

Reputation: 4984

Perfect Solution I have Got U can Use I have used This solution And It works Fine on all browser except Android Browser

.playerSp { display: block; background: url(blue_sprite.png) no-repeat; } .next-button { background-position: -83px -6px; width: 41px; height: 46px; } 

var abc=(screen.availHeight+screen.availWidth);
    $( window ).resize(function() {
    var aaa=($(document).height()+$(document).width());
    scale=abc/aaa;

      $('#playerContainer').css({ 'zoom': (1/scale), '-moz-transform': 'scale('+(1/scale)+')', '-moz-transform-origin': '0 0 ' });
    });
</script>

Upvotes: 2

stuartdotnet
stuartdotnet

Reputation: 3034

Shrink your sprite to a smaller set size by adjusting its background-position and background-size css properties in a media query. 

background-position: 0 -135px;
background-size: 170px 190px;

Those number are an example, you have to play with them to get it to line up with your sprite, which can be confusing as the image can disappear. Recommend adjusting them bit by bit in developer tools.

You can also use percentages to allow for a more responsive resizing, although this can get tricky too.

Note, background-size doesn't work on IE8 but neither do media queries....

Upvotes: 0

Juan Antonio Orozco
Juan Antonio Orozco

Reputation: 750

your sprites have fixed height: 632px; & width: 1163px; if you want them to resize youshould add at least a min-width and a min-heigth properties

example, if you want your sprites resize to a minimum of 10 px lets say you would add those properties to your code

#sprite-main-v2 {
height: 632px;
width: 1163px;
min-height:10px; /*added this line*/
min-width:10px; /*and this line*/
background-image: url(../images/landing-page/landing-sprite-5.png);
background-repeat: no-repeat;
background-position: 0px -700px;
cursor: pointer;
}

you can also use media queries to change the image acording to screen width or height: example:

@media screen and (max-width: 980px) {

    #sprite-main-v2 {
        height: 100 px; /*new size*/
        width:  100 px; /*new size, value just as example*/
        background-image: url(../images/landing-page/landing-sprite-5-small.png);/*smaller image*/
    }
}

Upvotes: 0

Related Questions