How to stick image to border of div?

Question

I am struggling with this, as positioning an image to the top of a div is pretty easy but doing it at the bottom of the div is not that easy. As you can see, that rectangle is a div with an image frame on top of it.

I want to put another frame at the bottom of that div so it looks nicer but I can only get to position it inside the div, but not over the border.

Check this image to see what I mean:

Stick image to border

HTML

<header>

    <div id="banner">
    <img src="img/darkframe.png">
    <img src="img/darkframe2.png">


    </div>

</header>

CSS

 * {
    margin: 0;
    padding: 0;
}
html {
    overflow-y: scroll;
}
body {
    background-image: url("/img/poe-wallpaper-5.jpg");
    font-size: 13px;
    color: #938063;
    font-family: Fontin-Bold;
    background-repeat: no-repeat;
    /*background-position: right top;*/
    background-attachment: scroll;
    background-position: center top;
    background-color: black;
}
ol, ul {
    list-style: none;
    margin: 0;
}
ul li {
    margin: 0;
    padding: 0;
}
h1 {
    margin-bottom: 10px;
    color: #111111;
}
a, img {
    outline: none;
    border: none;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
}
p {
    margin: 0 0 10px;
    line-height: 1.4em;
    font-size: 1.2em;
}
img {
    display: block;
    margin-bottom: 10px;
}
aside {
    font-style: italic;
    font-size: 0.9em;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, {
display: block;
}

/* Structure */
#wrapper {
    width: 96%;
    max-width: 920px;
    margin: auto;
    padding: 5%;
}

#main {
    padding-top: 10px;
    width: 100%;
    margin-right: 5%;
    float: left;
}

aside {
    width: 35%;
    float: right;
}

/* Logo H1
 header h1 {
 height: 70px;
 width: 160px;
 float: left;
 display: block;
 background: url(../images/demo.gif) 0 0 no-repeat;
 text-indent: -9999px;
 }*/

#skipTo {
    display: none;
}
#skipTo li {
    background: #b1fffc;
}

/* Banner */
#banner {

    float: none;
    margin:90px 0 100px 0;
    width: 100%;
    border: 1px solid #938063;
    background-color: #1a1b18;
    position: relative;
    padding-top: 25px;
    padding-bottom: 85px;
    border-radius: 10px;


}   

#banner h1 {
    font-family: 'fontinbold';
    font-weight: bold;
    text-align: center;
    font-size: 350%;
    color: #938063;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 30px;
}
#banner h2 {
    font-family: 'fontinbold';
    font-weight: bold;
    text-align: center;
    font-size: 350%;
    color: #938063;
    margin-left: 10px;
    margin-right: 10px;
}
#banner h3 {
    font-family: 'fontinbold';
    font-weight: bold;
    text-align: center;
    font-size: 350%;
    color: #938063;
    margin-left: 10px;
    margin-right: 10px;
}
#banner img[src="img/darkframe.png"] {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: -47px;
    height: 80px;
    width: 1000px;
}
#banner img[src="img/darkframe2.png"] {
    position: absolute;
    height: auto;
    width: 100%;
    bottom:
}

/* Media Queries */
@media screen and (max-width: 480px) {

    #skipTo {
        display: block;
    }

    header nav, #main, aside {
        float: left;
        clear: left;
        margin: 0 0 10px;
        width: 100%;
    }
    header nav li {
        margin: 0;
        background: #efefef;
        display: block;
        margin-bottom: 3px;
    }
    header nav a {
        display: block;
        padding: 10px;
        text-align: center;
    }
}

#talk2 {
    float: none;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #938063;
    background-color: #1a1b18;
    position: relative;
    margin-bottom: 50px;
    border-radius: 10px;
}

#talk2 img[src="img/darkframe.png"] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    top: -77px;
    height: 80px;
    width: 100%;
    padding-top: 25px;
}

#talk2 img[src="img/exastashfull.jpg"] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    height: 250px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;
}
#talk2 img[src="img/iknow.png"] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    height: 80px;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
}
#talk2 img[src="img/sowhat.png"] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    height: 80px;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
}
#talk2 img[src="img/then.png"] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    height: 80px;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
}

#talk2 img[src="img/getnow.png"] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    height: 100px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
}
#talk2 img[src="img/buynowred.png"] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    height: 120px;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
}

