Ako roztiahnuť obrázok na pozadí tak, aby sa zmestil na webovú stránku

Dajte svojmu webu vizuálny záujem pomocou grafiky na pozadí

Čo vedieť

• Preferovaný spôsob: Použite vlastnosť CSS3 pre veľkosť pozadia a nastavte ho na kryt .
• Alternatívna metóda: Použite vlastnosť CSS3 pre veľkosť pozadia nastavený na 100% a pozícia na pozadí nastavený na stred.

Tento článok vysvetľuje dva spôsoby, ako roztiahnuť obrázok na pozadí tak, aby sa zmestil na webovú stránku pomocou CSS3.

Moderný spôsob

Obrázky sú dôležitou súčasťou príťažlivosti návrhy webových stránok . Dodávajú stránke vizuálny záujem a pomáhajú vám dosiahnuť dizajn, ktorý hľadáte. Keď pracujete s obrázkami na pozadí, možno budete chcieť, aby sa obrázok roztiahol tak, aby sa zmestil na stranu široká škála zariadení a veľkostí obrazovky .

Najlepší spôsob, ako roztiahnuť obrázok tak, aby sa zmestil na pozadie prvku, je použiť CSS3 majetok, za veľkosť pozadia a nastavte ju na rovnakú hodnotu kryt .

|_+_|

Pomocou príkladu vyššie s veľkosť pozadia nastavený na 100% namiesto toho môžete vidieť, že CSS vyzerá väčšinou rovnako.

Výsledok v prehliadači na celú obrazovku alebo v prehliadači s podobnými rozmermi ako obrázok je takmer identický. S užšou obrazovkou sa však začínajú prejavovať nedostatky.

Je jasné, že to nie je ideálne, ale bude to fungovať ako náhrada.

Podľa caniuse.com , táto vlastnosť funguje v IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ a vo všetkých hlavných mobilných prehliadačoch. To sa vzťahuje na všetky moderné prehliadače, ktoré sú dnes k dispozícii, čo znamená, že túto vlastnosť by ste mali používať bez obáv, že nebude fungovať na niečí obrazovke.

Medzi týmito dvoma metódami by ste nemali mať žiadne problémy s podporou takmer všetkých prehliadačov. Ako veľkosť pozadia: obal získava ešte väčšiu akceptáciu medzi prehliadačmi, dokonca aj tento výpadok bude zbytočný. Je zrejmé, že CSS3 a responzívnejší dizajnové postupy zjednodušili a zefektívnili používanie obrázkov ako adaptívneho pozadia v rámci prvkov HTML.