- This topic has 11 replies, 3 voices, and was last updated 7 years, 11 months ago by
.
-
Posts
-
I'm using genesis sample and trying to get my friend's website looking nice. He wants to use a B&W image with his business name as his header. This image at the site now is just a place holder. Here is the site.
http://wipsite.jsbmac.com/
Another site with a image that appears to work the way I'm looking for that I think also uses genesis sample.Additionally the image should run edge to edge or close to it. I can make the background color match if it doesn't all sit perfect.
http://wipsite.jsbmac.com/Learning front-end development, aspire to learn more.
The links won't show up even though they are bracketed by anchor tags??
Ugh, never mind...
Learning front-end development, aspire to learn more.
OK... site I'm working on.
Other site.
Sorry again. Total nubbin.
Learning front-end development, aspire to learn more.
Generally you need to make 2 changes to the code to the width and height of your header image:
1. Modify the values in the PHP code for custom-header in functions.php to match your header image.
2. And modify the values for CSS under the Site Header section in style.css to match your header image.
See this Tutorial
Oh man, I'm having a hard time... Why isn't this link followable to an image?
http://jsbmac.com//public_html/img/inspectorView.png
That sure looks like the URL to me...
Learning front-end development, aspire to learn more.
Hi Brad, thanks for the help. I checked out your tutorial and have a couple of questions.
First, in general, to get a responsive image do I need to create a bunch of media breakpoints and then upload appropriately sized images for each breakpoint?
Secondly, more specific, please look at these inspector view images. To center the image I added
element.style { background-position: center !important; }How do I change this in the CSS file? I pasted it into a bunch of different identifiers and didn't see any changes.
When I look at the inspector I see that it adds the style attribute to line 90 in the index file. Where is this file??
Learning front-end development, aspire to learn more.
It looks like you added it to the site header instead of site-title. I think this is close to what you are looking for:
.header-image .site-title > a { background-position: center !important; background-size: contain !important; float: left; min-height: 300px; width: 100%; background: url(http://wipsite.jsbmac.com/wp-content/uploads/2017/05/garlicana_header.png) no-repeat; }Added bonus it's becomes a clickable link. It looks good but starts to crop the edges when you get down to mobile but its still readable. be sure to not to add an !important tag to "background".
Thank you tarmadill!
It works really well. I added the code to the css file...
And get a result that leaves the original header image in place...
So I "inspect" it and turn it off...
Looks great, but I can't find that line of code!
Where is this index file with .custom-header .site-header on line 90?
I do not see it in includes/js?
Thanks again for all your help!!!
Learning front-end development, aspire to learn more.
Did you add it using the Appearance>Customize originally?
If not, if you are using Brackets or Notepad++ or similar you can use ctrl+shift+F to search in all files within the child theme directory, then look for the image file name.
Also, don't forget to change the url from localhost to your production site's domain name in your css file.
Honestly, you should have been able to use the Customizer to add the header and then use CSS to change it's size rather than hard-coding the image url in CSS. I realized I made the assumption that you used the customizer and it wasn't working right. Other than having to remember to change the image url in the CSS file there's no real issue for doing it the way I showed you though.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.