Reputation: 23
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:
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%;
}
Upvotes: 2
Views: 15049
Reputation: 7246
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/
Upvotes: 4