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

Html – How to update background image height based on dynamic content

I have a background image with dynamic content inside it. Sometimes the content is less, while other times it can be more. When the content is more, it tends to overflow outside the container. I want to ensure that the content remains within the boundaries of the background image container and that the container’s height adjusts according to the amount of content. It works good when there are 4 links but on 5 or 6 links it breaks. I have also tried it with SVG as background but nothing changed.

HTML:

<div class="right-container">
            <div class="right-content">
              <div class="right-title">View <?php echo $name; ?> Floor Plans</div>
              <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 0</a>
              <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
              <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 2</a>
              <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 3</a>
            </div>
          </div>

CSS/SASS:

.right-container {
    min-height: auto;
    position: relative;
    background-image: url('https://i.postimg.cc/jSFG1f9c/meg-nav-location.png');
    background-repeat: no-repeat;
    width: 393px;
    height: 384px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .right-content {
    padding: 36px;
    background-color: $white;
    width: 377px;
    height: 368px;
  }
  .right-title {
    @extend %heading-5;
    color: $navy-blue;
    margin-bottom: 24px;
    text-align: center;
  }
  .right-cta {
    width: 100%;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    padding-top: 16px;
    padding-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
}
Tags:

2

Answers


  1. 0

    I’ll suggest you to avoid fixed heights, so better use min-height to have minimal view of the content when just 1 or 2 links are displayed, but then if there are 10 or 15 it will expand.
    Also, the image seems okay to be repeated so you can remove the background-repeat: no-repeat; this way it will fill the spaces, if you don’t want a repetition, you can use background-size: cover; and the image will expand to cover the container.

    .right-container {
        min-height: auto;
        position: relative;
        background-image: url('https://i.postimg.cc/jSFG1f9c/meg-nav-location.png');
        /* background-repeat: no-repeat; */
        /* background-size: cover; */
        width: 393px;
        min-height: 384px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .right-content {
        padding: 36px;
        width: 377px;
    }
    .right-title {
        color: blue;
        margin-bottom: 24px;
        text-align: center;
    }
    .right-cta {
        width: 100%;
        text-align: center;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
        padding-top: 16px;
        padding-bottom: 16px;

    }

    .right-cta:last-child {
        margin-bottom: 0;
    }
        <div class="right-container">
        <div class="right-content">
          <div class="right-title">View TEST Floor Plans</div>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 0</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
          <a href="#" data-toggle="modal" data-target="#floor-modal" data-index="" class="right-cta button">Floor Plan 1</a>
        </div>
      </div>
    Login or Signup to reply.
  2. 0

    To fix the issue, avoid using fixed heights for the container. Replace height with min-height to set a minimum size while allowing the container to grow with its content. Additionally, to adjust the background image and prevent it from repeating, use background-size: cover;, which will make the image fit the container size without breaking the layout.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search