CODEWITHSUNDEEP
cssresponsive-design
user2989236
user2989236

Reputation: 71

How to ignore image resize on zoom in?

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.

Upvotes: 0

Views: 242

Answers (2)

user2989236
user2989236

Reputation: 71

Alright, I managed to fix my issue by adding "background-size: cover;" which apparently auto fills the entire div with my image.

Here is the final code:

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

Upvotes: 0

Joshua Nelson
Joshua Nelson

Reputation: 581

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

Upvotes: 1

Related Questions