תמונת כותרת במובייל

אני מציע שתיצרי תמונה ברוחב 500px נניח, שתהיה מיועדת רק למובייל.
אח"כ תכניסי ל-CSS משהו כזה (ובתוך הגרשיים תכניסי את הלינק לתמונה החדשה):

@media only screen and (max-width: 500px) {
#page-header.page-header-style-custom_bg {
       background-image: url(" ");
    }
}

מה שיקרה זה שכל פעם שיצפו באתר ברזולוציה נמוכה מ-500px תוצג התמונה הקטנה.

תעדכני אותי.

הבעיה במובייל לא נגרמת בגלל הגובה.
אלא בגלל שיש כל מיני רזולוציות.
תנסי לעצב תמונה כזאת לרוחב המינימלי (נניח 320px של אייפון 4) ולפי זה תגדירי את זה.