Zoom and scale css background image

Question

I'd like to zoom and scale in the castle when screen becomes smaller. If I set a fixed height, the background is deformed. What can I try ? JSFIDDLE

<div class="background_cover">
<img src="http://www.cdtl.fr/wp-content/uploads/2015/04/Walt_disney_pictures.jpg">
</div>

.background_cover img {
    height: auto;
    min-width: 100%;
    width: 100%;
    background-attachment: scroll;
    background-size: cover;
    background-repeat: repeat;
}

Thanks!

Answer 1

You are defining background properties, but you don't have a background, you have an image. You can make a little trick with visibility:

 .background_cover { background-image: url(http://www.cdtl.fr/wp-content/uploads/2015/04/Walt_disney_pictures.jpg); background-attachment: scroll; background-size: cover; background-repeat: repeat; } .background_cover img { visibility: hidden; width: 100%; height: auto; } 

 <div class="background_cover"> <img src="http://www.cdtl.fr/wp-content/uploads/2015/04/Walt_disney_pictures.jpg"> </div> 

See your edited fiddle:

https://jsfiddle.net/uro8x66a/1/

Answer 2

Here is another solution, if you have to use the image tag instead of a background. The image scales on hover using the transform property. The container has overflow hidden and crops the image.

.background_cover {
    overflow:hidden;
}
.background_cover img:hover {
    transform: scale(1.1); 
}

I forked your JSFiddle. https://jsfiddle.net/tgLhevrd/1/