Hoe om 'n agtergrond prent uit te brei om 'n webbladsy te pas

Gee jou webwerf visuele belangstelling met agtergrondgrafika

Beelde is 'n belangrike deel van aantreklike webwerfontwerpe. Dit sluit in die gebruik van agtergrond beelde. Dit is die beelde en grafika wat gebruik word agter die dele van 'n bladsy, in teenstelling met beelde wat aangebied word as deel van die inhoudsbladsye. Hierdie agtergrond beelde kan visuele belangstelling by 'n bladsy voeg en u help om die visuele ontwerp wat u op 'n bladsy soek, te bereik.

As jy met agtergrondprente begin werk, sal jy ongetwyfeld in die scenario loop waar jy wil hê dat 'n prentjie moet strek om die bladsy te pas.

Dit geld veral vir reageerende webwerwe wat aan 'n wye verskeidenheid toestelle en skermgroottes gelewer word .

Hierdie begeerte om 'n agtergrondbeeld te strek, is 'n baie algemene begeerte vir webontwerpers, want nie elke prent pas in die ruimte van 'n webwerf nie. In plaas daarvan om 'n vaste grootte te stel, kan die prentjie strek om dit te pas om die bladsy te pas, ongeag hoe wyd of smal die blaaier is.

Die beste manier om 'n prent uit te strek om die agtergrond van 'n bladsy te pas, is om die CSS3- eiendom te gebruik, vir agtergrondgrootte. Hier is 'n voorbeeld wat 'n agtergrond beeld vir die liggaam van 'n bladsy gebruik en wat die grootte tot 100% stel sodat dit altyd strek om die skerm te pas.

liggaam {
agtergrond: url (bgimage.jpg) no-repeat;
agtergrond grootte: 100%;
}

Volgens caniuse.com werk hierdie eiendom in IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, en op al die groot mobiele blaaiers. Dit dek jou vir al die moderne blaaiers wat vandag beskikbaar is, wat beteken dat jy hierdie eiendom moet gebruik sonder vrees dat dit nie op iemand se skerm sal werk nie.

Faking 'n gestrekte agtergrond in ouer blaaiers

Dit is baie onwaarskynlik dat u enige blaaiers ouer as IE9 moet ondersteun, maar ons moet aanvaar dat u bekommerd is dat IE8 hierdie eiendom nie ondersteun nie. In daardie geval kan jy 'n gestrekte agtergrond verval. En jy kan die voorvoegsels vir Firefox 3.6 (-moz-agtergrond-grootte) en Opera 10.0 (-O-agtergrond-grootte) gebruik.

Die makkelijkste manier om 'n gestrekte agtergrond beeld te vervals, is om dit oor die hele bladsy te strek. Dan eindig jy nie met ekstra spasie of moet jy bekommer dat jou teks in die gestrekte area pas nie. Hier is hoe om dit te doen:


id = "bg" />

  1. Maak eers seker dat alle blaaiers 'n 100% hoogte, 0 marges en 0 op die HTML-elemente het. Plaas die volgende in die kop van jou HTML-dokument:
  2. Voeg die prent by wat jy die agtergrond wil wees as die eerste element van die webblad, en gee dit die ID van "bg":
  3. Plaas die agtergrond prent sodat dit bo en links vasgemaak en 100% breed en 100% in hoogte is. Voeg dit by jou stylblad:
    img # bg {
    posisie: vaste;
    bo: 0;
    links: 0;
    breedte: 100%;
    hoogte: 100%;
    }
  4. Voeg al jou inhoud by die bladsy binne van 'n DIV-element met 'n ID van 'inhoud'. Voeg die DIV onder die prentjie by:

    Al jou inhoud hier - insluitend opskrifte, paragrawe, ens.

    Let wel: dit is interessant om nou na jou bladsy te kyk. Die prent moet uitgestrek word, maar jou inhoud word heeltemal ontbreek. Hoekom? Omdat die agtergrond beeld 100% hoog is en die inhoudsafdeling na die prentjie in die vloei van die dokument is, sal die meeste blaaiers dit nie vertoon nie.
  5. Plaas jou inhoud so dat dit relatief is en 'n z-indeks van 1 het. Dit sal dit bo die agtergrond prentjie in standaarde-voldoen blaaiers bring. Voeg dit by jou stylblad:
    #content {
    posisie: relatief;
    z-indeks: 1;
    }
  1. Maar jy is nie klaar nie. Internet Explorer 6 is nie standaarde voldoen nie en het steeds probleme. Daar is baie maniere om die CSS van elke blaaier te versteek, maar IE6, maar die maklikste (en die minste waarskynlik om ander probleme te veroorsaak) is om voorwaardelike kommentaar te gebruik. Plaas die volgende na jou styleblad in die kop van jou dokument:
  2. Binne die gemerkte kommentaar, voeg nog 'n styleblad met 'n paar style by om IE 6 te kry om lekker te speel:
  3. Maak seker dat jy ook in IE 7 en IE 8 toets. Jy sal dalk die kommentaar moet aanpas om hulle ook te ondersteun. Dit het egter gewerk toe ek dit getoets het.

OK - dit is weliswaar WAY overkill. Baie min webwerwe moet IE 7 of 8 meer ondersteun, veel minder IE6!

As sodanig is hierdie benadering verouderd en waarskynlik onnodig vir jou. Ek laat dit hier meer as 'n model van nuuskierigheid oor hoeveel moeiliker dinge was voordat al ons blaaiers so mooi saam gespeel het!

Faking 'n gestrekte agtergrond prentjie oor 'n kleiner ruimte

Jy kan 'n soortgelyke tegniek gebruik om 'n gestrekte agtergrondbeeld oor 'n DIV of 'n ander element op jou webblad te vervals. Dit is 'n bietjie moeiliker omdat jy ook absolute posisionering moet gebruik of vreemde spasiëringskwessies vir ander dele van jou bladsy moet hê.

  1. Plaas die prent op die bladsy wat ek as agtergrond wil gebruik.
  2. Stel in die stylvel 'n wydte en hoogte vir die prent. Let wel, jy kan persentasies vir breedte of lengte gebruik, maar ek vind dit makliker om met lengtewaardes vir die hoogte aan te pas.
    img # bg {
    breedte: 20em;
    hoogte: 30em;
    }
  3. Plaas jou inhoud in 'n div met die id "inhoud" soos ons hierbo gedoen het:

    Al jou inhoud hier

  4. Stil die inhoudsafdeling op dieselfde breedte en hoogte as die agtergrond prentjie:
    div # inhoud {
    breedte: 20em;
    hoogte: 30em;
    }
  5. Plaas dan die inhoud op dieselfde hoogte as die prentjie. So as jou beeld 30em is, sou jy 'n topstyl hê: -30em; Moenie vergeet om 'n z-indeks van 1 op die inhoud te sit nie.
    #content {
    posisie: relatief;
    top: -30em;
    z-indeks: 1;
    breedte: 20em;
    hoogte: 30em;
    }
  6. Voeg dan 'n z-indeks van -1 vir IE 6 gebruikers by, soos jy hierbo gedoen het:

Weereens, met die agtergrond-grootte wat die breë blaaiersteun geniet, word dit nou ook, hierdie benadering is ook heel waarskynlik onnodig en word aangebied as 'n produk van 'n vervloë era. As jy hierdie benadering wil gebruik, moet jy dit soveel as moontlik in soveel blaaiers toets.

En as jou inhoud grootte verander, moet jy die grootte van jou houer en agtergrondafbeelding verander, anders kom jy met vreemde resultate af.