CODEWITHSUNDEEP
csscss-grid
solutions
solutions

Reputation: 181

how to add background image to a grid cell?

I am trying to add background image to a grid cell (a div element) which comes in a display:grid container (a section element) . I am trying background-image: url("background.png") but it is not working. I don't know why. I have tried and checked multiple times but of no use. Need some help here Thanks in advance

Here is the HTML and CSS Code:

<!doctype HTML>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" type="image/png" href="images/fav.ico" sizes="32x32" />
</head>

<body>

<section id="the-grid">
  <div id="header">
      Welcome
  </div>

  <div id="nav">
    Navigation
  </div>

  <div id="main">
    Main Content
  </div>

  <div id="footer">
    Footer
  </div>
</section>
</body>
</html>

CSS:

    /*Root Elements and Border Box Fix*/
html {
  height: 100;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body{
  font-family: "segoe ui", helvetica;
  margin: 0;
}
#the-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
  "header header header header header"
  "nav main main main main"
  "nav main main main main"
  "nav main main main main"
  "nav main main main main"
  "footer footer footer footer footer";
}

/* Grid Cells */
#header{
  background-image: url("nav.png");
  grid-area: header;
  text-align: center;
}
#nav{
  grid-area: nav;
}
#main{
  grid-area: main;
}
#footer{
  grid-area: footer;
  text-align: center;
}

Upvotes: 2

Views: 24762

Answers (2)

Amir Danish
Amir Danish

Reputation: 444

Set a fallback color, So if your background image is not accessible/url is wrong then the call back color will automatically display as the background. this is also good if browser doesn’t support the background-image or url it will automatically assign the fallback color as background-color. as I shows in the code and check the CSS parts #header, #nav, #main.

/*Root Elements and Border Box Fix*/
html {
  height: 100;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body{
  font-family: "segoe ui", helvetica;
  margin: 0;
}
#the-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
  "header header header header header"
  "nav main main main main"
  "nav main main main main"
  "nav main main main main"
  "nav main main main main"
  "footer footer footer footer footer";
}

/* Grid Cells */
#header{
  background: url("nav.png") green;
  grid-area: header;
  text-align: center;
}
#nav{
  grid-area: nav;
  background: url("https://pure.wallpapergk.com/download/smiley_curly_hair_blue_eyes_cute_girl_in_blur_background_wearing_yellow_dress_cute.jpg") yellow;
  background-repeat: no-repeat;
  background-size: cover;
}
#main{
  grid-area: main;
  background: url("https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero.jpg") blue;
  color:white;
}
#footer{
  grid-area: footer;
  text-align: center;
}
<!doctype HTML>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" type="image/png" href="images/fav.ico" sizes="32x32" />
</head>

<body>

<section id="the-grid">
  <div id="header">
      Welcome
  </div>

  <div id="nav">
    Navigation
  </div>

  <div id="main">
    Main Content
  </div>

  <div id="footer">
    Footer
  </div>
</section>
</body>
</html>

Upvotes: 1

Harley
Harley

Reputation: 395

It works for me, but I didn't used a shortened URL background-image. Is it possible that the image you're trying to pick up is in a different directory?

   /*Root Elements and Border Box Fix*/
html {
  height: 100;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body{
  font-family: "segoe ui", helvetica;
  margin: 0;
}
#the-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
  "header header header header header"
  "nav main main main main"
  "nav main main main main"
  "nav main main main main"
  "nav main main main main"
  "footer footer footer footer footer";
}

/* Grid Cells */
#header{
  background-image: url("https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg");
  grid-area: header;
  text-align: center;
}
#nav{
  grid-area: nav;
}
#main{
  grid-area: main;
}
#footer{
  grid-area: footer;
  text-align: center;
}
<section id="the-grid">
  <div id="header">
      Welcome
  </div>

  <div id="nav">
    Navigation
  </div>

  <div id="main">
    Main Content
  </div>

  <div id="footer">
    Footer
  </div>
</section>

Upvotes: 0

Related Questions