[Resolved] Page Header – Fixed Size

[Rodolfo]

Hi,

All my feature images have same width (1100 px) and height (220 px).

How can I set my Page Header, to show entire image, using “Merge with site header”?

I tried to adjust padding to 110px (110+110 = 220 exact height)… but image is still croped.

I notice, that if I use a lower value (90px for example), it show better, but I would like to have my feature images with 1100 x 220px, the same size of images.

Is there a way to do that?

[Leo]

Hi there,

What if you just add the image as static image using <img> tag instead of adding it as background image?

Let me know.

[Rodolfo]

Hum…. I can’t imagine how to implement this…

1 – It is a featured image, so, I don’t know where to find tag.

2 – How can I do it, and have same effect “Merge with site header”?

Is there a way to do it, without “Page Headers”?

[Leo]

I meant like adding this as page header content:
<img src="http://www.computar.com.br/wp-content/uploads/2017/10/Computar-Sistemas.jpg" alt="" />

[Rodolfo]

Leo, sorry I’m late about this replay….

It will not working… because I use the same Page Header, to all pages … and each page has a different featured image…

If I understood you right, this way will show always computar-sistemas.jpg , right?

[Leo]

Ok just so I understand. This is what I see currently: http://www.screencast.com/t/DmszkvbY

You are wanting exact same layout but just 20px shorter?

[Rodolfo]

Hi Leo…

I would like to show entire image… 100% without cut left and right margins… …

Take a look:

Above is my Page Header configuration and how page looks like… Below, is original image… Note the “red lines”… it is where image is cut off…

[Leo]

Try this CSS:

.generate-content-header {
    background-size: 100%;
}

[Rodolfo]

Perfect! … thank you again, Leo…

IN addition: I replace 90 to 80px (Top/Bottom padding) to be perfect!

😉

[Leo]

No problem 🙂

[Rodolfo]

Hi again Leo…

Just a additional information…
I have to use min-witdh=1100px to make it works right.
So, If is a mobile, if we use 100%, a grey area appers below the image…

@media (min-width: 1100px)
{
	.generate-content-header {
    background-size: 100%; }
}

That’s all! Bye!

[Leo]

Ahh yeah right.

Here are the our standard breakpoints if you are interested: https://docs.generatepress.com/article/responsive-display/

[Rodolfo]

Ok Leo… I use this standard, but in this case, if witdh is less than 1100, this css (100% image that means 1100px) should not be applied.

It is ok…

And thank you for share this information…

[Leo]

No problem!

[Author]

Posts