background-size

Property Variable Name

background-size

Available Values for background-size

auto|200px|100px 100px|cover|contain|initial|inherit

Example using background-size auto

Here is an example using background-size:auto;

Code

<style>
.demo-box-1 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
  background-size:auto;
}
</style>
<h2>Example using background-size auto</h2>
<p>Here is an example using <code>background-size:auto;</code></p>
<div class='demo-box-1'>
</div>

Example using background-size 200px

Here is an example using background-size:200px;

Code

<style>
.demo-box-2 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
  background-size:200px;
}
</style>
<h2>Example using background-size 200px</h2>
<p>Here is an example using <code>background-size:200px;</code></p>
<div class='demo-box-2'>
</div>

Example using background-size 100px 100px

Here is an example using background-size:100px 100px;

Code

<style>
.demo-box-3 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
  background-size:100px 100px;
}
</style>
<h2>Example using background-size 100px 100px</h2>
<p>Here is an example using <code>background-size:100px 100px;</code></p>
<div class='demo-box-3'>
</div>

Example using background-size cover

Here is an example using background-size:cover;

Code

<style>
.demo-box-4 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
  background-size:cover;
}
</style>
<h2>Example using background-size cover</h2>
<p>Here is an example using <code>background-size:cover;</code></p>
<div class='demo-box-4'>
</div>

Example using background-size contain

Here is an example using background-size:contain;

Code

<style>
.demo-box-5 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
  background-size:contain;
}
</style>
<h2>Example using background-size contain</h2>
<p>Here is an example using <code>background-size:contain;</code></p>
<div class='demo-box-5'>
</div>

Example using background-size initial

Here is an example using background-size:initial;

Code

<style>
.demo-box-6 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
  background-size:initial;
}
</style>
<h2>Example using background-size initial</h2>
<p>Here is an example using <code>background-size:initial;</code></p>
<div class='demo-box-6'>
</div>

Example using background-size inherit

Here is an example using background-size:inherit;

Code

<style>
.demo-box-7 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
  background-size:inherit;
}
</style>
<h2>Example using background-size inherit</h2>
<p>Here is an example using <code>background-size:inherit;</code></p>
<div class='demo-box-7'>
</div>