Don’t edit TwentyThirteen! In a child theme, or using a CSS plugin, you can change the way the background image is positioned. For example:
.site-header {background-position: left top;}
Another approach is to make the image scale automatically, but I don’t think it looks good:
.site-header {background-size: contain;}
I agree with you that a set of images would be the best solution. I’ll be implementing this myself for a site I’m developing based on TwentyThirteen, and I’ll share the details here when I have them worked out. TwentyThirteen adjusts for six different screen widths, so it looks like up to six images might be needed.
I fixed my site’s child theme, and I’ve published sample code as a plugin called Header Demo.
Thanks Rod, I will definitely take a look at that when I get home!
Also, if I already edited parts of TwentyThirteen, can I change the name of the theme in style.css and create the child theme that way, or do I have to duplicate it first so that the default theme still stays in the Themes?
can I change the name of the theme in style.css and create the child theme that way
Not a child theme – no. That would create a completely new custom themes (although you would also have to change the theme’s folder name).
You need to move your changes to a child theme – it’s not duplicating the parent theme.
Thanks esmi and WPyogi, I will create a child theme.
Rod, I activated your plug-in, and right now it’s using the images you included, but my iPhone shows header3200… shouldn’t it be showing one of the smaller images?
You’re right, it should, and I don’t know why it doesn’t. I copied the @media selectors from TwentyThirteen, which uses max-width, but other advice I’ve seen recommends max-device-width. Perhaps that will work better.
Rod,
I installed your plugin and the headers are showing up the way they should be (nice!). However, I can’t figure out how to change the header images from the defaults that are showing up.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Nevermind – I found it. For those that are also wondering, the plug in puts images under the directory “wp-content/plugins/headers-demo/images”. Just re-create the files using the same filename, and upload the new images to the directory. Thanks again Rod – I was looking all over the place for a way to accomplish this!
So this worked when I installed for a parent theme, but it disappeared once I created a child theme. I’m sure there must be some editing to a .css file, but I haven’t a clue where to do that. Any ideas?
