I have an APNG and I'm trying to set it as my background image, but the image does not cover the whole background fully

user_17794790 0
Viewed 129

I have an APNG I'm trying to set as a background. I'm using the attribute [ background-image: URL('APNG.png') ]. However, its dimensions don't exactly match the dimensions of the screen window. Consequently, the image ends up being really small or it ends up being too big and clipped. How do I set up my background-image so that it covers the entire background. I am fine with the image being stretched. I just need it to fill up the background at all times without repeat.

Thanks for your help. Sriram

css html
1 Answers

Use the CSS background-size property along with your background-image. Example below:

img {
  border: 2px solid black;
}

.example {
  width: 300px;
  height: 100px;
  border: 2px solid black;
  background-repeat: no-repeat;
  background-position: center;
  
  /* the original image has a size of: 100x100 */
  background-image: url('https://web.archive.org/web/20080420192652im_/http://people.mozilla.com/~dolske/apng/spinfox.png');
}

.ex-1 {
  background-size: 100% 100%; /* or use "contain|cover|auto|....." */
}

.ex-2 {
  background-size: contain;
}

.ex-3 {
  background-size: cover;
}

.ex-4 {
  background-size: auto;
}
<p>Original image</p>
<div><img src="https://web.archive.org/web/20080420192652im_/http://people.mozilla.com/~dolske/apng/spinfox.png" /></div>
<hr />
<p>background-size: 100% 100%</p>
<div class="example ex-1"></div>
<hr />
<p>background-size: contain</p>
<div class="example ex-2"></div>
<hr />
<p>background-size: cover</p>
<div class="example ex-3"></div>
<hr />
<p>background-size: auto</p>
<div class="example ex-4"></div>

user_171828780
Related