CODEWITHSUNDEEP
twitter-bootstrapcss
prcvcc
prcvcc

Reputation: 2230

how to make background image zoomed on small devices

I'm using this for a site I'm writing

.homepage{
 background-image: url(/wp-content/themes/ep/img/_.png);
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-repeat:no-repeat;
 background-position:0px @blackbar_height;
}

It works fine on big screens, but I'd like to use media query in order to be able to zoom out a certain part of the background image (let's say I'd like to focus the center part) when it's either phone or tablet.

Upvotes: 0

Views: 99

Answers (3)

jayesh sojitra
jayesh sojitra

Reputation: 19

.zoom {
                -moz-transform:scale(2); 
                -webkit-transform:scale(2);
                -o-transform:scale(2);
            }

Upvotes: 0

Imran Bughio
Imran Bughio

Reputation: 4941

Use:

background-size: 150% auto; // Yes background size can be increased more than 100%.

You can use background-position to focus on a certain part.

Upvotes: 1

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

You can set the background-size the way you want and set background-position: center to focus it to the center.

e.g.

@media only screen and (max-width: 320px) {
  .homepage {
    background-size: 640px auto;
    background-position: center;
  }
}

Upvotes: 1

Related Questions