Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to ignore image resize on zoom in?

How to ignore image resize on zoom in?

Problem

How would I go about ignoring to Resize image when zooming in on the website just like on this website: http://antares.pcadviser.ro/

My website: http://vizz.tv/

I am using this right now but the image resizes when scrolling in:

#headerImage {
    height: 750px; 
    width: 100%;
    background: url(2.jpg) no-repeat;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -50px;
}

I would really appreciate if someone could help me solve this.

Problem courtesy of: user2989236

Solution

Try

#headerImage {
background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

From css tricks. There's a demo too

Solution courtesy of: Joshua Nelson

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to ignore image resize on zoom in?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×