Archived topic

Page Header - Fixed Size

13 replies · Started by Rodolfo on February 27, 2018

Viewing posts 1–14 of 14

February 27, 2018 at 4:09 am #506765

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?

February 27, 2018 at 8:58 am #507108

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.

February 27, 2018 at 9:58 am #507146

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"?

February 27, 2018 at 3:54 pm #507397

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="" />

March 2, 2018 at 10:42 am #509909

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?

March 2, 2018 at 4:02 pm #510126

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?

March 5, 2018 at 5:22 am #511900

Hi Leo...

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

Take a look:

http://www.screencast.com/t/OEsw28Rup1m

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...

March 5, 2018 at 9:22 am #512159

Try this CSS:

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

March 5, 2018 at 9:37 am #512184

Perfect! ... thank you again, Leo...

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

;-)

March 5, 2018 at 2:26 pm #512361

No problem :)

March 6, 2018 at 4:20 am #512796

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!

March 6, 2018 at 5:15 pm #513408

Ahh yeah right.

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

March 7, 2018 at 6:05 pm #514312

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.

Start building better websites today.