Making background image and items in grid responsive - html

Question

Im new to HTML/CSS & grid
I want to make the background image and the items in the grid responsive.
Could you'll please let me know what im doing wrong or help me out
.angry-grid {
max-width: 1200px;
}
.charCoal-items{
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-gap: 10px;
width: 100%;
height: 100%;
background: url("https://cdn.shopify.com/s/files/1/0130/1797/2795/files/shilajit-is-ayurvedic-medicine-found-primarily-rocks-himalayas-selective-focus_466689-90021_1.png?v=1669684516");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.charCoal-items p{
width: 100%;
height: auto;
}
#item-1 {
background-color: rgba(187, 170, 126, 0.7);
border-radius: 50px;
margin: auto;
padding: 0 15px;
grid-row-start: 4;
grid-column-start: 1;
grid-column-end: 2 ;
}
#item-2 {
background-color: rgba(187, 170, 126, 0.7);
border-radius: 50px;
margin: auto;
padding: 0 15px;
width: 80%;
grid-row-start: 1;
grid-column-start: 2;
grid-column-end:4 ;
}
#item-1 p,
#item-2 p{
font-family: 'Nunito Sans';
font-style: normal;
text-align: center;
color: #000000;
}
#item-2 p:first-child,
#item-1 p:first-child{
padding-top: 15px;
font-weight: 900;
font-size: 25px;
line-height: 24px;
}
#item-2 p:last-child,
#item-1 p:last-child{
font-weight: 400;
font-size: 25px;
line-height: 34px;
}
/* #media all and (max-width: 1199px){
.charCoal-items {
grid-template-rows: repeat(4, 1fr);
}
} */
#media all and (max-width: 799px) {
.charCoal-items {
}
}
.charCoal-items p{
width: 100%;
height: auto;
}
}
#media all and (max-width: 599px){
.charCoal-items p{
width: 100%;
height: auto;
}
}
<div class="angry-grid">
<div class="charCoal-items">
<!-- <div id="item-0">
</div> -->
<div id="item-1"><p>Ayurvedic Rasa (Taste) & Flavor Profile: </p>
<p>Astringent, Savory, Bitter, Mildly Smokey, and Earthy flavor.</p>
</div>
<div id="item-2"><p>Dosha Compatibility: </p>
<p>With inherent heating properties, it helps reinvigorate a sluggish Kapha dosha and ground the erratic nature of the Vata dosha, though it can aggravate the Pitta dosha.</p></div>
</div>
</div>
Below is what im trying to achieve
Here is the codepen: https://codepen.io/pen/tour/welcome/start
If any website explanation link will also be helpful
.angry-grid {
max-width: 1200px;
}
.charCoal-items{
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-gap: 10px;
width: 100%;
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="angry-grid">
<div class="charCoal-items">
<!-- <div id="item-0">
</div> -->
<div id="item-1"><p>Ayurvedic Rasa (Taste) & Flavor Profile: </p>
<p>Astringent, Savory, Bitter, Mildly Smokey, and Earthy flavor.</p>
</div>
<div id="item-2"><p>Dosha Compatibility: </p>
<p>With inherent heating properties, it helps reinvigorate a sluggish Kapha dosha and ground the erratic nature of the Vata dosha, though it can aggravate the Pitta dosha.</p></div>
</div>
</div>
Thank you for your help

Answer 1

You can just add background-size: auto; or background-size: cover;
.angry-grid {
max-width: 1200px;
}
.charCoal-items{
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-gap: 10px;
width: 100%;
height: 100%;
background: url("https://cdn.shopify.com/s/files/1/0130/1797/2795/files/shilajit-is-ayurvedic-medicine-found-primarily-rocks-himalayas-selective-focus_466689-90021_1.png?v=1669684516");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-size: auto;
}
.charCoal-items p{
width: 100%;
height: auto;
}
#item-1 {
background-color: rgba(187, 170, 126, 0.7);
border-radius: 50px;
margin: auto;
padding: 0 15px;
grid-row-start: 4;
grid-column-start: 1;
grid-column-end: 2 ;
}
#item-2 {
background-color: rgba(187, 170, 126, 0.7);
border-radius: 50px;
margin: auto;
padding: 0 15px;
width: 80%;
grid-row-start: 1;
grid-column-start: 2;
grid-column-end:4 ;
}
#item-1 p,
#item-2 p{
font-family: 'Nunito Sans';
font-style: normal;
text-align: center;
color: #000000;
}
#item-2 p:first-child,
#item-1 p:first-child{
padding-top: 15px;
font-weight: 900;
font-size: 25px;
line-height: 24px;
}
#item-2 p:last-child,
#item-1 p:last-child{
font-weight: 400;
font-size: 25px;
line-height: 34px;
}
/* #media all and (max-width: 1199px){
.charCoal-items {
grid-template-rows: repeat(4, 1fr);
}
} */
#media all and (max-width: 799px) {
.charCoal-items {
}
}
.charCoal-items p{
width: 100%;
height: auto;
}
}
#media all and (max-width: 599px){
.charCoal-items p{
width: 100%;
height: auto;
}
}
<div class="angry-grid">
<div class="charCoal-items">
<!-- <div id="item-0">
</div> -->
<div id="item-1"><p>Ayurvedic Rasa (Taste) & Flavor Profile: </p>
<p>Astringent, Savory, Bitter, Mildly Smokey, and Earthy flavor.</p>
</div>
<div id="item-2"><p>Dosha Compatibility: </p>
<p>With inherent heating properties, it helps reinvigorate a sluggish Kapha dosha and ground the erratic nature of the Vata dosha, though it can aggravate the Pitta dosha.</p></div>
</div>
</div>