背景图像不会缩放以适合页面

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.

Answer 1

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>