2 replies [Last post]
idm1
idm1's picture
Offline
newbie
Last seen: 3 years 35 weeks ago
Timezone: GMT+1
Joined: 2016-04-05
Posts: 1
Points: 2

Hi

I have a full width repsonsive header image.

Here is my code (the image used is an example):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Header image</title>
<style type="text/css">
* {
	padding:0;
	margin:0;
}
img {
	width:100%;
}
.post-thumbnail {
    display: block;
    max-height: 400px;
    overflow: hidden;
}
.post-thumbnail img {
    display: block;
    height: auto;
    width: 100%;
}
</style>
</head>
 
<body>
<div class="post-thumbnail">
<img src="http://static1.businessinsider.com/image/5298b3106da811fc0f2887bd/a-history-of-the-worlds-tallest-skyscrapers.jpg">
</div>
</body>
</html>

How can I position the image to show the bottom rather than top. The focus of the image is at the bottom - as you can see in the example code I want to show the skyline.

If I make the image absolute I lose the height of "post-thumbnail"

This is for wordpress and is using "feature image" (just incase someone suggests to make the image a background image in css!)

Any ideas?

Many thanks!

luvis
luvis's picture
Offline
newbie
Sweden
Last seen: 1 year 13 weeks ago
Sweden
Timezone: GMT+2
Joined: 2016-04-23
Posts: 2
Points: 3

I'm pretty sure you can do

I'm pretty sure you can do what you want if you set it up as a background-image.
With the:
background-position: center bottom;

Hope it helps

an "image-options; crop-top;" would be nice and I'm surprised there isn't something like that.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Try clip to show just the

Try clip to show just the bottom of the image.