header Image resolution

Hi there,

You are stretching image from its normal size so it’s bluur.So we request you to upload image with high resolution.

Thanks

Hi @gejay

I have exactly the same problem. I want to use a picture whose original is 3872 pixels wide. It looks very good at screen resolution, but not very good when you see it at 100% zoom (and you see just a portion).

First I edited in Picasa and tried the 2560 × 500 recomended. Instead of fitting the image to the screen, it shows in what it seems to be a 100% zoom. Then I tried uploadig the original file (1,7 MB) and it does the same. It zooms in a small detail of the image instead of making it fit to the screen. This is the site with the header included: https://www.larutanatural.cl/

Greetings from Chile

Hi there,

Could you please try by adding this css on child theme style.css file or Additional css of a customizer.

.lr_responsive_banner {
    background-size: cover;
}

Let us know how it will goes.

Thanks

Thanks for your answer, and sorry for the delay (I was in Antarctica without Internet).

I added those three lines of code en style.css (I assumed the location doesn’t matter) and uploaded again the image (2560 x 500) but it still zooms in. https://www.larutanatural.cl

Hi there,

We had checked your site and found that you are uploading blurred image so it looks like zoomed. So please try the image size of 1857×503 px. This might help you.

Thanks

Gejay

I appreciate your help. I uploaded a version with the size you suggested (smaller than the previous one, I must say). It zooms in again, and very significantly. What I mean by that is that it only shows, roughly, the central third in the horizontal axis. The right third and the left third, more or less, are not shown. I understand there are different screen resolutions, but it cuts far too much on either side.

This is what it looks now: https://www.larutanatural.cl/

This is, more or less, what I am trying to achieve (but with only one image under the titles, of course): https://www.wikiexplora.com/images/b/bb/Sin_t%C3%ADtulo.jpg

Sorry to bother you so much with this!

Hi @jbaranao,

We are really sorry to make you wait for soo long. Please try by adding this css on customizer additonal css section or on child theme style.css.

#la-banner {
	background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    min-height: 312px !important;
}

Let us know how it will goes.

Thanks

I am grateful. That’s much better!