I need to disable background-color behind text

Question

I am using Css3. I am trying to learn how to achieve div transparent background in order I could see background image of the div located behind it. (background-color: transparent !important => does not help). Is it event possible to achieve it?

There is a picture here describing my problem:

html code:

     <div>
        <div className='body'>
          <div>
            <h1>Some title</h1>
          </div>
          <div /> // here is set the background image
        </div>
        <div className='text'>
          Pellentesque habitant morbi tristique senectus et netus et
          malesuada fames ac turpis egestas. Pellentesque arcu. Ut tempus
          purus at lorem. Nam quis nulla. Aenean placerat. Mauris suscipit,
          ligula sit amet pharetra semper, nibh ante cursus purus, vel
          sagittis velit mauris vel metus. Fusce tellus. Praesent id justo
          in neque elementum ultrices. Sed ut perspiciatis unde omnis iste
          natus error sit voluptatem accusantium doloremque laudantium, totam.

          architecto beatae vitae dicta sunt explicabo. Nulla est. Curabitur
          bibendum justo non orci. Aenean placerat. Praesent in mauris eu tortor
          porttitor accumsan. Maecenas libero. Phasellus enim erat, vestibulum
          vel, aliquam a, posuere eu, velit. Etiam commodo dui eget wisi. Fusce
          dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Nemo enim
        </div>
      </div>

css code:

.body {
    display: flex;

    div {          
      &:first-child {
        flex-basis: 45%;        

        h1 {
          font-size: 48px;
        }
        h4 {
          text-transform: uppercase;
          color: #0F33FF;
        }
      }
      
      &:nth-child(2) {
        flex-basis: 55%;
        background-image: url('../img/notebook-smaller.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
        
      }      
    }
  }


.text {
  background-color: transparent !important;
}

Does this help? https://stackoverflow.com/questions/11807286/how-to-make-div-background-color-transparent-in-css — Kylaaa, Jul 31 '21 at 15:17

Amini · Accepted Answer · 2021-07-31T16:13:44.340

The background color of a text is transparent or inherit by default. That means you might apply a white background color to your text and that's why you see a white background color, anyway you can use background-color: transparent !important; to remove the background.
Second of all, I set the position of the container relative and the text, absolute. This is also helpful.

.container {
  position: relative;
  top: 0;
  left: 0;
  width: 300ox;
  height: 300px;
  background: url(https://picsum.photos/300/300) center/cover no-repeat;
}

.container p {
  color: red;
  position: absolute;
  bottom: 0;
  left: 0;
  /* The background-color of a text is transparent or inherit by default */
  background-color: transparent !important
}

<section class='container'>
  <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available</p>
</section>

If this isn't what you want, then share your css code I can't compile you're code. — Amini, Jul 31 '21 at 16:14

Roman Epifanov · Answer 2 · 2021-07-31T15:47:32.997

Best practice use for text specific tags (H1, p and so on), because it is useful for SEO.

SCSS

.body {
    display: flex;
    flex-wrap: wrap;
    position: relative
    
    h1 {
        wdith: 100px;
        font-size: 48px;
    }

    .image {
        width: 100%;
        height: 400px;
        background-image: url("https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg");
        background-repeat: no-repeat;
    }
    .text {
        position: absolute;
        background-color: transparent !important;
        column-count: 2;
        bottom: 0px;
    }
}

HTML

  <div class='body'>
  <h1>Some title</h1>
  <div class="image"></div>
  <div class='text'>
    Pellentesque habitant morbi tristique senectus et netus et
    malesuada fames ac turpis egestas. Pellentesque arcu. Ut tempus
    purus at lorem. Nam quis nulla. Aenean placerat. Mauris suscipit,
    ligula sit amet pharetra semper, nibh ante cursus purus, vel
    sagittis velit mauris vel metus. Fusce tellus. Praesent id justo
    in neque elementum ultrices. Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium, totam.
    architecto beatae vitae dicta sunt explicabo. Nulla est. Curabitur
    bibendum justo non orci. Aenean placerat. Praesent in mauris eu tortor
    porttitor accumsan. Maecenas libero. Phasellus enim erat, vestibulum
    vel, aliquam a, posuere eu, velit. Etiam commodo dui eget wisi. Fusce
    dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Nemo enim
  </div>
</div>

Example

I need to disable background-color behind text

2 Answers2