Bëni sfond css faqe të plotë. Si të vendosni ngjyrën e sfondit në HTML

AT sfond html sepse faqja nuk është e vendosur, ajo shkruhet përmes stileve css, por ky është thjesht një formalitet teorik. Dhe tani le të zbulojmë se si ta përcaktojmë këtë sfond.

Sfondi për një sajt ose një bllok të veçantë

Meqenëse na duhet një skedar css për të arritur këtë qëllim, duhet ta krijojmë dhe ta lidhim me html. Kjo është shkruar në këtë artikull. Pas kësaj, ju mund të shkoni në punë. Së pari, duhet të vendosni se ku dëshironi të vendosni sfondin. Nëse e gjithë faqja në tërësi, atëherë mund ta bëni kështu:

Trupi (
Ngjyra e sfondit: e bardhë
}

Kjo do të thotë, ne i referohemi etiketës së trupit, e cila përfaqëson të gjithë faqen tonë. Vetia e ngjyrës së sfondit përdoret për të vendosur ngjyrën e sfondit. Por, çka nëse dëshironi ta vendosni sfondin në një grafik në vend të një ngjyre të fortë? Atëherë duhet të shkruani kështu:

Trupi (
Sfondi-imazh: url (rruga drejt imazhit. zgjerimi i imazhit)
}

Për qartësi, unë propozoj të shqyrtojmë gjithçka në mënyrë më të detajuar me një shembull. Për këtë unë do të përdor imazhin e mëposhtëm:

Për shembull, background-image: url(comp.png) . Në këtë shembull, ne vendosëm një imazh të sfondit të quajtur comp (kështu e quajta unë) format png, i cili ndodhet në të njëjtën dosje me skedarin css.
Në html, unë do të krijoj një bllok arbitrar me madhësi specifike në mënyrë që të demonstroj punën e vetive css në të.

Dhe këtu janë stilet për të:

#ct(
sfond-imazh: url(comp.png);
gjerësia: 600 px
lartësia: 400 px;
}

Ja çfarë kemi:

Pse eshte ajo? Fakti është se, si parazgjedhje, shfletuesi përsërit imazhin kaq shumë herë për të mbushur plotësisht bllokun. Ndonjëherë kjo është e nevojshme, për shembull, kur përdorni zbukurime pa probleme, por në rastin tonë duhet të ketë një fotografi. Për fat të mirë, kjo mund të menaxhohet shumë lehtë.

sfond i përsëritur

Nëse keni një imazh si sfond, atëherë si parazgjedhje ai do të përsëritet horizontalisht dhe vertikalisht për të mbushur të gjithë hapësirën e faqes. Për ta hequr këtë, përdoret veçoria e përsëritjes së sfondit dhe vlera e saj është mos përsëris (mos përsëris). Ekzistojnë edhe këto vlera:

• Përsëriteni-x - përsërisni vetëm horizontalisht
• Përsërit-y - vetëm vertikale

Le t'i shtojmë vetive të sfondit tonë grafik:

sfond-përsërit: pa përsëritje;

Pozicioni

Vetia background-position përcakton se ku do të vendoset imazhi. Këtu janë vendosur dy vlera - horizontalisht dhe vertikalisht. Shembuj: pozicioni i sfondit: djathtas poshtë - pozicioni në këndin e poshtëm djathtas, lart-majtas - në pjesën e sipërme të poshtme (dhe kështu me radhë sipas parazgjedhjes), 250 pikselë 500 px - zhvendoset nga këndi i sipërm i majtë në të djathtë me 250 piksele dhe poshtë me 500.

Le t'i hedhim një vështrim më të mirë shembujve:

pozicioni i sfondit: lart djathtas;

Fotografia do të zhvendoset në skajin e sipërm djathtas. I dhashë bllokut gjithashtu një sfond të verdhë në mënyrë që të duken skajet e tij.

sfond-pozicion: 50% 50%;

Imazhi u shfaq pikërisht në qendër në bllokun e tij. Po, po, kjo është e mundur edhe për shkak të përqindjes së rekordit të pozicionit.

sfond-pozicion: 70% 20%;

