Logo as Background Image with Text Below

1. Do you mean you want to use only a header image up top, instead of a logo + site title/tagline? Have you tried Customize > Header Image to see if that looks how you’d like. (Uncheck the box that makes the site title/tagline show in Customize > Site Title.)

2. This may be easier to do when there are some things up there. Once you add in what goes there, do you have details on how you’d like to change it?

3. Not sure I know what you mean here (or maybe you’ve already done it). The footer where the copyright message is is the same width as the horizontal menu bar at the top right now. Are you looking to change it somehow still?

1. Place Background image in Header 1 (Masthead/Site-Branding) with opacity.

2. Place logo on far left in opaque background image with text on far right.

Hope I’m not asking for too much ~ I’ve been methodically researching and watching videos on HTML & CSS coding to learn as much as I can. I really appreciate the help! I’m just trying hard to get something up for my brother so he can generate some business.

Temporarily placed the logo so you can have a better feel of what I want to accomplish.

Strike the 1st question ~ I actually think the white background is fine because it needs to be clean and simple. However, placing a solid outline border around all boxes would be nice. Thanks, Sarah!

RE: Header Image in lieu of Logo in Site Title/Tagline ~ Playing around with that idea in Pixlr. Open to any suggestions you offer, Sarah!

placing a solid outline border around all boxes would be nice.

Where do you mean exactly?

Header Image in lieu of Logo in Site Title/Tagline

Using a Header Image up top sounds like a good option to me. The recommended size is 1180 × 160 pixels. (You can probably make it more than 160 tall without a problem, but I’d stick to that width.)

If you decide to use the Header Image, be sure to add a Site Title in Customize > Site Title and un-check the “Display Site Title and Tagline” box if you want to hide it. (By adding the title but hiding it, the title is still attached to your site for search engines and will show in the tab on browsers, etc. but won’t show on the page in the masthead.)

1. I’ve played around in Pixlr and made 5 different header images. Overall Header Image size is 1180 x 160 as recommended. Current header image has logo image aligned left (190 x 125) and text image aligned right (Calibri / #002061 / Regular / 16pxs).
2. Site Title & Tagline added & unchecked as you advised. I understand the rationale.
3. Overall, the Header Image, Main Navigation Menu, Site Footer, and all Content Wrappers (if I’m correctly referring to those content boxes) need an outline border. I’m thinkimg a nice shadow / gradient outline border for a varianct attribute while at the same time providing an element of delineation.

Welcoming and most appreciate of your suggestions!

Great!

You could try out different CSS options to figure out the look you like there.

Target #masthead or .site-header and it’ll select the entire area up top as one block. (Or you can use your browser inspector to find other options for what to target if you want a different area.)

For example, if you add this CSS, you’ll see a solid, 20px, red box go around top section:

.site-header {
  border-style: solid;
  border-size: 20px;
  border-color: red;
}

There are border options listed here: https://www.w3schools.com/css/css_border.asp

Or if you mean you want to add some space to the bottom so your background can be seen there too, try this:

#page {
  padding-bottom: 100px;
}

Happy tinkering! ??

Hi Sarah! I added a border-top to the main navigation menu (using the border-bottom as an example) then did the same for the site-footer. Also reduced the height of the site-footer. Slowly but surely learning ~ I think my main obstacle was the fear of messing up. Then I told myself: Hey ~ It’s a child theme… If I put it in and it doesn’t work, I can take it out! Right? Just don’t like how it looks when I inspect with Chrome or Firebug because I see how much I’ve edited. Trying your suggestions next!:)

Exactly! I mess things up all of the time. It’s part of my process! ??

I tried the .site-header change and see what you’re saying. I’m trying to figure out to add the border to the top, right, and left. Don’t need it under the main navigation. Just outside borders to delineate the background image pattern from the site-header, site-footer, and main content. Follow me?

Left it so you could see what I’m talking about. I appreciate your help so much!!!

To add a border, but not have it go all the way around, you can use things like border-bottom, border-left, and so on to your .site-header (or whichever) CSS.

There’s an example of border-top here: https://www.w3schools.com/cssref/pr_border-top.asp