20-12 lanason.co.uk – Entering graphics into header

• 

  lanason · Member · Aug 1, 2015 at 12:49 pm

  • Copy link
  • Add topic to favorites

  I’ve got a logo on my front page

  but how can i add a graphic either above or below the menu bar (ideally both)
  I really want it in the blank space between the logo and phone no

  The graphic need to be full page with and the logo and phone no superimposed

  whats the art of the possible????

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

• 

  g471n · Member · Aug 1, 2015 at 3:43 pm

  • Copy link

  If you have an image 1000px x 202px you could use it for the background of the site header with this `custom CSS.

  You would need to replace the link – <strong>url(“https://”)</strong> with the link to your new graphic.

  .site-header {
      background-image: url("https://lanason.files.wordpress.com/2015/07/lanasonlogov161-e1438192215666.png");
  }

• 

  lanason · Member · Aug 1, 2015 at 5:31 pm

  • Copy link

  so you are suggesting creating a new image containing the original logo and the additional graphics

• 

  g471n · Member · Aug 2, 2015 at 7:28 am

  • Copy link

  No. The new graphic will be in the background behind your logo and and text.

• 

  lanason · Member · Aug 2, 2015 at 4:09 pm

  • Copy link

  Sorry I dont understand what you mean.
  i can t see a strong>url(“https://”) and if i replace the https://lanason.files.wordpress.com/2015/07/lanasonlogov161-e1438192215666.png surely I will loose the logo

  confused ………………

• 

  g471n · Member · Aug 3, 2015 at 6:09 am

  • Copy link

  Ok. I am confusing things by using your logo graphic in my example.

  If you add the following custom CSS with the link to your new graphic, the new graphic will display in the background of the .site-header container.

  Your logo and phone number will still be visible in front of the background image.

  .site-header {
      background-image: url("https://LINKTOYOURNEWIMAGE");
  }

• 

  lanason · Member · Aug 3, 2015 at 9:41 pm

  • Copy link

  Ok I see how that works now thank you –

  is there a good size for an image and how does it work on a tablet and mobile???

  Can I stop the “repeating” of the image
  and can i adjust the height of the header panel?

• 

  timethief · Member · Aug 3, 2015 at 9:45 pm

  • Copy link

  Excuse me but you neither designed nor created the Twenty Fourteen theme. You simply restyled some aspects of it so what’s in your footer is not accurate.

• 

  lanason · Member · Aug 4, 2015 at 6:21 am

  • Copy link

  Excuse me, but I am not claiming to have desiged the 20-12 theme!!!!!

  I did however, design the logo, layout / colours and created the content, as opposed to a 3rd party. It clearly has a reference to 20-12 below. Would you rather I said “based upon 20-12”

• 

  g471n · Member · Aug 4, 2015 at 7:07 am

  • Copy link

  1000px x 202px for the graphic. This seems to be the full size of the .site-header container.

  I’m not sure how well this will display on smaller tablet screens. I’ll do some more research and get back to you.

• 

  g471n · Member · Aug 4, 2015 at 12:46 pm

  • Copy link

  You could try something like this. It has a repeating pattern that would view well at any screen size.

  .site-header {
      background-image: url('https://myfreshfoodgarden.files.wordpress.com/2015/08/background-pattern.jpg');
  }