do të jetë dyfishi i gjerësisë së dritares së shfletuesit. Një imazh i vendosur në të do të ruajë raportin e tij të pamjes dhe do të mbulojë plotësisht dritaren e shfletuesit, të vendosur pikërisht në qendër.

#bg (pozicioni: fiks; lart: -50%; majtas: -50%; gjerësia: 200%; lartësia: 200%;) #bg img (pozicioni: absolute; lart: 0; majtas: 0; djathtas: 0; fundi: 0; diferenca: automatike; min-gjerësia: 50%; min-lartësia: 50%;)

Punon në:

Safari / Chrome / Firefox (nuk është testuar në të gjitha versionet, por funksionon shkëlqyeshëm në të fundit).

IE 8+.

Opera (çdo version) dhe IE refuzojnë të punojnë me këtë metodë (pozicionimi i gabuar i imazhit).

Duke përdorur jQuery

Ideja është shumë e thjeshtë, nëse raporti i pamjes së imazhit (elementi i linjës do të përdoret si sfond) krahasohet me raportin e pamjes së dritares së shfletuesit. Nëse është më i vogël për imazhin, atëherë duhet të caktoni vetëm vetia e gjerësisë së imazhit është 100%, dhe do të mbushë ekranin si në lartësi ashtu edhe në gjerësi. Dhe nëse më shumë, atëherë caktoni vetëm vetia e lartësisë së imazhit është 100%.

#bg (pozicioni: fiks; lart: 0; majtas: 0;) .bggjerësia (gjerësia: 100%;) .bgheight (lartësia: 100%;)

$ (funksioni () (var theWindow = $ (dritare), $ bg = $ ("# bg"), raporti i aspektit = $ bg.gjerësia () / $ bg.lartësia (); funksioni resizeBg () (nëse ((Window .gjerësia () / Dritarja.lartësia ())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Punon në:

IE7 + (me cung, ndoshta do të funksionojë edhe në IE6)

Në të gjithë shfletuesit e tjerë.

konkluzioni

Secila prej metodave të zgjidhjes ka avantazhet dhe disavantazhet e veta. Thjesht duhet të zgjidhni atë që i përshtatet rastit tuaj të veçantë. Epo, ose ofroni tuajën.

Përshëndetje. Sot do të shikojmë se si mund të zgjasni sfondin me mjetet css (pa ndërhyrjen e mjeteve të tjera, si javascript dhe të tjerë si ata).

Shtrihu Sfondi CSS mjetet u bënë të mundura me ardhjen e CSS3, veçanërisht me vetinë e madhësisë së sfondit. Duhet të them që kjo veti funksionon shumë më mirë se zgjidhjet e ngjashme në Javascript (të cilat janë përdorur para shfaqjes së madhësisë së sfondit), pasi i përgjigjet më shpejt dhe në mënyrë më adekuate ndryshimit të madhësisë së shfletuesit, zbut një foto të shtrirë më shpejt dhe, siç u pëlqen për të thënë në fillim të viteve 2000, x, - "Do të funksionojë edhe me Javascript të paaftë."

Zgjidhja: Si të zgjeroni sfondin CSS duke përdorur mjete

Vetia e madhësisë së sfondit mund të ketë vlera të shumta.
1) mund të jetë një nga direktivat: të mbulojë ose të përmbajë.

Madhësia e sfondit: përmban; / * Shkallëzimin e imazhit në mënyrë proporcionale në mënyrë që i gjithë imazhi të përshtatet brenda bllokut. * / madhësia e sfondit: kopertina; / * Shkallëzimi i imazhit proporcionalisht në mënyrë që gjerësia ose lartësia e tij të jetë e barabartë me gjerësinë ose lartësinë e kutisë. * /

2) mund të jetë përqindje (100% ose 94% e gjerësisë së enës). Në këtë rast, mund të përdorni të dy vlerat 1 përqindje dhe 2. Nëse ka 2 vlera, atëherë lartësia dhe gjerësia e figurës do të shkallëzohen njëkohësisht, ndërsa secila prej vlerave rregullohet në proporcion me përqindjen e specifikuar në parametra ).

Madhësia e sfondit: 100%; / * Ekuivalente me direktivën e mbuluar * / madhësia e sfondit: 100% 50%; / * Gjerësia do të jetë 100% e gjerësisë së bllokut, por lartësia do të jetë vetëm 50%, fotografia ka shumë të ngjarë të deformohet * /

3) vlera direkte numerike (në pixel, centimetra, em, etj.). Mund të ketë gjithashtu 2 (ose 1) parametra, si në rastin e mëparshëm.
4) vlera automatike. Tregon që fotografia nuk do të shtrihet, por do të përdoret madhësia origjinale. Në këtë rast, parametrat mund të jenë gjithashtu 2 ose 1. Kjo do të thotë, mund të specifikoni sa vijon:

