I’m trying to figure out why the !important attribute is necessary.
Also, I found that putting the background-image in #header and the background-color in .wrap only works on the new Legacy HTML version. It does not work on the old version where you have to put the background-image AND background-color in the #header.
This seems to work quite well for http://justbeadad.com/wp/:
@media only screen and (max-width: 400px) {
#header {
background-image: url(http://justbeadad.com/wp/wp-content/uploads/dad-header-320.jpg) !important;
background-repeat: no-repeat;
height: 52px;
min-height: 0px;
}
}
Thanks for all your help on this. The Genesis Responsive header made things easier, but the report on the Gen board is that it does not work for HTML5 themes and that Nick is fixing it… no idea when it will be released. All in all the above is probably a better solution… the fewer plugins the less potential conflicts you have down the road.