Header image responsive centered

Question

I´m trying to code a header image similar to the one on this page: http://www.eltrecetv.com.ar/nosotros-a-la-manana. Pay attention to what happens to the image of the guy when you resize the page. It stays in the same place, it´s always centered and it doesn´t crop (a little at the bottom but not that much anyway). Here´s my humble and succinct code: (and here´s a fiddle too: https://jsfiddle.net/wvep5ga1/ )

html:

<div class="outer">

</div>

css:

.outer{
    background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
    background-size:cover;
    background-origin:padding-box;
    background-position:top center;
    min-height:386px;        
}

The problem I find is when I resize the browser window the div compresses to the point where it´s only visible the face of the man, as oppposed to what happens in the original page where you can always see the shoulders. I don´t know if i´m explaining this correctly, but basically on window resizing the height of the div varies much faster than what it does on the original page and that affects the rest of the page, beacuse the image of the man must always stay in the same place and must always have the same aspect ratio. I have the aspect ratio issue solved, but i´m having problems with the height of the div compressing and expanding too much on windows resize.

The original page was done using Drupal 7, I think. But what i want is a css snippet that does just that. I know it´s possible, i´ve tried everyhting for hours but i missing something. I know the original page uses many images with different resolutions but that´st no the issue.

Hope somebody can help. I look forward for your comments.

Thanks in advance!

why did i get a negative vote on my question?? – qwerty1234 Feb 19 '16 at 21:17 — qwerty1234, Feb 19 '16 at 21:17

Adam Buchanan Smith · Answer 1 · 2016-02-19T18:06:53.073

1

See updated fiddle: https://jsfiddle.net/wvep5ga1/3/

just add

background-size: 100%;
background-repeat: no-repeat;

Like this:

.abc{    
    background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    background-position:top center;
    min-height:386px;        
}

edited Feb 19 '16 at 18:06

answered Feb 19 '16 at 17:59

Adam Buchanan Smith

9,422
5
19
39

thanks Adam! but i still have the same problem when i resize the browser window. Try expanding the "result" panel on the fiddle window. You´ll see that when you zoom out the shoulders get cropped and you only see the face. But in the original page you always see the shoulder. I don´t know what i´m missing. – qwerty1234 Feb 19 '16 at 20:08
@qwerty1234 I do not see anything getting cropped out :/ – Adam Buchanan Smith Feb 19 '16 at 20:45
try expanding the result panel on the jsfiddle as much as possible, and then resize. You´ll see the shoulders and neck dissapearing, as if the man was reaching down behind the window of a building and you ´d only see his face. – qwerty1234 Feb 19 '16 at 20:52
I found out (by using firefox tools) that the key is in adding some padding-top; that stops the cropping on resizing. Here´s a fiddle [link](https://jsfiddle.net/wvep5ga1/13/) . I´ll research it and come back with an update. Thanks for your replies! – qwerty1234 Feb 19 '16 at 21:00

Header image responsive centered

1 Answers1