תמונת רקע קבועה, צדדים מותאמים לגודל

[א"ב]

וואלה, איזה ניסוח לא לענין - - -
אני מעצבת אתר,
ומסתבכת בתכנון הHTML:
רקע האתר אמור להיות תמונה במיקום קבוע (ברוחב האתר - 960px),
הצדדים הם המשך התמונה, אבל בהתאם לרוחב המסך הם אמורים להיות חשופים או מוסתרים.
אני מקוה שהצלחתי להבהיר את הסתבכותי,
ומה-זה אשמח אם תוכלו לעזור לי בקידוד הנכון.
תודה!!

 

[dem]

מקווה שהבנתי,
נשמע שאת רוצה שיהיה רקע img ל תג של html למשל, שזה כל הדף, ופשוט למקם אותו שתמיד יהיה באמצע הדפדפן. וכך מה שיראו זה אמצע התמונה. שזה עושים בעזרת margin 0 auto

 

[תמנתי ווב דיזיין]

תגדיר תמונת רקע ל BODY. אם את רוצה שזה יהיה רספונסיבי, אז אם אני לא טועה, מגדירים רוחב = 100%. מרג'ין ימין ושמאל AUTO

 

[רחל ז.]

מה הכונה מיקום קבוע?
תמונה לא נגללת?
בכל מקרה, מכינים תמונה גדולה, לפי המסך הכי רחב שאת רוצה לתמוך בו, או תמונה שהשוליים שלה מטושטשים ומתחברים יפה לרקע האתר.
את התמונה מביאים בתגית body ומגדירים שם:
background-position: center top;
background-repeat: no-repeat;
אם רוצים שהתמונה גם לא תגלל- מוסיפים: background-attachment: fixed;

זה יהיה רספונסיבי בכל מקרה כיון שלא הגדרנו רוחב ל-body.

 

[תמנתי ווב דיזיין]

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

 

[Shlomi]

http://css-tricks.com/perfect-full-page-background-image/

 

[רחל ז.]

אני חושבת ש-width:100% עובד רק על תמונה בתגית img, לא על תמונות רקע
הרעיון הוא שתמיד יראו את מרכז התמונה ובה יהיו האלמנטים החשובים בכל רוחב מסך ולא שתמיד תראה התמונה בשלמותה

אבל אולי אני טועה.

 

[Shia]

אסתר, הייתי שמח לעזור, אבל לא הסברת את כוונתך מספיק ברור.

רחל, בcss3 אפשר להגדיר רוחב וגובה של תמונת רקע, אמנם זה לא נתמך בדפדפנים ישנים, אבל האפשרות קיימת.

 

[א"ב]

תודה לכולכם,
אבל באמת כנראה שלא הגדרתי נכון את כוונתי.
הרקע של האתר צריך להיות אימג'.
האימג' אמור להחתך ל-3:
1. החלק האמצעי של האתר, שאת המרגין שלו אני מגדירה: 0 auto.
2-3: החלקים הימני והשמאלי של האתר, שהם כאילו המשך של האימג' (למרות שעל פניו הכל נראה כתמונה אחת - אבל למעשה היא מחולקת ל-3).
החלק הימני והשמאלי של האתר זה המשך התמונה, והם אמורים להחשף / להסתתר בהתאם למה שהמסך מאפשר, ולא לשנות את הרוחב שלו, אחרת לא יתאים כפאזל לתמונת הרקע הראשית, שממוקמת באמצע של האתר.
אני מקוה שעכשיו אני ברורה...

 

[תמנתי ווב דיזיין]

תעשי תמונה אחת ברוחב 2500 פיקסלים, תגדירי אותה לבודי כמו שהוסבר למעלה.
תעצבי אותה שב 960 יהיה העיצוב שאת רוצה ובצדדים מה שלא חשוב לך אם ייעלם.

 

[מיליארד]

אם הבנתי למה את מתכוונת-
תני את התמונה כ background image ל body
תכיני תמונה אחת ברוחב 1920 פיקסלים והיא תתאים את עצמה לכל מסך

 

[מיליארד]

הקדמת אותי, תמנתי

 

[א"ב]

בגלל שהHTML הולך להיות גם אתר וגם להשתלב בתוכנה, אני חושבת שאני צריכה את השיטה שכתבתי (אני צריכה לברר את זה עם המתכנתת), שהאמצע 960px ובלתי משתנה, והצדדים מוסתרים או מתגלים.
איזו שיטה תתאים לזה?
(אברר שוב את הענין, אבל אני חושבת שזה יהיה חייב להיות ככה).

 

[תמנתי ווב דיזיין]

אולי תתני דוגמא לאתר שיש לו אפשרות כזו שנראה במה מדובר

 

[Shia]

או שאני לא מבין מה מיוחד במה שאת כותבת, או שפשוט אין בזה שום דבר מיוחד, אלא זה בעצם פשוט תמונת רקע סטנדרטית לbody.

ברגע שמגדירים תמונת רקע לbody עם פוזישן למרכז, ממילא כשמקטינים, מה שבצדדים נעלם.
במרכז, מכניסים דיב עם הגדרת רוחב (960px) נגיד ומרג'ין auto, ובתוכו מכניסים את התוכן.

ככה מתקבלת בדיוק התוצאה שאת מתארת (למיטב הבנתי), וזו כנראה הצורה הכי נפוצה של בניה שאני מכיר.

 

[Shia]

http://jsfiddle.net/8HBXQ/

 

[א"ב]

עם תמונת הרקע לבודי לא הסתבכתי, הסתבכתי עם תמונות הרקע לצדדים.

 

[תמנתי ווב דיזיין]

הצדדים אמורים להיות חלק מהבודי.
ובד"כ מי שיש לו מסך קטן לא רואה ומי שיש לו מסך גדול רואה.
או שלא הבנתי מה את רוצה
אולי תראי אתר עם דוגמא של איך הרקע שם כמו שאת רוצה

 

[Shia]

עם תמונת הרקע לבודי לא הסתבכתי, הסתבכתי עם תמונות הרקע לצדדים.

לפי התגובה שלך אני מבין שבאמת לא הבנתי מה את מנסה לעשות...

 

[YDM]

היי תראי דוגמה איך צריך להיות אתר

את צריכה למקם את האמצע אם הבנתי אותך נכון אז ככה זה צריך להיות כדוגמת זה שהרקע
יתפרס תמיד על כל רזולוציה אבל האתר תמיד ישאר באמצע
http://telecom4u.co.il/