געבן דיין וועבזייַטל וויזשאַוואַל אינטערעס מיט הינטערגרונט גראַפיקס
בילדער זענען אַ וויכטיק טייל פון אַטראַקטיוו וועבזייַטל דיזיינז. דעם כולל די נוצן פון הינטערגרונט בילדער. די זענען די בילדער און גראַפיקס וואָס זענען געניצט הינטער געביטן פון אַ בלאַט ווי קעגן צו בילדער וואָס זענען דערלאנגט ווי טייל פון די אינהאַלט בלעטער. די הינטערגרונט בילדער קענען לייגן וויזשאַוואַל אינטערעס צו אַ בלאַט און העלפן איר דערגרייכן די וויזשאַוואַל פּלאַן וואָס איר קענט זוכן פֿאַר אַ בלאַט.
אויב איר אָנהייבן ארבעטן מיט הינטערגרונט בילדער, איר וועט בלי ספק אין דער סצענאַר ווו איר ווילן אַ בילד צו אויסשטרעקן צו פּאַסיק די בלאַט.
דאָס איז ספּעציעל אמת פֿאַר אָפּרופיק וועבסיטעס וואָס זענען געשיקט צו אַ ברייט קייט פון דעוויסעס און פאַרשטעלן סיזעס .
דעם פאַרלאַנג צו אויסשטרעקן אַ הינטערגרונט בילד איז אַ זייער פּראָסט פאַרלאַנג פֿאַר וועב דיזיינערז ווייַל נישט יעדער בילד פיץ אין די פּלאַץ פון אַ וועבזייַטל. אַנשטאָט באַשטעטיקן אַ פאַרפעסטיקט גרייס, סטרעטשינג די בילד אַלאַוז עס צו פלעקסטער צו פּאַסיק די בלאַט קיין ענין ווי ברייט אָדער שמאָל די בלעטערער פֿענצטער איז.
דער בעסטער וועג צו אויסשטרעקן אַ בילד צו דער הינטערגרונט פון אַ בלאַט איז צו נוצן די CSS3 פאַרמאָג, פֿאַר הינטערגרונט-גרייס. דאָ איז אַ בייַשפּיל וואָס ניצט אַ הינטערגרונט בילד פֿאַר די גוף פון אַ בלאַט און וואָס שטעלט די גרייס צו 100% אַזוי אַז עס וועט שטענדיק אויסשטרעקן צו פּאַסיק די פאַרשטעלן.
body {
הינטערגרונט: URL (bgimage.jpg) קיין-איבערחזרן;
הינטערגרונט-גרייס: 100%;
}
לויט caniuse.com, דעם פאַרמאָג אַרבעט אין IE 9+, פירעפאָקס 4+, אָפּעראַ 10.5+, סאַפאַרי 5+, קראָום 10.5+, און אויף אַלע די הויפּט רירעוודיק בראַוזערז. דעם קאָווערס איר פֿאַר אַלע די מאָדערן בראַוזערז בנימצא הייַנט, וואָס מיטל איר זאָל נוצן דעם פאַרמאָג אָן מורא אַז עס וועט נישט אַרבעטן אויף עמעצער ס פאַרשטעלן.
פאַקינג אַ סטריט באַקקגראָונד אין עלטערע בראַוזערז
עס איז זייער אַנלייקלי אַז איר דאַרפֿן צו שטיצן קיין בראַוזערז עלטער ווי יע 9, אָבער לאָזן 'ס נעמען אַז איר זענט אינטערעסירט אַז IE8 טוט נישט שטיצן דעם פאַרמאָג. אין אַז בייַשפּיל, איר קענען שווינדל אַ אויסגעשטרעקט הינטערגרונט. און איר קענען נוצן די בלעטערער פּרעפיקסעס פֿאַר Firefox 3.6 (-מאָז-הינטערגרונט-גרייס) און אָפּעראַ 10.0 (-אָ-הינטערגרונט-גרייס).
די יזיאַסט וועג צו שווינדל אַ אויסגעשטרעקט הינטערגרונט בילד איז צו אויסשטרעקן עס אויף די גאנצע בלאַט. דערנאך איר טאָן ניט סוף אַרויף מיט עקסטרע אָרט אָדער האָבן צו זאָרג אַז דיין טעקסט פיץ אין די אויסשטרעקן געגנט. דאָ ס ווי צו טאָן עס:
id = "bg" />
- ערשטער, מאַכן זיכער אַז אַלע בראַוזערז האָבן אַ 100% הייך, 0 מאַרדזשאַנז, און 0 וואַטן אויף די און HTML גוף עלעמענטן. שטעלן די פאלגענדע אין די קאָפּ פון דיין HTML דאָקומענט:
- לייג די בילד איר ווילן צו זיין דער הינטערגרונט ווי דער ערשטער עלעמענט פון דער וועב בלאַט, און געבן עס די שייַן פון "בג":
- שטעלט די הינטערגרונט בילד אַזוי עס איז פאַרפעסטיקט אין די שפּיץ און לינקס און איז 100% ברייט און 100% אין הייך. לייג דאָס צו דיין נוסח בלאַט:
img # bg {
שטעלע: פאַרפעסטיקט;
שפּיץ: 0;
לינקס: 0;
ברייט: 100%;
הייך: 100%;
} - לייג אַלע דיין אינהאַלט צו די בלאַט ין פון אַ דיוו עלעמענט מיט אַ שייַן פון "צופרידן". לייג די דיוו אונטער די בילד:
באַמערקונג: עס איז טשיקאַווע צו קוקן בייַ דיין בלאַט איצט. דער בילד זאָל אַרויסווייַזן אויסגעשטרעקט, אָבער דיין צופרידן איז גאָר פעלנדיק. פארוואס? ווייַל דער הינטערגרונט בילד איז 100% אין הייך, און דער אינהאַלט אָפּטיילונג איז נאָך די בילד אין די שטראָם פון די דאָקומענט - רובֿ בראַוזערז וועט ניט אַרויסווייַזן.אַלע דיין אינהאַלט דאָ - אַרייַנגערעכנט כעדערז, פּאַראַגראַפס, אאז"ו ו.
- שטעלע דיין אינהאַלט אַזוי אַז עס איז קאָרעוו און האט אַ ז-אינדעקס פון 1. דאס וועט ברענגען עס אויבן די הינטערגרונט בילד אין סטאַנדאַרדס-געהאָרכיק בראַוזערז. לייג דאָס צו דיין נוסח בלאַט:
#content {
פּאָסטן: relative;
ז-אינדעקס: 1;
}
- אָבער איר ניטאָ געטאן. Internet Explorer 6 איז נישט נאָרמאַל און נאָך האָבן עטלעכע פּראָבלעמס. עס זענען פילע וועגן צו באַהאַלטן די CSS פון יעדער בלעטערער אָבער IE6, אָבער די יזיאַסט (און ווייניקער מסתּמא צו פאַרשאַפן אנדערע פראבלעמען) איז צו נוצן קאַנדישאַנאַל באַמערקונגען. שטעלן די ווייַטערדיקע נאָך דיין סטיילז אין די קאָפּ פון דיין דאָקומענט:
- ין די כיילייטיד באַמערקן, לייגן אן אנדער נוסח בויגן מיט עטלעכע סטיילז צו באַקומען IE 6 צו שפּילן פייַן:
- זייט זיכער צו פּרובירן אין IE 7 און IE 8 ווי געזונט. איר קען דאַרפֿן צו סטרויערן די באַמערקונגען צו שטיצן זיי ווי געזונט. אָבער, עס געארבעט ווען איך טעסטעד עס.
גוט - דעם איז אַדמיטידלי ווייט אָוווערקיל. Very few sites need to support IE 7 or 8 anymore, much less IE6!
ווי אַזאַ, דעם צוגאַנג איז אַנטיקווייטיד און מסתּמא ומנייטיק פֿאַר איר. איך פאַרלאָזן עס מער ווי אַ מאָדעל פון נייַגעריקייַט ווי פיל שוועריקייטן איידער אַלע אונדזער בראַוזערז געשפילט אַזוי ניימלי צוזאַמען!
פאַקינג אַ אויסשטרעקן הינטערגרונט בילד איבער אַ סמאָלער ספעיס
איר קענען נוצן אַ ענלעך טעכניק צו שווינדל אַ אויסגעשטעלט הינטערגרונט בילד איבער אַ DIV אָדער אן אנדער עלעמענט אויף דיין וועב בלאַט. דעם איז אַ ביסל טריקיער ווי איר האָבן צו נוצן אַבסאָלוט פּאַזישאַנינג אָדער האָבן מאָדנע ספּייסינג ישוז פֿאַר אנדערע טיילן פון דיין בלאַט.
- שטעלן די בילד אויף די בלאַט וואָס איך ווילן צו נוצן ווי דער הינטערגרונט.
- אין די נוסח בלאַט, שטעלן אַ ברייט און הייך פֿאַר די בילד. באַמערקונג, איר קענען נוצן פּערסענידזשיז פֿאַר ברייט אָדער הייך, אָבער איך געפֿינען עס גרינגער צו סטרויערן מיט די לענג וואַלועס פֿאַר די הייך.
img # bg {
width: 20em;
height: 30em;
} - אָרט דיין אינהאַלט אין אַ דיוו מיט די שייַן "צופרידן" ווי מיר האבן אויבן:
אַלע דיין צופרידן דאָ
- סטייל דער אינהאַלט דיוו צו זיין די זעלבע ברייט און הייך ווי די הינטערגרונט בילד:
div # content {
width: 20em;
height: 30em;
} - דעריבער שטעלט דעם אינהאַלט זיך צו דער זעלביקער הייך ווי די בילד. אַזוי אויב דיין בילד איז 30 עם איר וואָלט האָבן אַ נוסח פון שפּיץ: -30עם; דו זאלסט נישט פאַרגעסן צו שטעלן אַ ז-אינדעקס פון 1 אויף די אינהאַלט.
#content {
פּאָסטן: relative;
top: -30em;
ז-אינדעקס: 1;
width: 20em;
height: 30em;
} - דערנאָך לייגן אַ ז-אינדעקס פון -1 פֿאַר הייסט 6 וסערס ווי איר האָט אויבן:
ווידער, מיט הינטערגרונט-גרייס ענדזשויינג די ברייט בלעטערער שטיצן עס איצט טוט, דעם צוגאַנג איז אויך זייער מסתּמא ומנייטיק און דערלאנגט ווי אַ פּראָדוקט פון אַ בייגאָן צייט. אויב איר ווילט צו נוצן דעם צוגאַנג, נאָר זיין זיכער צו פּרובירן דאָס אין ווי פילע בראַוזערז ווי איר קענען.
און אויב דיין צופרידן ענדערונגען גרייס, איר וועט דאַרפֿן צו טוישן די גרייס פון דיין קאַנטיינער און הינטערגרונט בילד, אַנדערש, איר וועט סוף אַרויף מיט מאָדנע רעזולטאַטן.