Banner homepage image in classic theme

[Andrew_Johnson]

I’d like to use a banner-style homepage image with the classic theme, the banner to resize and fill the screen width. At present if I upload a background image it is fixed size, anchored top left and repeats, so the bottom and right hand size are either cut off or show a tiled effect.

The .homepage_image style has background-size: cover but this seems to be overridden by the inline background style:

In Firefox the image inspector shows the following:

element {
background: url(‘https://www.whp-journals.co.uk/public/journals/1/homepageImage_en_US.png’);
background-color: rgba(0, 0, 0, 0);
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: url(“https://www.whp-journals.co.uk/public/journals/1/homepageImage_en_US.png”);
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
}
.homepage_image {
min-height: 35vh;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}

(background-size and background-position are struck out in the css panel_)

If I upload my own css I can modify min-height but I can’t get the image to resize as I want. Can anyone help?

[rcgillis]

Hi @Andrew_Johnson,

Can you indicate which version of OJS and which version of the classic theme you’re using, please?

-Roger
PKP Team

[Andrew_Johnson]

Thanks for the reply.

Current OJS version: 3.2.1.4

Classic v1.0.4.0

[NateWr]

Hi @Andrew_Johnson, thanks for reporting this. I’ve fixed this in the main branch of the theme and it should go out with the next update. However, that will likely be a version of the theme that is only compatible with OJS 3.3.

You can see how this is fixed and manually apply the fix here: Don't overwrite background-cover CSS properties for homepage image · pkp/classic@c52d63e · GitHub

[Andrew_Johnson]

Thank you so much! This is really helpful.

Best,
Andrew

[Andrew_Johnson]

Just to be clear about this: can I apply the fix in OJS 3.2, or do I need to upgrade to 3.3 first?

[Andrew_Johnson]

OK, forget my last post. Your fix works for me. Thanks again for taking the trouble to look into this.

Andrew