How do I put an image in a grid?

HTML-CSS
1

I am using a HTML window and CSS window. The grid I setup in the CSS window and it shows promise. I then setup grid-template-areas as such…

grid-template-areas:

    "header header header"
    "advert content content"
    "footer footer footer";

And now I want to put in an image to span the entire header area. I can figure out how to put in an image in the HTML window, but it seems sorta wrong; like that it should be in the CSS window. Anyways how would I go about using an image to span the header area or just be a background for the main text about my tribute project. Here is my progression so far.

This is the HTML window.

<main id="main">
  <title>Volodomyr Zelenskyy</title>
  
  <div id="img-div"></div>
  <div class="item1"><h1>A Tribute to Volodymyr Zelenskyy</h1></div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
</main>

Here is the CSS window.

body {
  font-family: system-ui;
  background-color: gray;
  width: 100%;
}

h1 {
  text-align: center;
  color: white;
}
#main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:

    "header header header"
    "advert content content"
    "footer footer footer";
}

#img-div {
  
  background-color: pink;
  color: white; 
}

.item1 {
  grid-area: header;
  background-color: salmon;
}

.item2 {
  grid-area: advert;
  background-color: purple;
}

.item3 {
  grid-area: content;
  background-color: blue;
}

.item4 {
  grid-area: footer; 
  background-color: orange;
}

Any help much appreciated.

2

Hello @Excelsior. To make the image span accross the title, you’d add the following CSS properties, to .item1:

.item1 {
  grid-area: header;
  background-color: salmon;
  background-image: url( /* URL of background image (enclosed in quotes) */ );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Here’s what each property does:

  • background-image — The purpose is self-explanatory, but it’s worth mentioning that when using this property, you should still use the background-color property because some older browsers don’t support background images.
  • background-size — Defines the size of the background. The size can be defined in regular CSS length units (px, %, em, etc.), or it can have the value contain or cover. contain stretches or shrinks the image so that the entire image displays in the container (which can result in the image not filling the entire container), and cover expands the image so that it fills the entire container (which can result in part of the image not being visible).
  • background-position — Determines the background’s position within the container. This property can take a variety of values, but the value center positions the background so that it’s in the center of the container, both vertically and horizantally. This guarentees that the center of the image, which is (hopefully) the most important part of the image will be visible even if the entire image doesn’t display.
  • background-repeat — By default, background images will repeat if they’re smaller than their container, but setting background-repeat to no-repeat prevents this behavior. background-repeat can also be set to repeat-x and repeat-y, which only allows it to repeat horizantally or vertically.

I hope that this answers your question. Tell me if you have any other questions or concerns!

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.