responsive header image

  • meisfit

    (@meisfit)


    9 years ago

    Hi there, I have been searching the whole net and through the forums but all the css code snippets provided did not work. I want my header image to be responsive, i.e. get smaller with the decreasing screen size but still completely visible as it is on a desktop device. The website I am talking about is http://www.riseshinesliprepeat.com. I would like to have it the same way as it is on http://www.copperstonesea.com. By now, it cuts off the right side of the header image, I have already read that its just not a good idea to include text on the header image, but maybe theres a work around, or at least an alternative/trade off? Also deactivated and tested several plug ins.

    The name of the theme I took was “stone”

    • This topic was modified 9 years ago by meisfit.
Viewing 4 replies - 1 through 4 (of 4 total)
  • csloisel

    (@csloisel)

    9 years ago

    Try:

    
.site-header-image .site-header-image-img {
    width: 100%;
    object-fit: contain;
}

    Text isn’t great to have in an image because it is static,and it can’t be changed dynamically. So when the image is scaled down, the text is as well, and there’s nothing you can do in that situation to change it. Alternative one would be doing the text in html/markup so that it can be styled differently on varying viewports. A second alternative would be to keep the image in text but have separate images per viewport that have an optimized layout and readability when scaled down.

    Thread Starter meisfit

    (@meisfit)

    9 years ago

    wow, thanks a lot. The header image is alright now, but the menu and “Rise. Shine. Slip. Repeat.” are way too farr on the right now. Furthermore it is now asking if I want the mobile or the desktop version? I did not create any mobile version. Another thing is that you now can zoom in and out way too far by pinching.

    Thanks again! But its not the way its intended to be yet :/
    Hope you/somebody can help out further.

    • This reply was modified 9 years ago by meisfit.
    Thread Starter meisfit

    (@meisfit)

    9 years ago

    In case its easier or even not possible to do in css:

    1. How could I place the text in html/markup so that it is at the right spot? I then will only add the image without text?

    2. How to use separate images per viewport?

    • This reply was modified 9 years ago by meisfit.
    blakshmi

    (@blakshmi)

    8 years, 11 months ago

    Hello…Could you help me with a custom css to fix my website? It is http://www.apexbankonline.com and the header image repeats itself in the mobile version. I changed the header height and added css for “no-repeat” for the background image, but now the image is too small in the mobile and there is empty white space between the header and the body slider. Thanks for your help in advance.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘responsive header image’ is closed to new replies.