Gwyned Trefethen asked 5 years ago
I am swapping out my twenty sixteen theme for the latest twenty twenty-one theme. The twenty twenty-one theme has a clean crisp appearance that suits my site. However, I would like to be able to modify the banner/header by overlaying it on top of a faint image of my art. Is this possible? If so, as an artist and not a tech whiz how do I go about doing this?
2 Answers
Shawn Hesketh answered 5 years ago
Happy to hear that Twenty Twenty-One is a fit for your site. While it doesn't include an interface for adding a background image to your header, that can be accomplished by adding some CSS in Customizer > Additional CSS.
First, go to your Media Library and upload the image you wish to use for your header background. Then, copy the URL to the image file. You'll need it in the next step.
Now, go to: Appearance > Customizer and open then Additional CSS module at the bottom.
In the Twenty Twenty-One theme, the header is identified by the ID
#masthead.
So, here's an example of some CSS that will add a background image, but also ensure that it's full-width, and that the title and menu are still positioned correctly:
#masthead { background-image: url("https://yourdomain.com/wp-content/uploads/example/path/to/image.png");
background-position-x: 50%;
background-size: fill;
max-width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 10%;
padding-right: 10%;
}
If you're not comfortable editing CSS, or you want further customizations, you can hire a WordPress coder to knock out simple tasks like this at Codeable. Get a free, no-obligation quote right here on our site.
Hope this helps!Gwyned Trefethen answered 5 years ago
Wish I had the CSS chops to handle this. I followed your directions to the best of my ability, made sure to publish the CSS I thought you recommended but nothing happens. Here is what I entered.:
#masthead { background-image: url ("https://wp.me/aaOkpP-eS"); background-position-x: 50%; background-size: fill; max-width: 100%; margin-left: 0; margin-right: 0; padding-left: 10%; padding-right: 10%; }
Is there something I added that shouldn't be included or didn't know to add that is missing? Currently I am running a blog vs site, but the blog has a couple of pages, such as About and Contact. Could this be the problem. I know I could hire someone to help me, but since this is a portfolio site vs. a business, I really don't want to spend the money. Hence the free theme and joining WP101.
Shawn Hesketh
replied 5 years ago Hi Gwyned,
There appears to be a syntax error in your code snippet above.
background-image: url (“https://wp.me/aaOkpP-eS&”);
Should be:
background-image: url ("http://blog.gwynedtrefethen.com/wp-content/uploads/2021/01/Sunrise-Over-Gulf-River-FV-scaled-e1609852105307.jpg");
Note the straight quote marks. Your snippet included curly quotation marks, which won’t work in CSS.
I also swapped out the URL for the actual path to your background image. You could shorten that to:
background-image: url ("/wp-content/uploads/2021/01/Sunrise-Over-Gulf-River-FV-scaled-e1609852105307.jpg");
See if those changes work for you.