Backgrounds

<h2>Image Gallery with different Background Positions</h2>
<div class="image-gallery">
  <div class="image" id="image-top-left"></div>
  <div class="image" id="image-top-center"></div>
  <div class="image" id="image-top-right"></div>
  <div class="image" id="image-center-left"></div>
  <div class="image" id="image-center"></div>
  <div class="image" id="image-center-right"></div>
  <div class="image" id="image-bottom-left"></div>
  <div class="image" id="image-bottom-center"></div>
  <div class="image" id="image-bottom-right"></div>
</div>

body {
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}
h2 {
  text-align: center;
  font-family: 'Oswald', sans-serif;
}
.image-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.image {
  background-image: url('https://ik.imagekit.io/d9mvewbju/Course/BigbinaryAcademy/butterflies-bg-pattern_oVY9C5YmS.jpeg');
  background-repeat: no-repeat;
  width: 320px;
  height: 200px;
  border: 1px solid #ccc;
}


body {
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}
h2 {
  text-align: center;
  font-family: 'Oswald', sans-serif;
}
.image-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.image {
  background-image: url('https://ik.imagekit.io/d9mvewbju/Course/BigbinaryAcademy/butterflies-bg-pattern_oVY9C5YmS.jpeg');
  background-repeat: no-repeat;
  width: 320px;
  height: 200px;
  border: 1px solid #ccc;
}
#image-top-left {
  background-position: top left;
}
#image-top-center {
  background-position: top center;
}
#image-top-right {
  background-position: top right;
}
#image-center-left {
  background-position: center left;
}
#image-center {
  background-position: center center;
}
#image-center-right {
  background-position: center right;
}
#image-bottom-left {
  background-position: bottom left;
}
#image-bottom-center {
  background-position: bottom center;
}
#image-bottom-right {
  background-position: bottom right;
}
