Underlaying Image To Site Title

• 

  flazinhotravels · Member · Oct 7, 2017 at 12:48 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am trying to underlay an image to my site title, so it will have a nice travel photo with the site title as it is over the top.

  http://www.flazinhotravels.com.

  I have tried to just embed a logo image with this on but logo does not stretch across the width of the page.

  Can anyone advise how this can be done?

  Thanks

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

• 

  timethief · Member · Oct 7, 2017 at 9:05 pm

  • Copy link

  Hi there,

  Have you consulted the theme description page that has set up instructions and a link to the live demo site at https://wordpress.com/theme/canard? Canard supports the Site Logo feature. http://en.support.wordpress.com/site-logo/

• 

  timethief · Member · Oct 7, 2017 at 9:06 pm

  • Copy link

  P.S. I just looked up and noted this thread was in the CSS customization Forum and apologize for responding. Please be patient while waiting for help frm another Volunteer or Staff.

• 

  thesacredpath · Member · Oct 8, 2017 at 12:29 am

  • Copy link

  Hi there, you can give this a try. I just randomly grabbed an image from your Media Library. It would be best to use an image that is about 1600px x 250px or so. Just replace the URL in the background declaration with the URL of your intended image.

  #masthead {
    background: url('https://flazinhotravels.files.wordpress.com/2017/09/img_1584.jpg') no-repeat scroll center center / cover;
    padding-bottom: 15px;
  }
  .search-navigation {
    background: #EBE6E0;
    padding-bottom: 10px;
  }
  .site-branding {
    margin-top: 40px;
  }

• 

  flazinhotravels · Member · Oct 8, 2017 at 9:39 am

  • Copy link

  Hello,

  That works perfectly, thank you very much!

• 

  flazinhotravels · Member · Oct 8, 2017 at 10:17 am

  • Copy link

  Actually I have tried it with various images and the correct pixel ratio you suggest above. The only issue I am seeing is the images are a little blurry and certainly not as sharp as others on my home page. Is there any reason for this?

• 

  thesacredpath · Member · Oct 9, 2017 at 9:07 pm

  • Copy link

  When an image is inserted via a header image function, there is additional code that keeps the image looking good at all window widths. When we insert an image using a background declaration via CSS, that image comes in at the full size and then the browser takes care of any adjustments to the image size for various screen/window sizes, and browsers aren’t good at that as they do not have the sophisticated code that the theme and WordPress software have to keep the images looking as sharp as possible.I would suggest using an image where the softness that occurs isn’t an issue.

• 

  flazinhotravels · Member · Oct 9, 2017 at 9:36 pm

  • Copy link

  Ok, thanks I will check that out

• 

  thesacredpath · Member · Oct 11, 2017 at 2:00 am

  • Copy link

  You are welcome.