Working with Swapping Images

• 

  greatlakesjobfair · Member · Jun 22, 2015 at 7:02 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am trying to swap out an image this is part of a featured post and is displayed in the theme I amusing by stretching the image instead of using a different size image.

  I have been working with CSS to try to fix this so that the image display at 600px is one that is sized to be clear when displayed.

  I have been able to get Chrome to work with the CSS however Firefox and IE will not.

  Here is my Code – Any help would be much appreciated!!!!

  /* Media Query Fix for Banner */
  
  @media screen and (max-width: 600px) {
  #masthead {
  background-image: url(‘https://greatlakesjobfairdotcom.files.wordpress.com/2015/06/smallbanner2015.png’);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  float: none;
  margin: 0 auto;
  }

  #lead img, #interior #lead img, .div #lead {
  content: url(‘https://greatlakesjobfairdotcom.files.wordpress.com/2015/06/415wide.png’);
  float: none;
  width: 90%;
  height: auto;
  margin: 0 auto;
  display: block;
  }

  }

  The blog I need help with is: (visible only to logged in users)

• 

  spokestudio · Member · Jun 22, 2015 at 11:48 pm

  • Copy link

  Hello!

  It may be an issue with browser support for the “background-size:contain;” property. You can see browser support at the bottom of this article:

  background-size

  Which version of Firefox and IE are you using?

  Let me know!

• 

  thesacredpath · Member · Jun 24, 2015 at 12:31 am

  • Copy link

  @greatlakesjobfair, see my response here: https://en.forums.wordpress.com/topic/mimbo-pro-widgets-in-footer-responsive?replies=7#post-2412478

  I’m seeing your header change just fine in Firefox. Let us know which version you are using.