I am working on sample blog design and trying to learn css & html with flex and grid. I am trying to set back ground image to the grid 1,3,5 . I tried giving the class and add url with image but unable to do. I have provided my code for your reference. it silly question but with grid I am unable to get it.. Code pen link : code pen link
I tried something like this :
.bg{
background: url(1.jpg);
}
tried to assign this bg class to div but didnt work. I tried removing the back ground color from inner grid but it didnt work.. CSS :
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: sans-serif;
background-color: seashell;
}
#page {
display: flex; /*display:flex; not flexbox */
height: calc( 100vh - 30px);
flex-direction: row; /* Change flex-direction to column*/
}
#sidebar {
margin-left: 2.5rem;
margin-right: 2.5rem;
width: 100px;
}
#content{
flex:1;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: auto;
background-color: #2196F3;
padding:10px;
}
#inner-grid{
flex:1;
display : grid ;
grid-template-rows:2fr 2fr;
grid-gap:5px;
}
#inner-grid > div {
background: lightgreen;
padding: 8px;
border: black;
}
.one {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
display: grid;
}
.bg{
background-image: url(/image1.jpg);
border: crimson;
display: grid;
}
.two {
background-color: blue;
}
.three {
background-color: purple;
}
.box {
background-color: #444;
grid-template-rows: 5;
grid-template-columns: 10;
color: #fff;
border-radius: 5px;
padding: 30px;
font-size: 150%;
}
.nav-list {
background: #5bb1f9;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
align-items: baseline;
}
.nav-item {
list-style: none;
margin-right: 2rem;
text-align: center;
}
.nav-item a {
text-decoration: none;
color: black;
transition: all 200ms ease-in;
text-align: center;
}
.nav-item a:hover {
color: var(--clr-primary-dark);
}
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blog Post</title>
<link rel="stylesheet" href="common.css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
<style>
</style>
</head>
<body>
<div id="header">
<navbar>
<ul class="nav-list">
<li class="nav-item">
<a
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-show-count="false"
>Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item">
<script src="https://platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script>
</li>
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">Article</a></li>
<li class="nav-item"><a href="#">Article</a></li>
<li class="nav-item">Login</li>
</ul>
</navbar>
</div>
<div id="page">
<div id="sidebar">
<div>
My profile
</div>
<div>
My interest
</div>
</div>
<div id="content">
<div class="one">
<div id="inner-grid">
<div>1</div>
<div>2</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div>3</div>
<div>4</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div>5</div>
<div>6</div>
</div>
</div>
</div>
</div>
<div id="footer">
<navbar>
<ul class="nav-list">
<li class="nav-item"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item"> <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
<li class="nav-item"><a href="#">footer 1</a></li>
<li class="nav-item"><a href="#">footer 2</a></li>
<li class="nav-item"><a href="#">footer 3</a></li>
</ul>
</navbar>
</div>
</body>
</html>
assign bg class to div(1 , 3, 5) and remove the back ground color from inner grid :)
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: sans-serif;
background-color: seashell;
}
#page {
display: flex; /*display:flex; not flexbox */
height: calc( 100vh - 30px);
flex-direction: row; /* Change flex-direction to column*/
}
#sidebar {
margin-left: 2.5rem;
margin-right: 2.5rem;
width: 100px;
}
#content{
flex:1;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: auto;
background-color: #2196F3;
padding:10px;
}
#inner-grid{
flex:1;
display : grid ;
grid-template-rows:2fr 2fr;
grid-gap:5px;
}
#inner-grid > div {
/*background: lightgreen;*/
padding: 8px;
border: black;
}
.one {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
display: grid;
}
.bg{
background-image: url('https://picsum.photos/200/300') !important;
background-repeat: no-repeat;
background-size: cover;
border: crimson;
display: grid !important;
}
.two {
background-color: blue;
}
.three {
background-color: purple;
}
.box {
background-color: #444;
grid-template-rows: 5;
grid-template-columns: 10;
color: #fff;
border-radius: 5px;
padding: 30px;
font-size: 150%;
}
.nav-list {
background: #5bb1f9;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
align-items: baseline;
}
.nav-item {
list-style: none;
margin-right: 2rem;
text-align: center;
}
.nav-item a {
text-decoration: none;
color: black;
transition: all 200ms ease-in;
text-align: center;
}
.nav-item a:hover {
color: var(--clr-primary-dark);
}<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blog Post</title>
<link rel="stylesheet" href="common.css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
<style>
</style>
</head>
<body>
<div id="header">
<navbar>
<ul class="nav-list">
<li class="nav-item">
<a
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-show-count="false"
>Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item">
<script src="https://platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script>
</li>
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">Article</a></li>
<li class="nav-item"><a href="#">Article</a></li>
<li class="nav-item">Login</li>
</ul>
</navbar>
</div>
<div id="page">
<div id="sidebar">
<div>
My profile
</div>
<div>
My interest
</div>
</div>
<div id="content">
<div class="one">
<div id="inner-grid">
<div class="bg">1</div>
<div>2</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div class="bg">3</div>
<div>4</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div class="bg">5</div>
<div>6</div>
</div>
</div>
</div>
</div>
<div id="footer">
<navbar>
<ul class="nav-list">
<li class="nav-item"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item"> <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
<li class="nav-item"><a href="#">footer 1</a></li>
<li class="nav-item"><a href="#">footer 2</a></li>
<li class="nav-item"><a href="#">footer 3</a></li>
</ul>
</navbar>
</div>
</body>
</html>