#talk2 p {

    font-family: 'fontinbold';
    text-align: center;
    font-size: 22px;
    color: #938063;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 40px;
    margin-bottom: 30px;
}

#formdiv {
    width: 100%;
    margin 0: auto;
    text-align: center;
}

#stash img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

placing top:100% on the banner div doesn't do anything – Pyth Phytho Apr 15 '15 at 20:42 — Pyth Phytho, Apr 15 '15 at 20:42
Check if my answer is what you are after. – Alessandro Incarnati Apr 15 '15 at 21:01 — Alessandro Incarnati, Apr 15 '15 at 21:01

Alessandro Incarnati · Accepted Answer · 2015-04-15T23:05:06.020

4

Just set position:absolute; and bottom:0; to the img.

Also set position:relative; to the img container.

#banner {
    float: none;
    margin:90px 0 100px 0;
    width: 100%;
    border: 1px solid #938063;
    background-color: #1a1b18;
    position: relative;
    padding-top: 25px;
    padding-bottom: 85px;
    border-radius: 10px;
}
#banner img {
    width: 100%;
    height: auto;
    position:absolute;
    bottom:0;
}

DEMO: http://jsfiddle.net/a_incarnati/fua75hpv/3/

Also check this other demo, maybe is clearer: http://jsfiddle.net/a_incarnati/fua75hpv/4/

Edited quickly your code in which I removed the margin:10px applied to each img and then removed all other properties applied to each image and absolute positioned them with bottom:0.

DEMO 2: https://jsfiddle.net/a_incarnati/v575uvyb/3/

DEMO 3 https://jsfiddle.net/a_incarnati/v575uvyb/6/

edited Apr 15 '15 at 23:05

answered Apr 15 '15 at 20:50

Alessandro Incarnati

7,018
3
38
54

Your demo is what I need, but I am still getting this result : http://s7.postimg.org/5gljdq9vf/frames3.png – Pyth Phytho Apr 15 '15 at 21:08
Can you post some more code, for instance some more html to understand what styles are applied... I noticed in your demo there were some syntax error and some non closed brackets, i fixed them in my demo. – Alessandro Incarnati Apr 15 '15 at 21:11
I have posted the entire CSS sheet on my initital post – Pyth Phytho Apr 15 '15 at 21:49
Ok check the next demo :) – Alessandro Incarnati Apr 15 '15 at 21:55
Ok, now I have changed the golden border and looks better, and it is sticking at the bottom. Can you tell me exactly what you have changed to I can learn ? Also, I wanted to make the frames stick out of the div but only on the sides, like this : http://s21.postimg.org/oyhsdiixz/frames4.png do you know if that is possible ? – Pyth Phytho Apr 15 '15 at 22:09
Do you know how to make the images stick out of the div on the sides ? I have been trying to do it but I can't figure out – Pyth Phytho Apr 15 '15 at 22:22
upload the images somewhere, and i ll make a demo – Alessandro Incarnati Apr 15 '15 at 22:32
ps. if you are using bootstrap, this might help http://stackoverflow.com/questions/20242455/what-are-the-difference-between-col-lg-and-col-md-in-bootstrap3/20242655#20242655 – Alessandro Incarnati Apr 15 '15 at 22:34
image one : http://s8.postimg.org/y84vhculx/darkframe.png / image two : http://s22.postimg.org/ktte4x001/darkframe2.png – Pyth Phytho Apr 15 '15 at 22:37
which of the two, needs to stick out? – Alessandro Incarnati Apr 15 '15 at 22:44
both. The purpose of that is that the corners of the div background is not showing up, as the frames would be sticking out. That would look much nicer as now you can see the rounded corners of the background and that kind of defeats the use of those frames. – Pyth Phytho Apr 15 '15 at 22:48
I implemented the code and analyze it, it works but the problem is that it doesn't scale down and stays in place with smaller viewports. I tried something similar trying to position the images before and also got this result. It's when using bottom: -350px to position it on bottom when it does not downscale well and gets out of its position – Pyth Phytho Apr 15 '15 at 23:39
well at least now i replied the answer. You can use % for position the element but in case of responsive you need to change the approach. That's why is important to specify requirements in advance. Also adding them in a question. – Alessandro Incarnati Apr 15 '15 at 23:40
I will then problably remove responsiveness ! Thank you for your help I learned quite a bit ! – Pyth Phytho Apr 15 '15 at 23:58

How to stick image to border of div?

1 Answers1