Featured Header Image (Pages)


Our site is just about complete. I am working on both a 24" and 27" inch screen and just viewed the site on a 15" laptop screen to find out that on smaller screens the “featured image - wide” template does not allow the featured image to resize when viewing on smaller screens. Instead it centers in as you resize the browser or view on smaller screens. The rest of the text and the website adjusts accordingly as you resize the browser. Is there a plugin or way to make the featured image resize smaller as you decrease the size of the browser or so that the entire featured image remains locked and gets smaller on smaller screens?

I hope this makes sense. Thanks!

Again our site is:

Also you can view this page to see what I am talking about above:



That’s how covered background images work. Anyway, in your case you can change the way it works a bit because your image is large enough.

Use this in a custom CSS plugin:

.header-image.single-header-image {
      background-size: contain;
      background-color: #000;

I’m sorry! But that it awesome that you provided this CSS plugin code. Works perfect for what we needed.

Help as always - Always appreciated!

We will be buying the Perth theme for our corporate site most likely now!

Have a great day!