Madhësia e sfondit: 60% automatik; / * gjerësia e imazhit do të jetë 60%, dhe lartësia do të jetë proporcionale me dimensionet e imazhit origjinal * /

Ku do të funksiononte një zgjidhje shtrirjeje e sfondit CSS?

Duke gjykuar nga të dhënat nga faqja Can I Use, do të funksionojë në të gjithë shfletuesit modernë, duke përfshirë versionet IE të të paktën 9. Pra, në parim, nuk ka arsye për t'u shqetësuar. Shihni tabelën e përputhshmërisë:

Detyrë

Shtrijeni imazhin e sfondit në gjerësinë e plotë të dritares së shfletuesit duke përdorur CSS3.

Zgjidhje

Vetia e madhësisë së sfondit është menduar për shkallëzimin e sfondit, 100% është specifikuar si vlera e saj, atëherë sfondi do të zërë të gjithë gjerësinë e dritares së shfletuesit. Për versionet më të vjetra të shfletuesve, duhet të përdoren veçori specifike me parashtesa, siç tregohet në Shembullin 1.

Shembull 1. Sfondi i shtrirë

HTML5 CSS 2.1 IE Cr Op Sa Fx

Rezultati ky shembull treguar në fig. një.

Oriz. 1. Pamje e sfondit me një madhësi të reduktuar të dritares

Me rritjen e madhësisë së dritares së shfletuesit, sfondi gjithashtu do të fillojë të zgjerohet, kjo do të çojë në një përkeqësim të pamjes së figurës (Fig. 2).

Oriz. 2. Pamja e sfondit kur dritarja zmadhohet

2 vota

Mirësevini në blogun tim. Vazhdimi për të kuptuar bazat e html. Ky tutorial do të jetë aq i thjeshtë dhe interesant sa shpresoj se do të dëshironi të mësoni më shumë rreth gjuhëve të programimit. Në vetëm disa minuta do të mësoni se si të bëni një fotografi si sfond në html dhe të arrini një rezultat të shkëlqyeshëm.

Do të flas edhe për disa nga nuancat që do ta bëjnë sfondin më të njëtrajtshëm dhe të bukur. Epo, të fillojmë?

Përzgjedhja e fotografive

Do të doja të filloja duke zgjedhur një imazh. Për t'ju bërë të dukeni më të lëmuara dhe më të bukura në faqe dhe nuk keni pse të shqetësoheni me dimensionet dhe shtrirjen. Unë sugjeroj që menjëherë të kërkoni tekstura pa probleme. Cfare eshte?

Fatkeqësisht, nuk është e mundur të shtrihet një imazh në html në ekran të plotë. Fotografia është përdorur në madhësi të plotë. Nëse fotografia është e vogël, atëherë ajo do të shtrojë të gjithë zonën, si në pamjen e ekranit më poshtë. Për të shtrirë figurën, do të duhet të krijoni një dokument shtesë css, pa këtë nuk do të funksionojë.

Edhe pse, ju keni mundësinë për të anashkaluar sistemin. Për ta bërë këtë, përdorni Photoshop dhe fotot deri në gjerësinë e ekranit (1280x720). Edhe pse në këtë rast, kur lëvizni poshtë, do ta ndryshojë figurën në një tjetër.

Shumë opsioni më i mirë nëse nuk dëshironi të përdorni css, do të përdorni tekstura pa probleme. Ata nuk kanë nyje të dukshme. Ato janë si letër-muri apo pllaka moderne në dizajn. Njëra zëvendëson tjetrën dhe nuk duken nyje.

Nëse jeni të interesuar edhe për mungesën e pasojave ligjore për përdorimin e tyre, atëherë ju rekomandoj që të kërkoni në sit Pixabay.com .

HTML

Tani le të punojmë me kodin. Duhet të vërej menjëherë se tani po punojmë me html, domethënë po ndryshojmë imazhin jo për të gjithë sitin, por vetëm për një faqe specifike për të cilën po shkruhet kodi. Nëse jeni të interesuar të ndryshoni të gjithë burimin, atëherë duhet të gjeneroni kod me css, Por më shumë për këtë më vonë.

Kështu që ju mund të punoni në Notepad, unë preferoj NotePad ++. Është shumë më i përshtatshëm për të punuar në të: kodi është shtuar për ju, etiketat janë theksuar. Programi është falas dhe peshon rreth 3 MB. Rekomandohet shumë, veçanërisht nëse jeni fillestar.

Pra në etiketë trupi ju duhet të shtoni një atribut sfond dhe jepni një lidhje me imazhin nga do të merret imazhi. Kështu duket në program.

