CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Artyom Pranovich
Artyom Pranovich

Reputation: 6962

Insert image between two divs

I need to insert photo in between divs (blue and light-blue) as in the following example.

enter image description here

I did it with absolute positioning:

HTML:

    @*Blue and light-blue sections with photo*@
    <div style="width: 100%; height: 120px; background-color: #0052a4"></div>
    <div style="width: 100%; height: 120px; background-color: #c2dffd">
        <div class="image">
            <img src="/Content/pictures/MainPhoto.png" />
        </div>
    </div>

CSS:

.image {
    position: absolute;
    bottom: -100px; /* bottom space */
    right: 100px; /* right space */
}
.image img {
    display: block;
}

But this way doesn't work correctly when you change the screen resolution of the device.

I create JSFiddle with this example.

Could you please to suggest another way to resolve this problem? I need to create responsive design without hardcoded values.

Thanks! :)

Upvotes: 1

Views: 7501

Answers (4)

Wade Hammes
Wade Hammes

Reputation: 1

I think this is what you are trying to do:

http://jsfiddle.net/dc6r1bny/

.image {
    position: absolute;
    bottom: 30px; /* bottom height */
    left: 50%; /* position element 50% from left side */
    margin-left: -421px; /* bring it back left half the image size */
}

Then for mobile, you will just need to use media queries to adjust the image size to be 100%, remove the margin, etc. when you hit roughly 842px.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106048

you could just use a background and a padding to keep image from sides : DEMO

HTML

<div class="imaged">
  <img src="http://lorempixel.com/800/180/food/7"/>
</div>

CSS

.imaged {
  padding:20px;
  text-align:center;
  background:url(my-blue-light-blue-bg.jpg)repeat-x center ;
}
img {
  border:solid white 4px;
  vertical-align:top;/* or display:block; + margin:auto;*/
}

from your fiddle: inset box-shadow in a single div works too : DEMO 2 / DEMO 3

<div style="
padding:0 20px;
display:table;
min-width: 100%;
box-shadow:
inset 0 120px 0 #0052a4,
inset 0 -120px 0 #c2dffd;
height:244px;
line-height:244px;
text-align:center;
">
    <img src="http://lorempixel.com/842/176/city" style="border:solid white 4px;"/>
</div>

Upvotes: 3

Devin
Devin

Reputation: 7720

HTML

 <div class="container-box">
    <div style="width: 100%; height: 120px; background-color: #0052a4"></div>
    <div style="width: 100%; height: 120px; background-color: #c2dffd"></div>
    <div class="image">
        <img src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg" />
    </div>
</div>

CSS

 .container-box {
    position:relative;
}
.container-box img {
    height:200px;
    width:90%;
    position:absolute;
    top:20px;
    left:5%;
    border:3px solid #fff
}

Of course I'd never use inline CSS, but there you go. See fiddle here

Upvotes: 0

Vinc199789
Vinc199789

Reputation: 1046

add this css code to the image. it should work.

margin-right:auto;
margin-left:auto;

Upvotes: -2

Related Questions