Sfondi zhvendoset 70% horizontalisht dhe 20% vertikalisht.

Lejohet gjithashtu të vendoset një vlerë pozicioni negativ në piksele. Kjo mund të bëhet, për shembull, kur përdorni një imazh të madh sprite dhe ju duhet të bllokoni pjesën e dëshiruar të këtij sprite.

Gozhdimi i sfondit

Më pëlqen shumë gjithashtu një pronë e quajtur sfond-bashkëngjitje. Ka vetëm dy vlera dhe e para është e paracaktuar (lëvizni). Kjo do të thotë që kur lëvizni faqen, sfondi gjithashtu do të lëvizë, dhe nëse përdorni një imazh pa përsëritje, atëherë përfundimisht ai do të përfundojë dhe vetëm një ngjyrë e fortë do të vazhdojë.

Për të mos lejuar që kjo të ndodhë, shkruhet bashkëngjitja e sfondit: fixed dhe tani sfondi ynë është fiksuar në mënyrë të sigurt në vend. Kjo mund të krahasohet me mënyrën se si të përcaktohet një pozicion fiks për një bllok dhe ai nuk do të zhduket nga faqja kur të lëvizet.

Një regjistrim i përmbledhur i gjithë kësaj mirësie

Ne kemi analizuar shumë veti që ju lejojnë të krijoni një sfond, por nëse i zbatoni të gjitha, merrni një shënim të rëndë. Ekziston një zgjidhje shumë elegante. Vetia e sfondit ju lejon të shkruani cilësimet e nevojshme të ndara nga një hapësirë ​​në këtë renditje:
Sfondi: pozicioni i fiksimit të përsëritjes së imazhit me ngjyra;
Dhe tani gjithçka mund të shkruhet kështu:

Sfondi: url e verdhë (comp.png) pa përsëritje 20% 100 px;

Nëse disa pronë nuk kanë nevojë të përcaktohen, atëherë ajo thjesht hiqet (në rastin tonë, ne nuk kemi shkruar sfond-bashkëngjitje).

Shumë prejardhje

Por çfarë nëse keni nevojë për imazhe të shumta sfondi? Ndodh, çfarë mund të bësh. Sot css e mbështet këtë veçori. Le ta provojmë edhe atë. Merrni këtë ikonë

E quajta laptop.

Dhe këtu është kodi për të futur multifonin:

Sfondi: url(comp.png) pa përsëritje 20% 100 pikselë,
url(laptop.png) pa përsëritje 50% 50%;
ngjyra e sfondit: e verdhë

Siç mund ta shihni, gjithçka që duhet të bëni është të vendosni një presje pas imazhit të parë dhe të vendosni cilësimet për të dytin. Ngjyra e ngurtë në këtë rast është më mirë të vendoset veçmas.

Në të njëjtën mënyrë, mund të regjistroni sa më shumë fotografi që dëshironi, por mos e teproni - shumë grafika nuk janë shumë të mira.

Këtu do të doja ta mbyllja këtë artikull. Ju mund të bëni shumë gjëra të tjera interesante me sfond, unë do të përpiqem të shkruaj për to në të ardhmen (dhe unë kam shkruar tashmë diçka - për shembull,). Fat i mirë me këtë pronë.

Në ngritjen e çdo faqeje, përveç funksionalitetit, dizajni është shumë i rëndësishëm. Kjo është ajo që përcakton stilin dhe dizajnin e një kompanie ose personi të caktuar për të cilin po krijohet faqja. Rregullimi i ngjyrës së sfondit dhe imazhit të tij nuk është i vështirë, duke ndjekur udhëzimet në këtë artikull.

• style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"

Ju lutemi vini re se për përdoruesit me rezolucion më të lartë të ekranit, imazhi juaj do të kopjohet poshtë dhe djathtas. Nuk do të duket mirë nëse fotografia nuk është e qartë. Ka komanda të veçanta për të rregulluar këtë cilësim.

