0

I have a div with a background image:

    <div class="medium-12 large-12 columns featured-spotlight-container" style="background-image: url(@Model.ImageUrl);">
        <div class="medium-6 large-6 columns spotlight-content">
            <a href="@url">
                <h2>@Model.Title</h2>
            </a>
            <p>@Model.Description</p>
            <a href="@url" class="small button"><i class="fa fa-chevron-right fa-2x"></i><span>@Model.ButtonText</span></a>
        </div>                      
    </div>

I want the div to be tall enough to show the full background image. This was the first solution I tried, based on another stackoverflow answer I found here:

    <div class="medium-12 large-12 columns featured-spotlight-container" style="background-image: url(@Model.ImageUrl);">
        <div class="medium-6 large-6 columns spotlight-content" style="position:absolute;height:auto;">
            <a href="@url">
                <h2>@Model.Title</h2>
            </a>
            <p>@Model.Description</p>
            <a href="@url" class="small button"><i class="fa fa-chevron-right fa-2x"></i><span>@Model.ButtonText</span></a>
        </div>     

        <div class="medium-12 large-12 columns" id="feature-size" style="padding:0 !important; visibility:hidden;">
            <img src="@Model.ImageUrl" />
        </div>                  
    </div>

enter image description here

I put absolute positioning on the spotlight-content div, because otherwise the image will be stacked beneath the spotlight-content, rather than the spotlight-content floating on top of it.

However, when I have enough text so that the height of spotlight-content is greater than the background image, it causes a problem, because with the absolute positioning the size of the box does not expand with spotlight-content:

enter image description here

I also tried setting the height with javascript:

    <div class="medium-12 large-12 columns featured-spotlight-container" style="background-image: url(@Model.ImageUrl);">
        <div class="medium-6 large-6 columns spotlight-content" style="position:absolute;height:auto;">
            <a href="@url">
                <h2>@Model.Title</h2>
            </a>
            <p>@Model.Description</p>
            <a href="@url" class="small button"><i class="fa fa-chevron-right fa-2x"></i><span>@Model.ButtonText</span></a>
        </div>                                 
    </div>
    <div class="medium-12 large-12 columns" id="feature-size" style="padding:0 !important; visibility:hidden;">
        <img src="@Model.ImageUrl" />
    </div> 

<script>
    var imgHeight = $("#feature-size").height();
    var containerHeight = $(".featured-spotlight-container").height();
    if (containerHeight < imgHeight) {
        $(".featured-spotlight-container").height(imgHeight);
    }
    $("#feature-size").hide();
</script>

but my divs are responsive, so having a fixed height doesn't work when I change the size of the browser. I would like to avoid using Javascript.

Community
  • 1
  • 1
Erica Stockwell-Alpert
  • 4,624
  • 10
  • 63
  • 130

2 Answers2

0

use background-size:cover; in your div, set a height for your text box, and use overflow-y:scroll or auto and overflow-x:hidden;

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
0

You cannot have an element automatically get the same dimensions as it's background image using pure CSS (no javascript).

You could, however, use a pseudo background image, that is, instead of using an actual background image, use a regular image. The containing div will expand to accommodate that image. Then, place your content in another div which is positioned absolutely in the same containing div.

pseudo code (HTML):

<div class="container">
   <img src="background.jpg" />
   <div class="content">Lorem ipsum</div>
</div>

pseudo code (CSS):

.container { position:relative; }
.container .content { position:absolute; top:0; left:0; }
HaukurHaf
  • 13,522
  • 5
  • 44
  • 59