Ju thjesht mund të hapni bllokun e shënimeve dhe ta kopjoni këtë kod këtu. Në thonjëza, vendosni një lidhje me foton që ju pëlqen.

<html> <kokë> <titull> Sfondi-imazh</ titulli> </ kokë> <sfondi i trupit = "https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png"> </ trupi> </ html>

Do të doja të shënoja për fillestarët, këtu është pika. Nëse merrni një imazh nga pixabay, atëherë duhet të futni lidhjen jo në faqen me foton, por të hapni foton në skedën tjetër.

Kopjojeni këtë URL të veçantë.

Ruani dokumentin tuaj. Mos harroni se nëse jeni duke përdorur bllokun e shënimeve, atëherë duhet të përdorni shtesën .html ... Thjesht emërtoni dokumentin, për shembull, mbrapa.html ... Përndryshe, ai do të ruhet si një dokument teksti dhe shfletuesi thjesht nuk do të kuptojë se çfarë duhet të bëjë.

U krye, faqja është e mbushur me një ngjyrë të ndryshme.

Nëse doni të dini më shumë rreth html, ju këshilloj ta shkarkoni kurs falas Evgenia Popova ... Prej tij do të mësoni më shumë etiketa, veçori gjuhësore, do të provoni disa truke të reja dhe do të dini më shumë.

Nuk do të them se kurset e Evgeny Popov janë jashtëzakonisht të njohura. Shumë ekspertë e qortojnë dhe nëse keni hasur në deklarata të tilla, atëherë ja ku është mendimi im. Këto mësime ofrohen pa pagesë, dhe përkundër kësaj, ata përballen në mënyrë të përkryer me detyrën e tyre kryesore - t'i tregojnë fillestarit bazat, ta përditësojnë atë.

Ashtu si çdo shkrimtar ka pikëpamjen e tij se si të shkruajë, ashtu edhe programuesit kanë shkrimin e tyre të dorës. Ju mund të mësoni të krijoni faqe interneti gjatë gjithë jetës tuaj, por duhet të filloni diku. Nga librat? Jo ashtu. Po, ato përmbajnë informacione më të besueshme, informacione përkatëse, por janë kaq të vështira për t'u zotëruar.

Nuk jeni dakord me mua? Unë mund të sugjeroj një alternativë. Libri nga Elizabeth dhe Eric Freeman " Mësoni HTML, XHTML dhe CSS ". Jo një bestseller shumë i mërzitshëm dhe u publikua jo shumë kohë më parë, në 2016. Informacioni nuk është bërë ende i vjetëruar.

CSS

Nëse keni nevojë që sfondi të përsëritet në të gjitha faqet e faqes tuaj, atëherë nuk mund të bëni pa CSS. Sigurisht, ju mund ta shkruani shtegun çdo herë, si në kapitullin e mëparshëm. Por imagjinoni nëse me kalimin e kohës ju duhet ta zëvendësoni atë: lidhja do të jetë e vjetëruar ose thjesht dëshironi të ndryshoni modelin. Shkoni në secilën faqe dhe ndryshoni kodin? Nuk punon.

CSS ndihmon në zgjidhjen e këtij problemi. Duhet të krijoni një skedar me shtrirje css dhe të futni kodin e mëposhtëm:

Le të flasim pak për vetë kodin. Në kllapa, pas url mund të futni një lidhje për një fotografi nga një burim i palës së tretë, ose thjesht emrin e dokumentit, nëse fotografia është në të njëjtën dosje me këtë skedar.

Për ata që duan të dinë më mirë

Me css mund të shtriheni imazhi i sfondit, bëjeni në mënyrë që të mos përsëritet, shtoni animacion gif dhe shumë më tepër.

Një artikull nuk mund të bëjë gjithçka. Dhe unë nuk i vura vetes një detyrë të tillë. Ka shumë hollësi dhe nëse ju premtohet se do t'ju tregohet për gjithçka në një artikull, atëherë kjo nuk është asgjë më shumë se një mashtrim.

Dëshironi të mësoni se si të shkruani saktë faqet e internetit? Unë rekomandoj që të mësoni gjuhë programimi. Unë mund të rekomandoj kursin e Andrey Bernatsky " HTML5 dhe CSS3 nga Zero në Pro ". Më pëlqen shumë ky autor. Unë nuk e mora këtë kurs të veçantë, disa vite më parë kishte tashmë diçka të ngjashme, por më pak moderne.