• sfond-përsërit: "Vlera". Opsionet për vlerën tuaj mund të jenë: "repeat-x" - përsërit imazhin tuaj të sfondit si horizontalisht ashtu edhe vertikalisht. "repeat-y" - përsëriteni vetëm vertikalisht. "jo-përsëritje" - imazhi është i ngrirë në vend dhe nuk përsëritet. "hapësirë" - e gjithë faqja do të mbushet me numrin maksimal të kopjeve të figurës, ato të jashtme do të priten. "Round" - i njëjti opsion, por skajet e imazhit do të shkallëzohen me saktësi;
• sfond-bashkëngjitje: "Vlera". Nëse zëvendësoni etiketën "lëvizje" në vend të fjalës Vlera, atëherë imazhi do të lëvizë së bashku me sajtin. "i rregulluar" - kur lëvizni, sfondi mbetet i pandryshuar;
• sfond-size: Vlera Vlera2. Këtu, vlerat duhet të marrin një vlerë në pixel. Për shembull: 100px 200px. Përveç pikselëve, pranohen edhe vlerat e përqindjes. Ky është një opsion për të mbushur faqen me një imazh. Përveç numrave, mund të vendosni dy parametra: " përmban" - mbush faqen me një imazh përgjatë anës së gjatë dhe "mbulesë" - mbush faqen me një imazh përgjatë gjerësisë.

Duke ditur bazat e plotësimit të një faqeje me një sfond në HTML, ju jeni gati të krijoni uebsajtin tuaj të parë.

Nga autori: I mirëpres të gjithëve. Ngjyrat e sfondit dhe imazhet në dizajnin e uebit luajnë një rol të madh, pasi ato ju lejojnë të dizajnoni më tërheqës çdo element. Si të bëjmë një sfond në html, do të shohim sot.

A është e mundur të kalosh me html kur vendosësh sfondin?

Unë do t'ju them menjëherë se nuk është kështu. Në përgjithësi, html nuk është krijuar për të dizajnuar faqe në internet. Është thjesht shumë e papërshtatshme. Për shembull, ekziston një atribut bgcolor që mund të përdoret për të vendosur ngjyrën e sfondit, por kjo është shumë e papërshtatshme.

Prandaj, ne do të përdorim fletët e stilit kaskadë (css). Ka shumë opsione të tjera për vendosjen e sfondit. Sot do të analizojmë ato më themeloret.

Si të vendosni sfond me css?

Pra, para së gjithash, duhet të vendosni se në cilin element dëshironi të vendosni sfondin. Kjo do të thotë, ne duhet të gjejmë përzgjedhësin të cilit do t'i shkruajmë rregullin. Për shembull, nëse ju duhet të vendosni sfondin për të gjithë faqen në tërësi, atëherë mund ta bëni këtë përmes përzgjedhësit të trupit, për të gjitha blloqet përmes përzgjedhësit div. Epo, etj. Sfondi mund dhe duhet t'i bashkëngjitet çdo përzgjedhësi tjetër: klasa stili, identifikues, etj.

Pasi të keni vendosur për përzgjedhësin, duhet të shkruani vetë emrin e pronës. Për të vendosur ngjyrën e sfondit (përkatësisht, një ngjyrë të fortë, jo një gradient dhe jo një imazh), përdoret vetia e ngjyrës së sfondit. Pas saj, duhet të vendosni një dy pika dhe të shkruani vetë ngjyrën. Kjo mund të bëhet në mënyra të ndryshme. Për shembull, duke përdorur fjalë kyçe, kodin hex, rgb, rgba, formatet hsl. Çdo metodë do të bëjë.

Metoda më e përdorur është kodi heksadecimal. Për të zgjedhur ngjyrat, mund të përdorni një program në të cilin mund të shihni kodin e ngjyrave. Për shembull photoshop, paint ose ndonjë mjet online. Prandaj, për shembull, unë do të përshkruaj një sfond të përbashkët për të gjithë faqen e internetit.

