Non-Responsive Header Images

  • Resolved angeladesign

    (@angeladesign)


    9 years, 4 months ago

    https://buildings.techmatemn.com/capabilities

    I have responsive header images due to the global css max-width:100%
    How can I override this for the gch-header images? I have applied min-height:400px to force the height to 400, but can’t figure out what to do with the width. If I remove the max-width:100% I get horizontal scrolling due to the size/width of the header image(2000px). (Note:I do not have responsive header images in firefox, but get the horizontal scrolling?) My goal is to have non-responsive header images, no horizontal scrolling, and overflow hidden.

    Thoughts!? Thanks.

    .page .gch-header img {
	min-height:400px;
}
    .page .gch-header {
    position: absolute;
    top: 0;
    z-index: -1;
}
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hey there,

    As a temporary solution, try adding this to your custom CSS. 

    .gch-header-image-inner {
display: none;
}

.page-id-18 .gch-header {
background: url('https://buildings.techmatemn.com/wp-content/uploads/2015/10/SB-HEADER_3.jpg');
background-size: cover;
background-position: center;
width: 100%;
min-height: 400px;
}

    If that works for you, you’ll need to add some php functions so that your featured-image for each page is set as the background to .gch-header.

    Like this: 

    <?php
// Get Featured Image
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $size = 'large', false, '' );
?>

<div class="gch-header"
style="background: url(<?php echo $src[0]; ?> ) !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: top center !important;"
></div>
    Thread Starter angeladesign

    (@angeladesign)

    Thank You!! The temporary css for the capabilities page worked like a charm, but can’t get the php function to do the same in the functions.php file — thoughts?

    // Get Featured Image
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $size = 'large', false, '' );
?>

<div class="gch-header"
style="background: url(<?php echo $src[0]; ?> ) !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: top left !important;"
></div><?php

    It looks like you added the php to header.php. You want to add and edit the page.php template or the php file where the original <div class”gcp-header”></div> exists.

    Thread Starter angeladesign

    (@angeladesign)

    Perfect! Thank you! I did change one thing: $size = ‘large’ to ‘full’
    Thanks a million!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Non-Responsive Header Images’ is closed to new replies.