Retina ready image on header logo

[Eduardo]

I'm currently working on Genesis's Agency Pro theme and I'm trying to display an image on the header logo that can be seen nicely on retina screens.

I've looked at a couple of articles already, but none of them have gotten me what I wanted.

One article suggested I go into functions.php and modify the Custom header function to allow for images twice the size that the theme currently allows.

//* Add support for custom header
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 120, //* was 60
'width' => 600, //* was 300
) );

So far, this has gotten me the closest to what I want to see. I test it on my iphone and it looks great, but now the image gets cropped at larger viewports. I know I'm almost there. What can I do next?

http://staging.trytobosa.org

[James]

Hi there

that's fine making the logo twice the size

you just need to add contain to your site-tite css

.header-image .site-title a {
background-size: contain !important;
}

[Eduardo]

Worked great Jamie! Thanks.

[Author]

Posts