CODEWITHSUNDEEP
csshtml
murday1983
murday1983

Reputation: 4006

Add 2 Images To One Controlling <Div>

I have a <Div> that I would like 2 images to be displayed in. The first one set in the top left and the other at the bottom right.

Ideally i'd like to do this on <Div> so that the content sits in it also and goes over the images.

I have managed to get the top left image in but I cant figure out how to get the bottom one in.

My CSS is

.tab-content > .tab-pane,
.pill-content > .pill-pane
{
    display: none;
    background-image: url("../images/brand/QuotationOpen.JPG");
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-left: 25px;
}

My HTML is

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-GP col-sm-3 col-md-4">
            <li><a href="#Intelligent" data-toggle="pill">Intelligent</a></li>
            <li><a href="#Principled" data-toggle="pill">Principled</a></li>
            <li><a href="#Personal" data-toggle="pill">Personal</a></li>
            <li><a href="#Focused" data-toggle="pill">Focused</a></li>
            <li><a href="#Straightforward" data-toggle="pill">Straightforward</a></li>
            <li><a href="#Energetic" data-toggle="pill">Energetic</a></li>
        </ul>
        <div class="tab-content col-sm-9 col-md-8">
            <div class="tab-pane active">
                <h2>Heading 2</h2>
                <p>Content here</p>
            </div>
            <div class="tab-pane" id="Intelligent">
                <h1>Heading 1</h1>
                <h2>Heading 2</h2>
                <p>Content here</p>
            </div>
        </div>
    </div>
</div>

And this give me

enter image description here

I need to get the following image in the bottom right which also allows the text to over-run it

enter image description here

The image below is a mock-up I did in paint to show what i'm after

enter image description here

Upvotes: 0

Views: 88

Answers (3)

hsan
hsan

Reputation: 1559

You can also do this by assigning two background images to the div.

.quote {
  background-image: url("https://i.sstatic.net/kXynJ.jpg"), url("https://i.sstatic.net/aduet.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
  height: 200px;
  width: 400px;
}
<div class="quote">Here is some text.</div>

Upvotes: 3

Suresh Karia
Suresh Karia

Reputation: 18218

solved it

try positioning two images absolutely and position its accordingly!

See jSfiddle

enter image description here

css

img.first {
    position:absolute;
    top:0;
    left:0;
    z-index:-999px;
}
img.second {
    position:absolute;
    bottom:0;
    right:0;
   z-index:-999px;
}

Snippet (see it full-screen for effect)

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
    border:1px solid #ccc;
    padding-top: 50px;
    padding-left: 25px;
}
.tss {
    position:relative;
    display: flex;
    height:300px;
}
h2 {
    z-index:999;
    display:block;
}
img.first {
    position:absolute;
    top:0;
    left:0;
    z-index:-999px;
}
img.second {
    position:absolute;
    bottom:0;
    right:0;
    z-index:-999px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-GP col-sm-3 col-md-4">
            <li><a href="#Intelligent" data-toggle="pill">Intelligent</a>

            </li>
            <li><a href="#Principled" data-toggle="pill">Principled</a>

            </li>
            <li><a href="#Personal" data-toggle="pill">Personal</a>

            </li>
            <li><a href="#Focused" data-toggle="pill">Focused</a>

            </li>
            <li><a href="#Straightforward" data-toggle="pill">Straightforward</a>

            </li>
            <li><a href="#Energetic" data-toggle="pill">Energetic</a>

            </li>
        </ul>
        <div class="tss tab-pane" id="Intelligent ">
             <h2>Heading 2</h2>

            <img class="first" src="http://i58.tinypic.com/1zm2tmp.jpg" border="0" alt="Image and video hosting by TinyPic">
            <img class="second" src="http://i62.tinypic.com/dyoopu.jpg" border="0" alt="Image and video hosting by TinyPic">
        </div>
    </div>
</div>
</div>

Upvotes: 0

Marco Kastrup
Marco Kastrup

Reputation: 26

If anyone is interested in a solution without the framework css-classes i created a demo jsfiddle:

http://jsfiddle.net/q5dn5589/

HTML:

<div class=wrapper>
    <img src="https://i.sstatic.net/Smqyd.jpg">
    <img class="image2" src="https://i.sstatic.net/aduet.jpg">
</div>

CSS:

.wrapper {
    position: relative;
    width: 499px;
    height: 213px;
    border: 1px black solid;
}

.image2 {
    position: absolute;
    bottom: 0;
    right: 0;
}

Upvotes: 0

Related Questions