CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Code Ratchet
Code Ratchet

Reputation: 6029

Place div on top of image

I have tried all the solutions I have found on the new trying to get this div to sit on top of the image.

We have a background image, and as you can see from the image below are four words Eversoft, TruSoft, Solarmax and Active Family.

enter image description here

These four words need to be moved up into the boxes on the picture, but I can get the CSS right, this is how my page is constructed

<div class="row">
   <img src="~/Content/Images/Mobile-BackGround-new-2.png" class="img-responsive" style="position: relative" />
   <div id="stainMasterLinksContainer">
    <div id="stainMasterLinksTop">
        <a href='@Url.Action("Eversoft", "Eversoft")' style="color: #934991;" class="GothamFont" id="Eversoft"><b>EverSoft</b> <small><sup>®</sup></small></a>
        <a href='@Url.Action("Trusoft", "Trusoft")' style="color: #f7acb7" class="GothamFont"><b>TruSoft</b> <small><sup>®</sup></small></a>
    </div>
    <div id="stainMasterLinksBottom">
        <a href='@Url.Action("Solarmax", "Solarmax")' style="color: #ffe600" class="GothamFont" id="Solarmax"><b>SolarMax</b> <small><sup>®</sup></small></a>
        <a href='@Url.Action("ActiveFamily", "ActiveFamily")' style="color: #dc1e33" class="GothamFont" id="ActiveFamily"><b>Active Family</b> <small><sup>™</sup></small></a>
    </div>
</div>

And I'm currently using this CSS for the stainMasterLinksContainer

#stainMasterLinksContainer {
padding-top: -40%;
font-size: 15.5px;
position: relative;
z-index: 100;

}

Any help would be appreciated.

Upvotes: 3

Views: 2926

Answers (1)

Steve Wellens
Steve Wellens

Reputation: 20640

It CAN be done. Here's one way:

<img src="http://practicalaction.org/images/sea-of-ducks-300.jpg" style="position:absolute; left:0px; top:0px"/>

<div style="background-color:blue;position:relative;left:80px; top:80px; width:50px;"> Hello</div>

Upvotes: 2

Related Questions