Tue, 2016-04-05 15:20
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!
Sat, 2016-04-23 22:35
#1
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.
