How do you make the Header Image Responsive?

  • Resolved cbeaman

    (@cbeaman)


    11 years, 1 month ago

    Hi,

    I am trying to make the header image responsive… seen here

    I am pretty sure I can do this in the style.css, but I’m not quite sure how?

    This is the code I have now:

    a#headerimg-keyz  {

  background: url("images/Header_Keyz.png")
  no-repeat bottom center;
  display: inline-block;
  max-width: 100% !important;
  width: 1200px;
  width: 85.714rem;
  height: 193px;
  height: 13.7857rem;
  }

    I have this working on my main site, but can’t get it working for this custom header

    main site here

    I really appreciate your help!

Viewing 1 replies (of 1 total)
  • Thread Starter cbeaman

    (@cbeaman)

    I figured it out… For anyone who is interested

    my solution was just to create a custom page template and then send it to a new header.php that I created, then I just replaced the img src with the custom header that I wanted

    <?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="https://www.robotspacebrain.com/wp-content/uploads/2014/01/Header_Keyz-2.png" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>
Viewing 1 replies (of 1 total)
  • The topic ‘How do you make the Header Image Responsive?’ is closed to new replies.

Tags