Add a full-width header image to pages

Hi,

Can you please to re-upload the image? It’s broken and not displayed.

Hi Arhakim, actually I had not uploaded any image and do not even know how to do that … Just follow the Link I posted, abd on the very left hand side you see a small icon plus the title of the page “Gutes Trinkwasser”, where I would have like to have the header image.

I mean, the image on your site (https://prntscr.com/optyms), from where did you upload it?
Can you re-upload it?

Or, you can also to have a different image for each page using Page-builder plugin.
1. Add a row to the page and don’t put any widget to it.
2. Set a background image to the row from: Edit row > Design > Background image. You can also set the “Background Image Display” to “cover”
3. Add this CSS code to Edit row > Attribute > CSS style:

height: 400px;
margin-left: -104px;
margin-right: -104px;

screenshot: https://prntscr.com/opu2ik

I uploaded all images from my desktop pc. They worked all perfectly with the slider on the startting page, but not as header image on the other pages where I implemeneted them as “featured image”.

By now, I tried and uploaded new images 2000 x 400 px as header image, unfortunaely with the same result.

Your workaround sets the background image of the row on full width of the column, but not for the whole screen: screenshot

I could live with this layout, allthough a screen-wide header would be preferred.

Funny enough, the icon + page title on the upper left side does not disappear, allthoungh I deleted the “featruered image” of the page… Where does it originate from?

What can I do to reduce the space between the Page title and the image?

Thanks for your support and help!

Now I got it… The Icon + Page title result from the fact, that I had not defined a header image in the customizer. I had not done so for three reasons:

1. I choose a slider for the starting page, so I did not see the need to define a header image at this point.
2. I found no way to determine a different header image for each particular page.
3. I would like a much 2leaner” format, eg. 1920 x 400 px.

Do you have any solution for these issues?

Thanks, Andreas

Hi,

What can I do to reduce the space between the Page title and the image?

Did you mean this https://prntscr.com/or3z5z?
If yes, add this code to Customize > additional CSS:

.page-template-default .site-content {
    margin-top: 20px;
}

Do you have any solution for these issues?

I am sorry, can you be more clear on this?

Sorry if I did not express myself clearly enough.

As you can see on my page, I found the way to define one header image which is displayed on all pages except the starting page. Is there a possibility to define a different header for each page?

Defining the header image, I always get the request to trim the image to 1920 x 1080 px. How can I define a header let’s say with 1920 x 400 px?

Is there a possibility to define a different header for each page?

Currently, the theme doesn’t support to have a different header image for each page.

How can I define a header let’s say with 1920 x 400 px?

Here, add this to Customize > additional CSS:

.header-image img {
    height: 400px;
    width: 100%;
}