CODEWITHSUNDEEP
cssimagebackgroundresizezooming
andrew anderson
andrew anderson

Reputation: 393

Prevent background image from zooming

I am looking to achieve a similar effect to this website i found: http://www.august.com.au/

When on this website if you zoom in/or out ctrl +/- the background doesn't change. Only the content zooms.

I want to be able to set a background image for my website and have it so that the background image always fills the screen regardless of the screen resolution or zoom options.

I understand that you can use the width:100% to make it fill the page, however my understanding is that this is applied as the page is loaded and if the user zooms after loading the image will not re-sized.

Does any one have any suggestions on where to start with this one? I have tried search the web for information but wasn't able to find very much.

Also i am guessing this will be achieved using something like JavaScript and not css??

Upvotes: 0

Views: 13289

Answers (2)

user3231691
user3231691

Reputation: 23

This worked for me in chrome, firefox

.someImage {
    width: 7%;
    height: 0;
    padding-bottom: 7%;
    background-image: url('../img/myImage.png');
    background-repeat: no-repeat;
    position: fixed;
    bottom: 5%;
    left: 5%;
    background-size: 100% 100%;
}

Upvotes: 2

andrew anderson
andrew anderson

Reputation: 393

Turns out there is a nice Jquery plugin for this:

http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

Seems to work as i expected.

Upvotes: 0

Related Questions