Eleven40 Adding Larger Image In Header Area

[Tim.S]

Hi there,

I've been curious about adding either a larger image in the header area or just below it.

While I found two good articles concerning how to do it, see

Change Logo & Header Image Sizes In Genesis

https://sridharkatakam.com/tag/eleven40-pro/

I'm not sure how having a larger image will be handled on smaller screens such as tables and smartphones.

So in general, if we choose to add a larger image such has in the header or below it, will that make the site non-mobile friendly? Or, does the responsiveness of the design take care of that?

Thanks

Tim

[pxforti]

First, if you are not pretty comfortable with php and css, this is not a trivial change.

If you change the header image size, you'll have to change the css rules associated with it and change the functions.php code:
Below is the code for the header image. You'd have to change the width and height to match your image.

//* Add support for custom header
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 110,
'width' => 320,
) );

If the image is NOT the header image you add through the wordpress Header Customizer, then the images are set in stylesheet to be 100% max of their container. That means if the container shrinks, as in smaller devices, the image automatically shrinks with it.

---

writeNowDesign
WordPress and Ecommerce Website Design

[Tim.S]

Thanks for the advice. I do have a sandbox account to try this out on.

"If the image is NOT the header image you add through the wordpress Header Customizer, then the images are set in stylesheet to be 100% max of their container. That means if the container shrinks, as in smaller devices, the image automatically shrinks with it."

That helps me conceptualize this. Will give it a go on the sandbox account.

Thanks!
Tim

[cmagras]

But what if you DO want it to be the header image (added in "Customize")? Is there a way to still make it mobile friendly?

[pxforti]

Have you tried using background-size: contain !important;

?

---

writeNowDesign
WordPress and Ecommerce Website Design

[Author]

Posts