Question 186494 in Html Question posted in
Some basic documentation can be found here.

Html – Add background image to the bottom of div

I have the following HTML / CSS code:

<div class="tip">
    Some tip text
</div>

div.tip {
   background: green url("green-tip.png") no-repeat center bottom / 100% auto;
   border-radius: 4px;
}

Basically I need to replicate the design:

enter image description here

The green-tip.png is just the pointer in the bottom:

enter image description here

However I get only a rectangle with round corners without the pointer in the bottom.

How to do this?

Tags:

4

Answers


  1. 0

    you can write like this

    <body>
    <div class="tip">
      <p>Some tip text</p>
    </div>
  </body>
  <style>
    div.tip {
      background-image: url("green-tip.png");
      border-radius: 4px;
      display: flex;
      padding-left: 20px;
      background-repeat: no-repeat;
      background-position: left;
    }
  </style>

    enter image description here

    Login or Signup to reply.
  2. 0

    If you want the image to be part of the background as well, a simple (not necessarily most extendable) way of doing this would be to set both as background divs and place them in vertical block together

    CSS

    Here’s your rectangle style class:

    .rounded-top-rectangle {
    width: 100px;
    height: 300px;
    background-color: #f0f0f0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom: 10px;
}

    Here’s your image style class:

    .image-below {
    display: block;
    width: 100px; /* Adjust this to control the size of the image */
    height: auto; 
    background-image: url('green-tip.png'); /* or similar */
    background-size: cover;
    background-repeat: no-repeat; 
}

    HTML

    <div class="rounded-top-rectangle"></div>
<div class="image-below"></div>
    Login or Signup to reply.
  3. 0

    An easy way to do this would be to add another div at the bottom:

    div.tip {
  background: rgb(42, 157, 143);
  border-radius: 18px 18px 0 0;
  height: 100px;
  width: 222px;
  box-sizing: border-box;
  padding: 10px;
}

.bottom {
  background: url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
  height: 42px;
  width: 223px;
}
    <div class="container">
  <div class="tip">
    Some tip text
  </div>
  <div class="bottom">
  </div>
</div>

    Another way, using ::after pseudoelement (useful if you want to use it in several places on your site):

    div.tip {
  background: rgb(42, 157, 143);
  border-radius: 18px 18px 0 0;
  height: 100px;
  width: 222px;
  box-sizing: border-box;
  padding: 10px;
}

.container::after {
  background: url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
  display: block;
  content: "";
  height: 42px;
  width: 223px;
}
    <div class="container">
  <div class="tip">
    Some tip text
  </div>
</div>
    Login or Signup to reply.
  4. 0

    Use multiple background layer:

    div.tip {
  --h: 50px; /* height of the bottom part */

  border-radius: 18px 18px 0 0;
  height: 200px;
  width: 222px;
  padding: 10px;
  background: 
   linear-gradient(rgb(42 157 143) 0 0)
    top / 100% calc(100% - var(--h)) no-repeat,
   url("https://i.stack.imgur.com/qN0S5.png") 
    bottom / 101% var(--h) no-repeat;
}
    <div class="tip">
  Some tip text
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search