תמונת header

בוקר טוב,

הכוונה לתמונה בבר כותרת?

מדובר פה בתמונה מאוד רחבה, ולכן היא נכנסת כולה לבר כותרת במובייל.

אבל אתה יכול להכניס את הקוד הבא:

@media (max-width:768px) {
#title-bar {
height: 100px !important;
background-size: contain !important;
background-repeat: no-repeat;}}

אז הכנס את הקוד הזה במקום הקודם:

@media (max-width:768px) {
#title-bar {
height: 100px !important;
background-size: contain !important;
background-repeat: no-repeat !important;}}

שים לב שבקוד מצויין שזה יופיע עד רוחב של 768px.
אתה יכול לשחק עם הערך הזה לפי הבנתך.

בעקרון הייתי ממליץ שתיצור תמונה נוספת, מותאמת למובייל ואז תגדיר אותה ב-CSS כך שתופיע רק במכשירי מובייל.
אין דרך לגרום לאותה תמונה להיראות באופן מיטבי בכל רזולוציה ורזולוציה.

1. כדי שלא יכלול את הטאבלטים את יכולה להכניס כך:

@media (min-width:360px) and (max-width:768px) { }

2. אכן מדובר בתמונת הדר רק לסמארטפון, הרוחב המקסימלי הוא בסביבות 360 פיקסלים.

ולכן רק לסמארטפון את יכולה להכניס את הקוד כנ"ל.