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?