Replace #site-title with image?

• 

  sbakis · Member · Jan 11, 2018 at 3:51 pm

  • Copy link
  • Add topic to favorites

  Hi Guys

  I am trying to help my wife with her site. She wants to add her pen name as an image using the same fancy font that is used through her books. We could not get the google fonts or other add in to work properly so I was hoping a transparent image would do the trick.

  Here is the code we used. When viewing on a PC it is fine but on a mobile device it shrink the rest of the content on the page. Any help would be greatly appreciated.

  h1#site-title a {
  color: transparent;
  }
  h1#site-title {
  background: url(“http://www.brianamichaels.com/wp-content/uploads/2018/01/BMTitle.png”) no-repeat scroll 0 0 transparent;
  color: transparent;
  height: 95px;
  width: 576px;
  }

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

• 

  sbakis · Member · Jan 11, 2018 at 5:33 pm

  • Copy link

  I have tried replacing height/width lines with “img {max-width:100%}” but I must not be using the statement right. img shows red.

• 

  sbakis · Member · Jan 11, 2018 at 6:23 pm

  • Copy link

  fixed with…..

  @media all and (min-width: 1000px) /*or whatever width you want the change to take place at*/ {
  #header {
  background-image: url(http://www.brianamichaels.com/wp-content/uploads/2018/01/BMTitle.png);
  background-repeat: no-repeat;
  background-position: center;
  }
  }

  @media all and (max-width: 1000px) /*or whatever width you want the change to take place at*/ {
  #header {
  background-image: url(http://www.brianamichaels.com/wp-content/uploads/2018/01/BMTitlesm.png);
  background-repeat: no-repeat;
  background-position: center;
  }
  }

• 

  avydun · Staff · Jan 11, 2018 at 6:27 pm

  • Copy link

  Just to clarify, are things resolved now?

• 

  sbakis · Member · Jan 11, 2018 at 6:30 pm

  • Copy link

  Thanks, I think so… The only odd thing I just noticed is on my iphone the site seems to scroll right for a HUGE amount of blank space. No other site does that on my phone…. Any suggestion?

• 

  avydun · Staff · Jan 11, 2018 at 6:33 pm

  • Copy link

  As much as I would love to help, we’re unable to assist here on the WordPress.com forums. These forums are only for WordPress.com sites.

  For your reference http://www.brianamichaels.com/ is a self-hosted WordPress (WordPress.org) site and not hosted on WordPress.com.

  For WordPress.org questions, you can post on WordPress.org forums: https://wordpress.org/support/

  You can learn the differences between a self-hosted WordPress (WordPress.org) site and a WordPress.com site here.

• 

  sbakis · Member · Jan 11, 2018 at 6:46 pm

  • Copy link

  great thanks, please close thread