Larger Header Arcane theme.

pmalinowska · Member · Oct 5, 2017 at 10:53 am
Copy link

Add topic to favorites
Hello!

I know the reccomended height of the header is 150px
but is there a possibility to make it bigger, like 300px
without the image bing automatically cropped? Maybe
CSS would serve for this purpose?

Thank you in advance for the reply!

The blog I need help with is: (visible only to logged in users)
gemmacevans · Member · Oct 5, 2017 at 12:05 pm
Copy link
Hi pmalinowska,

I know the reccomended height of the header is 150px is there a possibility to make it bigger, like 300px without the image bing automatically cropped? Maybe CSS would serve for this purpose?

The Arcane theme automatically scales header images to accommodate different screen sizes, which means some degree of cropping will occur.

The following CSS could be used to increase the height of the header image to 300px:
```
.site-header {
	height: 300px;
	background-position: center center;
}
```
This code can be pasted into the CSS editor in My Sites > Themes > Customise > CSS, then click Save & Publish.

I’ve added a line of CSS which tells the image to scale from the centre. Important parts of an image are usually in the centre, so this should lessen the effect of cropping in that area.

Using the CSS above, it’s best to upload a header image 300px tall (or larger) otherwise it could looked blurry when scaled to fit larger devices.

If you need any further help, you’re welcome to reply here or contact us from this page:

https://wordpress.com/help/contact/

Thanks!
pmalinowska · Member · Oct 5, 2017 at 12:22 pm
Copy link
Hello gemmacevans,

thank you so, so much! Your help is, as always,
priceless! :-)

This string of code is exactly what I’ve been looking
for, I’ve tested out a couple of codes with a different
syntax and they didn’t work, but this one has just
done the job. The theme crops the image to 150px
even if I upload a 300px heigh header (I’m going to
do it myself from scratch, therefore the need for
a custom size), but after using the CSS suggested
by yourself the area extends to accomodate the
entire image.

Once again, many thank for such a quick and
professional help, have a lovely day ahead :-)

Warm regards,
gemmacevans · Member · Oct 5, 2017 at 1:30 pm
Copy link
Hi pmalinowska,

This great to hear and I’m glad I could help :)

If there are any other changes you would like to make, just get in touch and we can look in to whether they are possible.

Happy blogging!

No items found.