↓Skip to main content

Playing with images in CSS: Background Edition

·1 min
Table of Contents

There are two types of images that can be used when creating images in webdev, the <img> element method as before and the background-image method from CSS.

The background in CSS, cannot be read by the DOM and also has no SEO influence, this makes background more suitable as an image for background or other decorative purposes.

Here we will use the similar image and code as before:

<style>
  body {
    height: 100vh;
    display: flex;
    align-items: center;
  }

  .box {
    background-image: url('assets/mbti-5.png');
    margin: 0 auto;
    width: 500px;
    height: 300px;
    background-color: rgb(211, 232, 255);
  }
</style>
<body>
  <div class="box"></div>
</body>

Cover
Cropped image

Background repeat #

If the image is smaller than the container, it will be repositioned like tiles while maintaining the aspect ratio.

.box {
  background-repeat: repeat;
}

Repeat
Repeates just as tiles

Set background-repeat to no-repeat to remove the tiled repetitions.

Background Size #

background-size is just like object-fit basically. But background-size only has 2 values contain and cover which are both identical to object-fit in functionality.

bg-size1
background-size: contain

bg-size2
background-size: cover

Background Position #

The background-position is just the same as the object-position, and the value is the same too.

bg-size2
background-position: 20%

Unlike object-position, the default value of background-position is 0% 0%.