Header image size

Hello
Could you please inform me how to change size of an image in header on a front page? It is enlarged although it’s dimensions are 1920x600. I wish people on photo don’t be cut - you can find my website here.
Thanks in advance.

Hello, to make the header image has full width without cropped, you can try to add this code using custom css plugin:

.header-image {
    background-size: 100% 100%;
}

you can adjust the value of background-size

Well, it repairs only width, now it is sqeezed and still cropped on the upper and lower part of the photo. Have you got any more ideas?

There is more values for the background-size in the link above, you can try it :slight_smile:

The most accurate value are inherit and containt - when that one is chose photo seems to have right dimensions, however it was also moved to the up, so I decided, to try different values of background-position-y. Finały, I found a perfect one, so now my code in custom css looks just like that:

.header-image {
  background-size: inherit;
  background-position-y: 143px!important;
}

Thanks Awan for help, I hope our solution will work also for others. :slight_smile:

Actually, I have changed it once again because of issues with resizing a browser window. Right now my custom css is:

 .header-image {
  background-position-y: 0px!important;
  height: 660px;
  background-attachment: local;
}

I also didn’t upload a header image via dashboard in WP - I replaced the header.jpg file in theme directory with my photo using same resolution as the default one. Hope it will help others.

Hi,

Thanks for your advice, really appreciate it! :slight_smile: