html – Add responsive overlay inside background image


I’m new to CSS and I want to add a responsive overlay inside background image. So I try
Fiddle

HTML:

<div class="MyClass__background">
   <div class="MyClass__program--overlay">
     <div class="MyClass__program--overlay-content">
       <div class="MyClass__program--info">
         <p class="MyClass__brandText PoultryMonthlyReport__program--content-headerText">Test</p>
         <p class="MyClass__program--content-subText">Programs
         </p>
         <p class="MyClass__boldText PoultryMonthlyReport__program--content-text">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
         </p>
         <br />
         <br />
         <p class="MyClass__program--content-text">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
         </p>
       </div>
       <div class="MyClass__program--media">
         <img src="/img/poultry-monthly-report/programs/poultry_program.png" />
         <div class="vr"></div>
       </div>
     </div>
   </div>
 </div>

SCSS:

.MyClass{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  &__background {
    background-image: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_509107562_2000133320009280346_351827.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
  }
  
 &__program--overlay {
    position: absolute;
    transform: translateY(40%);
    background-color: #ffffff;
    opacity: 0.7;
   
    display: grid;
    grid-template-columns: auto auto;
  }
  
 &__program--overlay-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4rem;
    max-width: 100%;
    flex: 0 50px;
  }
  
 &__program--content-headerText {
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 7px;
    margin-bottom: 2rem;
  }
  
  &__program--content-subText {
    color: #000000;
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
  }
  
  &__program--content-text {
    color: #000000;
    font-size: 1.4rem;
    margin-bottom: 2rem;
    line-height: 40px;
  }
  
 &__test {
    display: none;
  }
  
 &__boldText {
    font-weight: 600;
  }
  
  &__program--info {
    flex: 45%;
  }
  
  &__program--media {
    flex: 55%;
  }
}

But for some reason, I can not align in the center of the image, it just goes out of margins, I want to align it with some padding in all directions (no cover 100% of background photo)

I try to change the margin of overlay content, but it just expands in all directions it does not care the parent (background image)

How can I solve this? Regards

image



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here