CODEWITHSUNDEEP
htmlcssasp.net-mvc-4twitter-bootstrap-3
LCaraway
LCaraway

Reputation: 1357

Bootstrap (CSS) - Overlay One Img over another using responsive design

What CSS do I need to use so that one img "under construction" is overlayed in the top left corner of the 1st image. The section of script this pertains to is the second column in the row. I've tried various solutions using position in css but have come up with nothing that is consistent with page resizing. I need a responsive solution. 

    <div class="col-lg-6">
        <h2 class="text-center">Current Conditions</h2>
        <img src="@Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" />
        <p class="text-center">View the current weather conditions in relation to Crestwood Assets</p>
        <p class="text-center">
            <a href="@Url.Action("CurrentWeather","Home")" class="btn btn-primary"> Launch <span class="glyphicon glyphicon-chevron-right"></span></a>
            <a href="@Url.Action("CurrentConditionsDoc","Home")" class="btn btn-primary disabled"> Documentation <span class="glyphicon glyphicon-chevron-right"></span></a>
        </p>

    </div>

    <div class="col-lg-6">
        <h2 class="text-center">Historical Weather</h2>
            <img src="@Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" />
            <img src="@Url.Content("~/Content/Img/under-construction.png")" id="under-construction" class="img-responsive center-block img-overlay" />
        <p class ="text-center">Leverage historical weather data for analysis with asset data.</p>
            <p class ="text-center">
                <a href="@Url.Action("HistoricalWeather","Home")" class="btn btn-primary"> Launch <span class="glyphicon glyphicon-chevron-right"></span></a>
                <a href="@Url.Action("HistoricalWeatherDoc", "Home")" class="btn btn-primary disabled"> Documentation <span class="glyphicon glyphicon-chevron-right"></span></a>
            </p>
    </div>
</div>

EDIT I modified to include the images in a div and provided some additional CSS.

<div id="img-container">
    <img src="@Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" />
    <img src="@Url.Content("~/Content/Img/under-construction.png")" id="under-construction" class="img-responsive center-block img-overlay" /> 
</div>




.img-overlay{
position:absolute;
top:0;
left:0;
z-index:3;    
}

#img-container{
position:relative;   
}

enter image description here

EDIT 2

I attempted to fit it using the top and left attributes: 

.img-overlay{
position:absolute;
top:0;
left:14.5%;
z-index:3;  
}

This worked great at my initial width but when sized down to a smaller window it is pushed in. I would like to be consistent.

enter image description here

enter image description here

Upvotes: 1

Views: 5748

Answers (1)

Rachel S
Rachel S

Reputation: 3920

Here's how to put a picture above another picture: http://codepen.io/ruchiccio/pen/ZWZEEy

More than that I can't help because you haven't supplied normal paths to images so we can't see what should go onto what. Maybe provide a screenshot of what you'd like.

<div id="container">
 <img id="pic1" src="http://placehold.it/350x150">
 <img id="pic2" src="http://placehold.it/150x50">
</div>

#container {
  position: relative;
}

#pic2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

Upvotes: 3

Related Questions