trupi (ngjyra e sfondit: #D4E6B3; )

Ky kod duhet të futet në pjesën e kokës. Është e rëndësishme që skedarët të jenë në të njëjtën dosje.

Foto si sfond

Si foto do të përdor një ikonë të vogël gjuha html:

Le të krijojmë një bllok bosh me një ID:

Le t'i japim dimensione të qarta dhe një sfond:

#bg (gjerësia: 400 px; lartësia: 250 px; imazhi i sfondit: url (html.png); )

Nga ky kod, ju mund të shihni se unë kam përdorur një pronë të re të quajtur background-image. Është menduar vetëm për të futur një imazh si sfond në një element html. Le të shohim se çfarë ndodhi:

Për të specifikuar një imazh, duhet të shkruani url-në e fjalës kyçe pas dy pikave dhe më pas të specifikoni shtegun për në skedar në kllapa. Në këtë rast, shtegu specifikohet bazuar në faktin se imazhi është në të njëjtën dosje me dokumentin html. Ju gjithashtu duhet të specifikoni formatin e imazhit.

Nëse e keni bërë këtë dhe sfondi nuk shfaqet ende në bllok, kontrolloni përsëri nëse e keni shkruar saktë emrin e figurës, nëse shtegu dhe shtrirja janë vendosur saktë. Këto janë arsyet më të zakonshme pse sfondi thjesht nuk shfaqet, sepse shfletuesi nuk mund ta gjejë imazhin.

Por a keni vënë re një veçori? Shfletuesi mori dhe shumëzoi fotografinë në të gjithë bllokun. Pra, vetëm që ta dini, kjo është sjellja e paracaktuar e imazheve të sfondit - ato përsëriten vertikalisht dhe horizontalisht për aq kohë sa mund të futen në bllok. Me këtë sjellje ju mund të menaxhoni lehtësisht. Për ta bërë këtë, përdorni veçorinë e përsëritjes së sfondit, e cila ka 4 vlera kryesore:

Përsërit - vlera e paracaktuar, imazhi përsëritet në të dy anët;

Repeat-x - përsëritet vetëm në boshtin x;

Përsërit-y - përsëritet vetëm përgjatë boshtit y;

Pa përsëritje - nuk përsëritet fare;

Ju mund të shkruani çdo vlerë dhe të shihni se çfarë ndodh. Unë do të shkruaj kështu:

sfond-përsërit: përsërit-x;

Tani përsërisni vetëm horizontalisht. Nëse shkruani pa përsëritje, atëherë do të kishte vetëm një foto.

E shkëlqyeshme, mund të përfundojmë këtu, sepse kjo veçoritë themelore punoni me sfondin, por unë do t'ju tregoj 2 veçori të tjera që ju lejojnë të merrni më shumë kontroll mbi të.

Me përsëritje, koduesit përdoreshin për të arritur pikën e krijimit të teksturave dhe gradientëve të sfondit duke përdorur një imazh të vogël. Mund të jetë 30 me 10 piksel ose edhe më i vogël. Ose ndoshta pak më shumë. Imazhi ishte i tillë që kur përsëritej në njërën apo edhe në të dyja anët, nuk dukej asnjë tranzicion, kështu që në fund fitohej një sfond i vetëm solid. Nga rruga, kjo qasje ia vlen të përdoret tani nëse dëshironi të përdorni një strukturë pa probleme në faqen tuaj si sfond. Gradienti sot tashmë mund të zbatohet duke përdorur metoda css3, ne patjetër do të flasim për këtë më vonë.

Pozicioni në sfond

Si parazgjedhje, imazhi i sfondit, nëse nuk është caktuar të përsëritet, do të jetë në këndin e sipërm të majtë të bllokut të tij. Por pozicioni mund të ndryshohet lehtësisht me veçorinë background-position.

Mund ta pyesni në mënyra të ndryshme. Një opsion është thjesht të specifikoni anët në të cilat duhet të jetë imazhi:

pozicioni i sfondit: lart djathtas;

Kjo do të thotë, gjithçka mbeti e njëjtë vertikalisht: imazhi i sfondit ndodhet në krye, por horizontalisht ne ndryshuam anën në të djathtë, domethënë atë të duhurin. Një mënyrë tjetër për të vendosur pozicionin është si përqindje. Në këtë rast, numërimi mbrapsht fillon në çdo rast nga këndi i sipërm i majtë. 100% - i gjithë blloku. Kështu, për të vendosur imazhin saktësisht në qendër, ne e shkruajmë atë si kjo:

sfond-pozicion: 50% 50%;

Një gjë e rëndësishme që duhet mbajtur mend për pozicionimin është se parametri i parë është gjithmonë pozicioni horizontal dhe parametri i dytë është pozicioni vertikal. Pra, nëse shihni një vlerë prej 80% 20%, atëherë mund të konkludoni menjëherë se imazhi i sfondit do të zhvendoset fuqishëm në të djathtë, por nuk do të zbresë shumë.

Dhe së fundi, mund të specifikoni pozicionin në piksele. Gjithçka është e njëjtë, vetëm në vend të % do të ketë px. Në disa raste, një pozicionim i tillë mund të jetë gjithashtu i nevojshëm.

Shënim i shkurtuar

Pajtohem që kodi rezulton të jetë mjaft i rëndë nëse gjithçka është vendosur ashtu siç e kemi bërë. Rezulton se rruga drejt figurës duhet të vendoset, përsëritja dhe pozicioni. Natyrisht, përsëritja dhe pozicioni nuk janë gjithmonë të nevojshme, por në çdo rast, do të ishte më korrekte të përdorej stenografia e pronës. Ajo duket kështu:

sfond: #333 url(bg.jpg) pa përsëritje 50% 50%;

Kjo do të thotë, hapi i parë është të regjistroni ngjyrën e përgjithshme të ngurtë të sfondit, nëse është e nevojshme. Pastaj rruga drejt imazhit, përsëritja dhe pozicioni. Nëse ndonjë parametër nuk është i nevojshëm, atëherë thjesht hiqeni atë. Pajtohem, kjo është shumë më e shpejtë dhe më e përshtatshme, dhe ne gjithashtu reduktojmë ndjeshëm kodin tonë. Në përgjithësi, ju këshilloj të shkruani gjithmonë shkurtimisht, edhe nëse duhet të specifikoni vetëm një ngjyrë ose një foto.

Kontrolli i madhësisë së imazhit të sfondit

Imazhi ynë aktual nuk përshtatet shumë mirë me mashtrimin tjetër, kështu që unë do të marr një tjetër. Në madhësi, le të jetë si një bllok ose më i madh se ai. Pra, imagjinoni se jeni përballur me detyrën për të krijuar një imazh të sfondit në mënyrë që të mos e mbushë plotësisht bllokun e tij. Dhe fotografia, për shembull, është edhe më e madhe se madhësia e bllokut.

Çfarë mund të bëhet në një rast të tillë? Sigurisht, opsioni më i thjeshtë dhe më i arsyeshëm do të ishte thjesht zvogëlimi i imazhit, por kjo nuk është gjithmonë e mundur. Le të themi se shtrihet në server dhe për momentin nuk ka kohë dhe mundësi për ta zvogëluar atë. Problemi mund të zgjidhet me ndihmën e vetive të madhësisë së sfondit, e cila mund të quhet relativisht e re dhe e cila ju lejon të manipuloni madhësinë e imazhit të sfondit, dhe në të vërtetë çdo sfond.

Pra, imazhi im tani zë të gjithë hapësirën në bllok, por unë do t'i jap një madhësi sfondi:

madhësia e sfondit: 80% 50%;

Përsëri, parametri i parë është madhësia horizontale, e dyta është madhësia vertikale. Ne shohim që gjithçka është zbatuar në mënyrë korrekte - fotografia është bërë 80% e gjerësisë së bllokut në gjerësi dhe gjysmë në lartësi. Këtu ju duhet vetëm të bëni një sqarim - duke vendosur madhësinë si përqindje, mund të ndikoni në përmasat e figurës. Kështu që bëni kujdes nëse doni të mos thyeni përmasat.

Siç mund ta merrni me mend, madhësia e sfondit mund të specifikohet gjithashtu në piksel. Ekzistojnë gjithashtu dy fjalë kyçe me vlerë që mund të përdoren gjithashtu:

Mbulesa - imazhi do të shkallëzohet në mënyrë që të paktën njëra anë e saj të mbushë plotësisht bllokun.

Përmbajë - shkallëzohet në mënyrë që imazhi të përshtatet plotësisht në bllok në madhësinë e tij maksimale.

Avantazhi i këtyre vlerave është se ato nuk ndryshojnë përmasat e figurës, duke i lënë ato të njëjta.

Gjithashtu, duhet të kuptoni se shtrirja e figurës mund të çojë në një përkeqësim të cilësisë së saj. Mund të jap një shembull nga jeta dhe praktika reale e stilistëve. Të gjithë e dinë dhe e kuptojnë se kur dizajnoni për desktop, ju duhet ta përshtatni sajtin me gjerësinë kryesore të monitorit: 1280, 1366, 1920. Nëse merrni një imazh të sfondit me madhësi, le të themi, 1280 me 200 dhe nuk caktoni madhësinë e sfondit për atë, atëherë shfaqen ekranet me gjerësi më të madhe se një hapësirë ​​boshe, fotografia nuk do ta mbushë plotësisht gjerësinë.

Në 99% të rasteve, kjo nuk i përshtatet zhvilluesit të uebit, kështu që ai vendos madhësinë e sfondit: mbulesën në mënyrë që imazhi të shtrihet gjithmonë në gjerësinë maksimale të dritares. Ky është një truk i mirë për t'u përdorur, por tani do të hasni problemin që përdoruesit me një gjerësi ekrani prej 1920 pikselësh mund të shohin një cilësi imazhi nën optimale.

Ju kujtoj se do të shtrihet në gjerësinë maksimale. Prandaj, cilësia do të përkeqësohet automatikisht. Vetëm vendim të drejtë këtu fillimisht do të përdoret një imazh më i madh - 1920 piksel i gjerë. Pastaj në ekranet më të gjera do të jetë në madhësinë e tij natyrale, dhe në të tjerët thjesht do të pritet ngadalë, por në të njëjtën kohë, me një përzgjedhje kompetente të imazhit të sfondit, në pamjen faqja nuk do të ndikohet.

Në përgjithësi, ky është vetëm 1 shembull se si të zbatoni njohuritë që keni marrë në këtë artikull në paraqitjet e jetës reale.

sfond i tejdukshëm me css

Një veçori tjetër me të cilën mund të zbatohet css- sfond i tejdukshëm. Kjo do të thotë, përmes këtij sfondi do të jetë e mundur të shihet se çfarë fshihet pas tij.

Si shembull, unë do të vendos sfondin e të gjithë faqes në imazhin që kemi përdorur më parë në shembujt. Për bllokun me identifikuesin bg, mbi të cilin ne kryejmë të gjitha eksperimentet tona, do të vendosim sfondin duke përdorur formatin e vendosjes së ngjyrave rgba.

Siç thashë më herët, ka shumë formate në css për vendosjen e ngjyrave. Një prej tyre është rgb, një format mjaft i njohur për ata që punojnë redaktorët grafikë. Është shkruar kështu: rgb(17, 255, 34);

Vlera e parë në kllapa është ngopja e ngjyrës së kuqe, pastaj jeshile, pastaj blu. Vlera mund të jetë numerike nga 0 në 255. Prandaj, formati rgba nuk është i ndryshëm, shtohet vetëm një parametër tjetër - kanali alfa. Vlera mund të jetë nga 0 në 1, ku 0 është transparencë e plotë.

Pothuajse çdo faqe e njohur ka një pamje të këndshme. Në dizajnimin e faqeve të internetit, një pjesë e rëndësishme është sfondi, i cili quhet ndryshe sfondi, të cilin secili prej nesh mund ta krijojë ose ta ndryshojë. Në këtë artikull do t'ju tregoj se si të vendosni një sfond në sit.

Krijimi i një sfondi të ri për faqet e internetit

Për të përfunduar detyrën, mund të përdorni një nga 4 metodat:

• 1. Sfondi me një ngjyrë
• 2. Sfondi me teksturë
• 3. Sfondi me gradient
• 4. Sfondi me imazh të madh

Krijo një sfond me një ngjyrë

Për të krijuar ose ndryshuar sfondin faqe, e cila përbëhet nga një ngjyrë, ju duhet të shkoni në skedar stil.css, në të cilin gjendet vlera - trupi (është përgjegjës për trupin kryesor të faqes). Tani duhet të shkruani funksionin e ngjyrës së sfondit nëse nuk ishte aty dhe të specifikoni kodin e ngjyrës. Në rastin kur duhet të krijoni një sfond të bardhë për sitin, do të duhet të shkruani kodin e mëposhtëm:

ngjyra e sfondit: #83C5E9 ; (sfondi blu, si në shembull)

Ju do të jeni në gjendje të gjeni listën e plotë ngjyrat në vend - (STM). Për të ndryshuar ngjyrën, thjesht ndryshoni vlerën pas dy pikave dhe shijoni punën tuaj.

Krijimi i një sfondi me një strukturë

Kjo metodë është veçanërisht e popullarizuar kohët e fundit, pasi ju lejon të krijoni një sfond të bukur për sitin. Teksturat mund të jenë të thjeshta por shumë të bukura, kjo është arsyeja pse ato përdoren shpesh. Për të lidhur çdo teksturë, ajo duhet të ngarkohet në dosjen e imazhit në hostin ku është instaluar faqja juaj. Pas kësaj, duhet të shkruani kodin e mëposhtëm:

ngjyra e sfondit: #537759;

background-image: url(images/pattern.png);

Në këtë kod, ekziston një parametër i njohur për ruajtjen e ngjyrës (është jeshile) dhe një element që është përgjegjës për lidhjen e teksturës së gjelbër.

Bërja e sfondit me një gradient

Çdo imazh që është i lidhur duke përdorur funksionet css mund të përsëritet si horizontalisht ashtu edhe vertikalisht (përgjatë boshteve X dhe Y). Kjo veçori na lejon të krijojmë çdo sfond të thjeshtë për sitin me duart tona. Për ta bërë këtë, duhet të krijoni një gradient të gjerë 1 megapiksel (shih foton më poshtë), ta ruani atë si imazh dhe ta ngarkoni në host. Pas kësaj, mund të shkruani kodin e nevojshëm, përkatësisht:

ngjyra e sfondit: #83C5E9;

sfond-imazh: url(images/gradient.jpg);

sfond-përsërit: përsërit-x;

Në këtë grup, sipas prioritetit, ekziston një funksion përgjegjës për ngjyrën e sfondit që përdorim për risigurim. Pas kësaj, një parametër që është përgjegjës për lidhjen e gradientit, dhe së fundi, një funksion që është përgjegjës për përsëritjen e gradientit përgjatë boshtit X.

Përdorimi i një imazhi të madh për sfondin e faqes

Kjo metodë është e dyta më e popullarizuara, pasi ju lejon të përdorni fotografi të ndryshme për të krijuar një sfond. Për të zbatuar këtë metodë, ju duhet vetëm të ngarkoni një imazh të madh në dosjen e imazheve të faqes dhe të shkruani kodin e mëposhtëm:

ngjyra e sfondit: #000000;

sfond-imazh: url(imazhe/titulli i imazhit.jpg);

sfond-pozicioni: në qendër të sipërme;

sfond-përsërit: pa përsëritje;

Nëse gjithçka është e qartë me dy parametrat e parë, atëherë duhet të theksohen dy të fundit. Funksioni i tretë ju lejon të rregulloni imazhin në qendër të faqes, dhe parametri i fundit bllokon përsëritjen e tij në të gjithë strukturën e faqes.

Ndryshimi i sfondit në faqet e internetit të ucoz

Këto metoda të krijimit të një sfondi për një faqe mund të përdoren në sisteme të ndryshme të menaxhimit të përmbajtjes, por jo në sajte - ucoz. Për të ndryshuar sfondin për faqen ucoz, duhet të shkoni te paneli i kontrollit të faqes, shkoni te "Menaxhimi i Dizajnit", dhe më pas në "Redaktimi i modeleve".

Tani ju duhet të hapni Style Sheet (CSS), të gjeni linjën trupi dhe parametri sfond. Pas kësaj, duhet të kopjoni lidhjen, ta ngjisni në shfletuesin e Internetit dhe do të keni akses në foton që ishte sfondi.

Për të përdorur sfondin e ri, thjesht duhet ta ngarkoni në Menaxheri i skedarëve. Në të njëjtën kohë, sigurohuni që emri i imazhit të ri për sfondin të jetë i njëjtë si përpara ndryshimit. Ruani punën tuaj dhe shkoni në sit për të parë punën e kryer.

Ndrysho sfondin e sajtit në HTML

Nëse dëshironi të krijoni një sfond në një faqe html duke përdorur një imazh, atëherë thjesht futni rreshtin në kod:

Dhe nëse doni të bëni sfondin e faqes duke përdorur ngjyrën, atëherë linja duhet të duket si kjo:

Kjo përfundon historinë tonë. Tani ju e dini se si të krijoni një sfond për një faqe interneti. Projekte të suksesshme!

Shfletuesit modernë ju lejojnë të shtoni një numër arbitrar të imazheve të sfondit në një element, duke renditur parametrat e secilit sfond të ndarë me presje. Mjafton të përdorni veçorinë universale të sfondit dhe të specifikoni së pari një sfond për të dhe të dytën të ndarë me presje.

Si të zgjasni sfondin në gjerësinë e plotë të dritares?

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ë shfletuesit, duhet të përdoren veçori specifike të prefiksuara, siç tregohet në shembullin 1.

Si të shtoni një imazh të sfondit në një faqe në internet?

Për të shtuar një imazh të sfondit në një faqe interneti, specifikoni shtegun drejt imazhit brenda vlerës së url-së së vetive të stilit të sfondit, e cila nga ana tjetër shtohet në përzgjedhësin e trupit.

A është e mundur të krijoni një sfond të animuar?

Animacioni është një teknikë mjaft e fuqishme që mund të sjellë në jetë çdo dokument, kështu që nuk është për t'u habitur që teknologjia Flash ka fituar një popullaritet të jashtëzakonshëm, e cila shton karikaturat në faqet e internetit, përveç atyre interaktive. Formati grafik GIF gjithashtu mbështet animacionin bazë përmes animacionit kornizë për kornizë. Pra, duke përdorur një imazh në këtë format, lejohet të animohen jo vetëm imazhe individuale, por edhe sfondi i një faqeje interneti ose një elementi specifik.

Së pari ju duhet të krijoni një fotografi të animuar në formatin GIF, për të cilën mund të përdorni programin Adobe Photoshop ose një tjetër të përshtatshme për këtë qëllim. Ekzistojnë gjithashtu biblioteka me skedarë të gatshëm të animuar që mund të përdoren si imazh sfondi. Më pas, imazhi shtohet si sfond duke përdorur veçorinë e stilit të sfondit, siç tregohet në shembullin 1.

Si të vendosni një imazh të sfondit në këndin e poshtëm të djathtë të një faqeje?

Për të kontrolluar pozicionin e imazhit të sfondit në faqe, përdoret vetia e stilit të pozicionit të sfondit, ajo cakton njëkohësisht koordinatat horizontale dhe vertikale të figurës. Për të ndaluar përsëritjen e një imazhi të sfondit, përdorni veçorinë e pozicionit të sfondit me vlerën pa përsëritje.

Si ta bëni sfondin të mos përsëritet?

Si parazgjedhje, imazhi i sfondit përsëritet horizontalisht dhe vertikalisht, duke shtruar me pllaka të gjithë fushën e faqes së internetit. Megjithatë, kjo sjellje e sfondit nuk kërkohet gjithmonë, veçanërisht në rastin e një imazhi të vetëm, kështu që vlera e mospërsëritjes e shtuar në vetinë e stilit të sfondit vjen në ndihmë.

Si mund ta bëj që sfondi të përsëritet vetëm vertikalisht?

Përsëritja e sfondit zakonisht kërkohet për të krijuar linja dekorative ose gradientë të lidhur me lartësinë e një elementi ose dritareje në një faqe interneti. Në raste të tilla, përsëritja e sfondit vertikalisht siguron një pamje solide, pavarësisht nga madhësia e elementeve. Vetëm në fillim duhet të kujdeseni që imazhi i sfondit të përsëritet pa nyje.