Header Image Size for individual pages

steamdieselavocados · Member · Jan 18, 2017 at 3:21 pm
Copy link

Add topic to favorites
Setting header images for individual pages in Adventure template – how do I get my whole picture to fit in the header. If I change the pixels to 980×520 then I lose some of my picture and If I set my picture as it is then the header ends up taking up the whole page. I really need to resolve this as I’ll be constantly changing my headers and I need to know what I am doing wrong? thank you

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 19, 2017 at 10:28 pm
Copy link
Hi there, I took a look at your site, and it looks like the entire image is showing on your site right now. I took a look at Customize > Header Image and the recommended size for the image is 2560 x 800 pixels. Have you tried an image at that size?
steamdieselavocados · Member · Jan 21, 2017 at 4:43 pm
Copy link
Hello, Thank you for getting back to me. I have tried 2560 x 800 but can’t get the whole picture in, plus I am not keen on making the header so big but want to get the whole picture in. For example on my ‘About Me’ page the image is only 2/3 visible but also taking up a lot of the page.
thesacredpath · Member · Jan 23, 2017 at 8:29 pm
Copy link
Looking at the HTML, the theme crops the featured images for the top of the pages to 2560 x 1200. You might try that size and see what happens. We can use CSS to replace the images on a page-by-page basis using the unique page id CSS class from the opening body html tag, but as you will see with the following custom CSS, to get your entire image to show (I used the first of these you uploaded to your media library) you will end up with large gaps on the left and right. This is one of the challenges when images go full width of the window/screen in responsive designed themes.
```
.page-id-57 .feature-img.page-banner {
  background-image: url('https://steamdieselavocados.files.wordpress.com/2017/01/sam_1193.jpg') !important;
  background-size: contain;
  background-repeat: no-repeat;
}
```

No items found.