Image/logo instead of topp text

• 

  optimaltkosthold · Member · May 20, 2014 at 7:14 pm

  • Copy link
  • Add topic to favorites

  Hellow, I woul like to upploud logo (appr. 250 X 250 size), and I want it to stay left to image topp tekst. How can I do it?

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

• 

  thesacredpath · Member · May 26, 2014 at 6:32 pm

  • Copy link

  Hi, the following code is set for a 250px square image. You may want to downsize it to about 150px square though as it is way taller than the site title and description.

  Upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image.

  This would be the code if you are going to use a 250px square image.

  .site-title, .site-description {
      padding-left: 270px;
  }
  hgroup {
      background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
      height: 250px;
      margin-bottom: 20px;
      background-size: contain;
  }
  @media screen and (max-width: 500px) {
      .site-title, .site-description {
          padding-left: 170px;
      }
      hgroup {
          height: 150px;
          margin-bottom: 20px;
      }
  }
  @media screen and (max-width: 400px) {
      .site-title, .site-description {
          padding-left: 110px;
      }
      hgroup {
          height: 100px;
      }
  }

  If after trying the above you want to downsize your image to 150px square, use the following code instead. It also downsizes the image at 400px so that the site title and description can still be read on smaller screens such as phones.

  hgroup {
      background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
      height: 150px;
      margin-bottom: 20px;
      background-size: contain;
  }
  
  @media screen and (max-width: 400px) {
      .site-title, .site-description {
          padding-left: 110px;
      }
      hgroup {
          height: 100px;
          margin-bottom: 40px;
      }
  }