wordfa wordfa - 3 months ago 9
CSS Question

Align text to bottom left of page in the same Div as a Centred full height photo

I’m trying to place text in the bottom left corner of a div and window, however It is not playing nice with a full height centered photo in the same section.

Here is the Code pen.



.full {
display: block;
margin: auto;
height: 100%;
width: 100%;
}
.name {
position: absolute;
text-decoration: none;
bottom: 10px;
left: 40px;
font-size: 36px;
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: black;
width: 960px;
}
.box {
display: block;
margin: auto;
height: 100vh;
width: 100vh;
max-width: 100%;
position: relative;
}

<div id="fullpage" class="inner">
<div class="box">
<img src="img/6.png" class="full animated slideInUp">
<a class="name" href="http//:www.fredwordie.com">Fred Wordie</a>
</div>
</div>





what I want:


Answer

Not sure whether match what you want ,here is a codepen: http://codepen.io/Carr1005/pen/LkrAab

no title overlay problem

revised on these two block :

.full {
   display:block;
   margin:auto;
   height: 100%;
   width: 100vh;
   background:yellow;
}

.box {
   display:block;
   margin:auto;
   height: 100vh;
   max-width:100%;
   position:relative;
}