Autori tregon shumë këndshëm, gjithçka është e lehtë dhe e kuptueshme. Pika kryesore e këtij kursi është se ju nuk studioni vetëm, por krijoni një faqe specifike së bashku me mësuesin. Si rezultat, ju do të merrni një kartëvizitë, blog dhe madje edhe një dyqan online. Shumë i ftohtë. Ju mund t'i shikoni tre mësimet e para teorike HTML5 nga ky kurs këtu dhe tani.

Nga rruga, së bashku me këtë kurs ju merrni 7 bonuse: bazat e html dhe css nga Andrey Bernatsky, paraqitjen për fillestarët, krijimin e një faqeje uljeje për mbrëmjen dhe shumë më tepër. Përpara se të hyni në trajnime serioze, provoni kursin falas " Praktikoni HTML5 dhe CSS3 ».

Epo, kjo është në thelb e gjitha. Regjistrohu në buletinin tonë për të mësuar më shumë. Shumë shpejt do t'ju tregoj pak më shumë për paraqitjen responsive, rritjen e fitimeve nga çdo blog dhe do t'ju jap shumë këshilla të dobishme për të thjeshtuar punën. Deri herën tjetër dhe suksese në përpjekjet tuaja.

Ditë të mirë, të dashuruar të ndërtimit të faqeve dhe dashamirës të temave në internet. Sot dua t'i përgjigjem një pyetjeje të bërë shpesh jo vetëm nga fillestarët, por ndonjëherë edhe nga zhvilluesit: "Si të zgjasësh një fotografi css në ekran të plotë?" Në fakt, kjo teknikë është shumë e thjeshtë për t'u zbatuar, por kjo është një çështje tjetër.

Sot, ka shumë mënyra dhe gjuhë programimi, falë të cilave imazhi mund të vendoset në të gjithë ekranin. Prandaj, në këtë postim do të diskutoj disa mënyra për të krijuar një imazh të sfondit me madhësi të plotë duke përdorur css, css3, jquery dhe php. Le të fillojmë me biznesin!

Metoda 1. Imazhi përshtatës i sfondit me veglat css

Për ta bërë imazhin e sfondit të përgjegjshëm, fletët e stilit kaskadë ofrojnë veçorinë sfond -madhësia... Kjo ju lejon të vendosni madhësinë skedar grafik në lidhje me dimensionin hap skedën.

Për ta bërë këtë, thjesht duhet të shkruani rreshtin e mëposhtëm:

sfond -madhësia: 100%auto

Parametri i parë, d.m.th. 100%, është përgjegjës për shtrirjen horizontale të figurës, parametri i dytë është vertikal. Tani le të kalojmë te një shembull.

Kjo metodë mbështetet nga shfletuesit duke filluar nga versioni 10, versioni 3 i Safari, Firefox 3.6 dhe versioni 9 i IE.

Metoda 2. Sfondi gome duke përdorur css3

Me lëshimin e specifikimit css3, shumë mjete të përshtatshme janë shtuar në gjuhë. Pra, për të krijuar një sfond të shtrirë në formën e një imazhi, përdoret e njëjta pronë si në kapitullin e mëparshëm, por madhësia e figurës nuk përcaktohet nga përqindjet, por nga kopertina e veçantë e fjalës: sfond -madhësia:mbulesë... Shumë i përshtatshëm, apo jo?

Për të parë se si funksionon kjo veti, ekzekutoni shembullin e mëparshëm duke ndryshuar madhësinë e sfondit 100% dhe parametrat automatikë në mbulesë.

Vetë JQuery është shumë i dobishëm. Është më e lehtë të punosh me API, është më e lehtë të aksesosh elementë të ndryshëm të kodit dhe është gjithashtu më e lehtë të zbatosh disa gjëra.

Në mënyrë që shembulli të funksionojë kjo mënyrë, fillimisht duhet të lidhni skriptin js me rreshtin e mëposhtëm:

Më poshtë kam bashkangjitur kodin e programit të shembullit me implementimin jQuery të futur tashmë në të.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

Planetari në hapësirë ​​të hapur! Eksploroni yje të largët, planetë dhe kratere të hënës ...

Kjo metodë është universale dhe mbështetet nga shumë shfletues edhe kur mjetet css nuk funksionojnë.

Metoda 4. Implementimi Php i imazhit të shtrirë në ekran të plotë

Disa fjalë për vetë gjuhën. Php quhet gjuha e skriptimit. Përdoret për të shkruar anën e serverit të aplikacioneve në ueb, d.m.th. lidhni shërbimin me bazën e të dhënave, përpunoni kërkesat, etj. Vetë kodi php është i ngulitur në html dhe ndërvepron me të në mënyrë fleksibël.

Për të futur një pjesë të kodit, duhet të shkruani tekstin në kllapat e mëposhtme:

Tani, në shembullin origjinal, ju duhet vetëm të futni disa rreshta:

1 2 3 4 5