Background image won't scale to fit page

Question

I'm trying to get this background image to reapply itself to cover a div container. I want it to remain the same size so that it doesn't become 'zoomed in' when the screen scale changes. However, at present, it's just zooming in and not remaining the same size:

.top-container {
  background:      background: -webkit-linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: -o-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: -moz-linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74     60%, #e6739f 60%);
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.top-container:before {
  content: "";
       background: url("./../images/skulls.PNG") no-repeat center center fixed;
       background-repeat: no-repeat;
       background-size: cover;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
       background-position: center;
       position: absolute;
       top: 0px;
       right: 0px;
       bottom: 0px;
       left: 0px;
       opacity: 0.2;
       width: 100%;
       height: 100%;
}

Any advice?

EDIT: The image is already really small, so what I want is for it to remain the same size and just keep reapplying itself to fit the div. But instead of doing that, it's just zooming in, which distorts the image.

Does this mean you want it to be very small so that it fits into even the tiniest screen size? That would be really small.Could you explain a bit more what you want. — A Haworth, Dec 12 '20 at 13:45
Yes. The image is already really small, so what I want is for it to remain the same size and just keep reapplying itself to fit the div. But instead of doing that, it's just zooming in, which distorts the image. — mikailbadoula, Dec 12 '20 at 14:13
By "re-applying itself", do you mean it should repeat itself? Or should the one image not grow, but be in the center? — Johannes, Dec 12 '20 at 14:22
I do. But I avoided using that word because I tried repeating it as well and that also didn't work! — mikailbadoula, Dec 12 '20 at 14:24
If you want it to repeat, you should use `background-repeat: repeat` and *not* use `background-size: cover` — Johannes, Dec 12 '20 at 14:26

score 0 · Accepted Answer · answered Dec 12 '20 at 14:36

There are a couple of problems, the skull is not repeating, it is covering the whole div which means it looks 'fuzzy' as it's basically a small image. Also, be aware that IOS does not cope with background attachment fixed.

Taking out the no-repeats (there are several) and the fixed and just letting the skull show at its natural size we get an effect as in this snippet:

.top-container {
  background:      background: -webkit-linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: -o-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: -moz-linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74     60%, #e6739f 60%);
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
}

.top-container:before {
  content: "";
       background: url("https://i.stack.imgur.com/B9QHI.png");
       position: absolute;
       top: 0px;
       right: 0px;
       bottom: 0px;
       left: 0px;
       opacity: 0.2;
       width: 100%;
       height: 100%;
}

<div class="top-container"></div>

That's it - thanks a lot! I'm a total noob to CSS and I'd been struggling for ages trying to figure that out. Much appreciated - I will mark this the most useful response. — mikailbadoula, Dec 12 '20 at 17:16
Glad it worked. There's a lot of flexibility around background images which can be very useful. — A Haworth, Dec 12 '20 at 17:26

Background image won't scale to fit page

1 Answers1