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.

No items found.