Try using a full path to your image, for example:
url(http://www.yourdomain.com/images/smartphoneheader.png)
Change http://www.yourdomain.com to your domain, of course. 🙂
You could also change
background
to
background-image
If that doesn’t work, could you provide a link to your site so I can take a look?
I am having the same problem. I want to use a different image for 450px. So, in CSS. I have this:
@media (max-width: 450px) {
#branding{ background-image: url(http://undertheboom.com/wp-content/uploads/2013/09/underboomphone2.jpg);
}
#branding .header-link {
min-height: 90px;
}
etc. }
My image is 450 x 90px.
But it does not work. The default header image gets cut off, and the smaller image does not load. I’m a novice, learning quickly, so it could be a missing bracket issue :-), but I can’t see it. Here’s the site: undertheboom.com
Thanks for any help!
Kay
PS I broke my site trying to fix this, so I have to go fix it before you can see the issue!
Hi there – I highly recommend you don’t make edits to your live theme. 🙂 It’s a much better idea to set up a local test server or a development site for testing.
Let me know when you’ve reverted it back and I’ll have a look.
I fixed the site,and I am now editing a child theme. I have this in the style.css to make a smaller header image load on smart phones:
@media (max-width: 450px) {
#branding{ background-image: url(http://undertheboom.com/wp-content/uploads/2013/09/underboomphone2.jpg);
#branding .header-link {
min-height: 90px;
}
}
This does not load the image, and the large header image does not scale. It just cuts off.
Site is: http://undertheboom.com
Hi there, it looks like your custom background image – the one you uploaded through the dashboard – may be overriding your mobile background image.
Could you try adding an !important declaration to the end of this line to force it, and let me know how it goes:
#branding{ background-image: url(http://undertheboom.com/wp-content/uploads/2013/09/underboomphone2.jpg) !important;
Kathryn, that did it! Thank you so much for your help. You’re a genius. 🙂
Glad that worked – thanks for letting me know!
No idea why I didn’t think of adding the important tag! Mine required the below:
@media (max-width: 450px) {
#branding{ background: url(images/smartphoneheader.png) !important;min-height: 90px;}
Now works! Thanks!
Glad it worked for you too, ianmarshall!
Hello,
I am having the same issue with the site I am using.
I tried the above meantioned fix and it resizes the image using the image I uploaded with 450×74 dimensions. My problem is that is scales it down better than it did before, but it still barely cuts off the header image. Also, it repeats the image and I would like it to only display it once. Any suggestions?
Here is the site: nourishingskinproducts.com
Also,
when I change my smartphone horizontally it messes up the scaling again. Do I need to add a custom image for each of the @media (max-width: sections? Thanks for your help.
Yes my workaround included a custom image for each @media section.
The reason why your image is repeating is because your image is only 74px high and the header is set to a specific height so you have two options. Set a no repeat in the css or edit the height of the header.
I can’t recall which file I edited to do this (I don’t use the theme anymore) but you will have to edit the min-height to the size of your image.
