css background size cover

Question

Hei. This sounds simple but it's not if you deal with dynamic content. I have a container with a background image that covers the container. On hover the background-size should be 2% bigger (or the other way around. doesn't really matter) Is there any way to achieve this?

.container
   background-size: 102% !important //here it should be cover + 2%
   background-position: center
   +transition(all 0.3s ease-in-out)
.container:hover
   background-size: 100% !important //here it should be cover 

Answer 1

I'm afraid you cannot manipulate the cover property with calc or anything of that sort to achieve your 102% manipulation. The way I see it you have two options. One is to use JavaScript and mimic cover's behavior, the other is to set the image to a pseudo element within this container. Something like this.

.container {
   position: relative;
   overflow: hidden;
   width: ###;
   height: ###;
}

.container:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: url('bg.png') cover center;
}

.container:hover:before {
  transform: scale(1.02);
}

It might be a bit of a hassle to fight with the content of your container, however the easiest thing you can do it create another absolutely positioned .content div inside it, that just spans the entire area.

Answer 2

Instead of making it 2% bigger, could you instead just make it a set size. Would be a lot easier to set the size and then you could make it exactly what you want.

EG

background-size: 120px 100px;
background-position: center;

etc