Html - Add background image to bottom of flex div

MiguelMoura
June 20, 2023
208 views
0 votes
2 Answers

I am trying to add a bottom background to a Flex div so that it becomes like this:

The bottom background is the following cut:

However the bottom background is not showing.

.group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.block {
  flex: 25%;
}

@media only screen and (max-width: 600px) {
  .block {
    flex: 50%;
  }
}

.main, .block {
  display: flex;
  flex-grow: 1;
}

.main {
  padding: 10px;
}

.text {
  flex-grow: 1;
  background-color: green; 
  padding: 10px;
}

.text::after {
  background: transparent url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
}

<div class="group">
    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

How to to this?

Tags: css html

Answers

You forgot to add position and content for after and .text:after must have height and width to display your background image.

You can check code below.

There is another way using clip-path for more visit link https://css-tricks.com/exploring-the-css-paint-api-rounding-shapes/

.group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.block {
  flex: 25%;
}

@media only screen and (max-width: 600px) {
  .block {
    flex: 50%;
  }
}

.main, .block {
  display: flex;
  flex-grow: 1;
}

.main {
  padding: 10px;
}

.text {
  flex-grow: 1;
  background-color: green; 
  padding: 10px;
  position:relative;
}

.text::after {
  width:100%;
  content:'';
  left:0;
  height:35px;
  bottom:-25px;
  position:absolute;
  background: transparent url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
}

<div class="group">
    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

Use position, content, padding-top, margin-bottom.

it’s too wordy to explain you can ask me what i don’t understand

.group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.block {
  flex: 25%;
}

@media only screen and (max-width: 600px) {
  .block {
    flex: 50%;
  }
}

.main, .block {
  display: flex;
  flex-grow: 1;
}

.main {
  padding: 10px;
}

.text {
  flex-grow: 1;
  background-color: green; 
  padding: 10px;
  /* add */
  position: relative;
  margin-bottom: 18.83408071748879%;
  /* /add */

}

.text::after {
  /* add */
  content: "";
  width: 100%;
  padding-top: 18.83408071748879%;
  position: absolute;
  top: 100%;
  left: 0;
  /* /add */
  background: transparent url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
}

<div class="group">
    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Add background image to bottom of flex div

Answers