Brug CSS3 til at strække et baggrundsbillede, der passer til en webside

Billeder er en vigtig del af attraktive website designs. Dette omfatter brugen af ​​baggrundsbilleder. Dette er de billeder og grafik, der bruges bag områder af en side i modsætning til billeder, der præsenteres som en del af indholdssiderne. Disse baggrundsbilleder kan tilføje visuel interesse for en side og hjælpe dig med at opnå det visuelle design, du måske søger efter på en side.

Hvis du begynder at arbejde med baggrundsbilleder, vil du uden tvivl komme ind i scenariet, hvor du vil have et billede at strække for at passe til siden. Dette gælder især for lydhøre websites, der leveres til en bred vifte af enheder og skærmstørrelser.

Dette ønske om at strække et baggrundsbilde er et meget almindeligt ønske for webdesignere, fordi ikke alle billeder passer ind i et website. I stedet for at indstille en fast størrelse kan strækningen gøre det muligt at bøje sig for at passe til siden, uanset hvor bred eller smal browservinduet er.

Den bedste måde at strække et billede på, passer til baggrunden for en side, er at bruge CSS3-ejendommen til baggrundsstørrelse. Her er et eksempel, der bruger et baggrundsbillede til en sides krop, og som sætter størrelsen på 100%, så den altid strækker sig for at passe til skærmen.

krop { baggrund: url (bgimage.jpg) no-repeat; baggrundsstørrelse: 100%; }

Ifølge caniuse.com fungerer denne ejendom i IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ og på alle de store mobile browsere. Dette dækker dig for alle de moderne browsere, der er tilgængelige i dag, hvilket betyder at du skal bruge denne ejendom uden frygt for, at den ikke vil fungere på en persons skærm.

Faking en udstrakt baggrund i gamle browsere

Det er meget usandsynligt, at du skal understøtte alle browsere, der er ældre end IE9, men lad os antage, at du er bekymret for, at IE8 ikke understøtter denne ejendom. I dette tilfælde kan du falde en strakt baggrund. Og du kan bruge browser præfikser til Firefox 3.6 (moz-baggrund-størrelse) og Opera 10.0 (-o-baggrund-størrelse).

Den nemmeste måde at fake et strakt baggrundsbillede på er at strække det over hele siden. Så slutter du ikke med ekstra plads eller skal du bekymre dig om, at din tekst passer i det strakte område. Sådan gør du det:

id = "bg" />

1. Først skal du sørge for, at alle browsere har en 100% højde, 0 margener og 0 polstring på ogHTML LEGEME elementer. Placer følgende i hovedet af dit HTML-dokument:
2. Tilføj det billede, du vil være baggrunden som det første element på websiden, og giv det til id af "bg":
3. Placer baggrundsbilledet, så det fastgøres øverst og venstre og er 100% bredt og 100% i højden. Tilføj dette til dit stilark:
   1. img # bg {
   3. stilling: fast;
   5. top: 0;
   7. venstre: 0;
   9. bredde: 100%;
   11. højde: 100%;
   13. }
4. Tilføj alt dit indhold til siden inde i en DIV element med en id af "indhold". Tilføj DIV under billedet:Alt dit indhold her - herunder overskrifter, afsnit osv.
   1. Bemærk: Det er interessant at se på din side nu. Billedet skal vises strakt ud, men dit indhold mangler helt. Hvorfor? Fordi baggrundsbilledet er 100% i højden, og indholdsafdelingen er efter billedet i dokumentets strømning - de fleste browsere vil ikke vise det.
5. Placer dit indhold, så det er relativt og har en z-index af 1. Dette vil bringe det oven over baggrundsbilledet i standarder, der er kompatible med browsere. Tilføj dette til dit stilark:
   1. #indhold {
   3. stilling: relativ;
   5. z-indeks: 1;
   7. }
6. Men du er ikke færdig. Internet Explorer 6 er ikke kompatibel med standarder og har stadig nogle problemer. Der er mange måder at skjule CSS fra hver browser, men IE6, men det nemmeste (og mindst sandsynligt at forårsage andre problemer) er at bruge betingede kommentarer. Sæt følgende efter dit stylesheet i hovedet på dit dokument:
7. Inde i den fremhævede kommentar, tilføj et andet stilark med nogle stilarter for at få IE 6 til at spille godt:
8. Sørg også for at teste i IE 7 og IE 8 også. Du skal muligvis justere kommentarerne for at understøtte dem også. Det virkede dog, da jeg testede det.

OK - dette er ganske vist WAY overkill. Meget få steder skal understøtte IE 7 eller 8 længere, meget mindre IE6! Som sådan er denne fremgangsmåde forældet og sandsynligvis unødvendig for dig. Jeg forlader det her mere som en model af nysgerrighed om, hvor meget vanskeligere ting var før alle vores browsere spillede så pænt sammen!

Faking et udstrakt baggrundsbillede over et mindre rum

Du kan bruge en lignende teknik til at falske et strakt baggrundsbillede på tværs af en DIV eller et andet element på din webside. Dette er lidt vanskeligere, da du enten skal bruge absolut positionering eller have mærkelige mellemrumsproblemer for andre dele af din side.

1. Placer billedet på den side, jeg vil bruge som baggrund.
2. Indstil en bredde og højde for billedet i stilarket. Bemærk, du kan bruge procentsatser for bredde eller højde, men jeg finder det nemmere at justere med længdeværdier for højden.
   1. img # bg {
   3. bredde: 20em;
   5. højde: 30em;
   7. }
3. Placer dit indhold i en div med id "indhold" som vi gjorde ovenfor:Alt dit indhold her
4. Indstil indholdsdiv til den samme bredde og højde som baggrundsbilledet:
   1. div # indhold {
   3. bredde: 20em;
   5. højde: 30em;
   7. }
5. Derefter placeres indholdet op til samme højde som billedet.Så hvis dit billede er 30em, ville du have en top stil: -30em; Glem ikke at sætte et z-indeks på 1 på indholdet.
   1. #indhold {
   3. stilling: relativ;
   5. top: -30em;
   7. z-indeks: 1;
   9. bredde: 20em;
   11. højde: 30em;
   13. }
6. Tilføj derefter en z-indeks på -1 for IE 6 brugere, som du gjorde ovenfor:

Igen, med en baggrundsstørrelse, der nyder den brede browsersupport det gør nu, er denne tilgang også meget sandsynligvis unødvendig og fremlagt som et produkt af en svunden æra. Hvis du vil bruge denne fremgangsmåde, skal du bare teste dette i så mange browsere som du kan. Og hvis dit indhold ændrer størrelse, skal du ændre størrelsen på din container og baggrundsbillede, ellers vil du ende med underlige resultater.