Kuinka venyttää taustakuvan Web-sivun sovittamiseksi

Anna sivustosi visuaalinen kiinnostus taustakuviointiin

Kuvat ovat tärkeä osa houkuttelevia verkkosivustoja. Tämä sisältää taustakuvien käytön. Nämä ovat kuvia ja grafiikkaa, joita käytetään sivun alueiden taakse , eikä kuvia, jotka esitetään osana sisältösivuja. Nämä taustakuvat voivat lisätä sivun visuaalista kiinnostusta ja auttaa sinua saavuttamaan sivun visuaalisen suunnittelun.

Jos aloitat työskentelemällä taustakuvien kanssa, epäilemättä pääset skenaarioon, jossa haluat kuvan venytävän soviin sivulle.

Tämä pätee erityisesti vastaaviin verkkosivustoihin, jotka toimitetaan monenlaisiin laitteisiin ja näytön kokoihin .

Tämä taipumus venyttää taustakuvan on hyvin yleinen halu web-suunnittelijoille, koska kaikki kuvat eivät sovi verkkosivustossa. Sen sijaan, että asetat kiinteän koon, kuvan venytys mahdollistaa sen joustavan sovittamisen sivulle riippumatta siitä, kuinka leveä tai kapea selainikkuna on.

Paras tapa venyttää kuva sivun taustalle sopivaksi on käyttää CSS3- ominaisuutta taustakuvaksi. Tässä on esimerkki, jossa käytetään taustakuvan sivun rungossa ja jonka koko on 100%, jotta se aina venyttää ruudulle sopivaksi.

elin {
tausta: url (bgimage.jpg) ei-toista;
tausta-koko: 100%;
}

Caniuse.comin mukaan tämä ominaisuus toimii IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ ja kaikki tärkeimmät mobiiliselaimet. Tämä kattaa kaikki nykyaikaiset nykyiset selaimet, joten sinun kannattaa käyttää tätä ominaisuutta ilman, että se ei toimi jonkun näytössä.

Vanhojen selainten taittamisen taustalla

On hyvin epätodennäköistä, että sinun tarvitsee tukea älykkäitä IE9-selaimia, mutta oletetaan, että olet huolissasi siitä, että IE8 ei tue tätä ominaisuutta. Tässä tapauksessa voit väärentää venytetyn taustan. Ja voit käyttää Firefox 3.6: n (-moz-background-size) ja Opera 10.0 (-o-background-size) selaimen etuliitteitä .

Helpoin tapa venyttää taustakuva on venyttää se koko sivulle. Tällöin ei päädytä ylimääräiseen tilaan tai tarvitse huolehtia siitä, että teksti sopii venytettyyn alueeseen. Näin voit tehdä sen:

id = "bg" />

1. Ensinnäkin varmista, että kaikilla selaimilla on 100% korkeus, 0 marginaalit ja 0 tyynynpitävä ja HTML BODY -elementit. Aseta seuraava teksti HTML-asiakirjan päähän:

2. Lisää kuva, jonka haluat olla tausta web-sivun ensimmäisenä elementtinä, ja anna sille tunnus "bg":

3. Aseta taustakuva niin, että se on kiinnitetty ylhäältä ja vasemmalta, 100% leveä ja 100% korkeudella. Lisää tämä tyylitietoosi:

   img # bg {
   asema: kiinteä;
   alkuun: 0;
   vasen: 0;
   leveys: 100%;
   korkeus: 100%;
   }

4. Lisää kaikki sisältösi DIV-elementin sisältävään sivulle, jossa on "sisällön" tunnus. Lisää kuva alla olevaan DIV: hen:

   Kaikki sisältösi täällä - kuten otsikot, kohdat jne.

   Huomaa: on mielenkiintoista tarkastella sivusi nyt. Kuvan pitäisi näyttää venytetyksi, mutta sisältösi puuttuu kokonaan. Miksi? Koska taustakuva on korkeudeltaan 100% ja sisältöjako on asiakirjan virran kuvauksen jälkeen, useimmat selaimet eivät näytä sitä.
   
5. Aseta sisältö niin, että se on suhteellinen ja sillä on z-indeksi . Tämä tuo sen taustakuvan yläpuolelle standardeissa yhteensopivissa selaimissa. Lisää tämä tyylitietoosi:

   #content {
   asema: suhteellinen;
   z-indeksi: 1;
   }

1. Mutta et ole valmis. Internet Explorer 6 ei ole vaatimusten mukainen ja sillä on vielä joitain ongelmia. On monia tapoja piilottaa CSS jokaisesta selaimesta, mutta IE6, mutta helpoin (ja vähiten todennäköisesti muita ongelmia) on käyttää ehdollisia kommentteja. Laita seuraava lomake sen jälkeen, kun tyyppikirja on asiakirjan päässä:

2. Korostetun kommentin sisällä voit lisätä toisen tyylitiedoston joidenkin tyylien kanssa, jotta IE 6 voi pelata mukavasti:

3. Muista kokeilla myös IE 7 ja IE 8. Saatat joutua muokkaamaan kommentteja myös tukemaan niitä. Se toimi kuitenkin, kun testasin sen.

OK - tämä on varmasti ylikuumeneminen. Hyvin harvat sivustot tarvitsevat tukea IE 7 tai 8 enää, paljon vähemmän IE6!

Tällainen lähestymistapa on vanhentunut ja todennäköisesti tarpeeton sinulle. Jätän sen täällä enemmän mallisena uteliaisuutena siitä, kuinka paljon vaikeampia asioita oli ennen kuin kaikki selaimemme soittivat niin mukavasti yhdessä!

Taivutetun taustakuvan muodostaminen pienemmässä tilassa

Voit käyttää samanlaista tekniikkaa väärennetyn taustakuvan tekoon DIV: n tai muun elementin kautta verkkosivustossasi. Tämä on hieman hankalaa, koska sinun on joko käytettävä absoluuttista sijaintia tai jos sinulla on outoja välilyöntejä muille sivusi osille.

1. Aseta kuva sivulle, jota haluan käyttää taustana.

2. Aseta tyylilevyllä kuvan leveys ja korkeus. Huomaa, että voit käyttää prosenttiosuuksia leveydestä tai korkeudesta, mutta minusta on helpompi säätää korkeuden pituusarvojen avulla.

   img # bg {
   leveys: 20m;
   korkeus: 30m;
   }

3. Aseta sisältö div: een id "sisältö" kuten yllä:

   Kaikki sisältösi täällä

4. Määritä sisältö div niin, että se on sama leveys ja korkeus kuin taustakuvassa:

   div # content {
   leveys: 20m;
   korkeus: 30m;
   }

5. Aseta sitten sisältö korkeintaan kuvan korkeuteen. Joten jos kuvasi on 30em sinulla olisi tyyli alkuun: -30em; Älä unohda laittaa z-indeksiä 1 sisältöön.

   #content {
   asema: suhteellinen;
   alkuun: -30em;
   z-indeksi: 1;
   leveys: 20m;
   korkeus: 30m;
   }

6. Lisää sitten z-indeksi -1 käyttäjille IE 6, kuten yllä:

Jälleen, taustasäteellä, jolla on laaja selainta tukeva tuki nyt, tämä lähestymistapa on hyvin todennäköisesti tarpeeton ja esitelty menneen aikakauden tuotteeksi. Jos haluat käyttää tätä lähestymistapaa, muista kokeilla tätä mahdollisimman monella selaimella.

Jos sisältösi muutetaan kokoa, sinun on vaihdettava kontin ja taustakuvan koko, muuten tuloksesi saattavat outoja tuloksia.