Header image size


#1

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.


#2

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


#3

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?


#4

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


#5

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:


#6

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.


#7

Hi,

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