responsive header image

  • 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 https://www.riseshinesliprepeat.com. I would like to have it the same way as it is on https://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 7 years, 8 months ago by meisfit.
Viewing 4 replies - 1 through 4 (of 4 total)

  • 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)

    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 7 years, 8 months ago by meisfit.
    Thread Starter meisfit

    (@meisfit)

    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 7 years, 8 months ago by meisfit.

    Hello…Could you help me with a custom css to fix my website? It is https://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.