Hogyan készítsünk hátteret egy képre html-ben. Háttér kép

Bármely weboldal felállításakor a funkcionalitás mellett a dizájn is nagyon fontos. Ez határozza meg egy adott cég vagy személy saját stílusát és dizájnját, akinek a weboldalt készítik. A háttérszín és a kép testreszabása egyszerű, ha követi a cikkben található utasításokat.

Nyissa meg a HTML-fájlt a Jegyzettömbbel vagy bármely más, megszokott szövegszerkesztővel. Vegyünk például egy primitív webhelyoldalt, minimális szöveggel. A fájlt bármelyik böngészővel megnyithatja.

Először módosítsa a háttér színét, mivel a lassú internetkapcsolattal rendelkezők nem láthatják azonnal a webhely háttérképét. Egy ideig, amíg a kép betöltődik, csak a webhely színét láthatják.
Írja be a címkébe paraméter bgcolor=”*****”, ahol a ***** a színkód. A HTML színeit bármely grafikus szerkesztőben megtudhatja a „webhez” opció kiválasztásával vagy a https://colorscheme.ru/color-names webhelyen

Csak ki kell választania egy színt a körpalettán, és hozzá kell rendelnie annak intenzitását a négyzeten belül. A jobb oldalon két html kód látható. Másolja ki őket, és illessze be a jegyzettömbbe.

Miután kiválasztotta a színt, és beillesztette a kódba, ellenőrizze, hogy mindent helyesen tett-e úgy, hogy megtekinti a kapott weboldalt egy böngészőből.

Most elkezdheti beilleszteni a háttérképet. Helyezze a kívánt képet a kódmappába a nagyobb kényelem érdekében. Adj neki egy nevet latin betűkkel.

Most megtudhatja a fájl helyét úgy, hogy jobb gombbal kattintson rá, válassza a „Megnyitás ezzel” lehetőséget, és kattintson a számítógépére telepített bármelyik böngészőre.

Másolja ki a címet a böngésző keresősávjából.

Most a címkében írja be a sort:

style=”background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”

Mentse el a fájlt.

Ellenőrizze a weboldalát. Látni fogja, hogy a háttér helyett a szöveg.

Kérjük, vegye figyelembe, hogy a nagyobb képernyőfelbontású felhasználók esetében a kép lefelé és jobbra duplikálódik. Nem fog jól kinézni, ha a kép nem egyszínű. Speciális parancsok vannak a paraméter javítására.

background-repeat : "Érték." Az Ön értékének beállításai a következők lehetnek: „repeat-x” – megismétli a háttérképet vízszintesen és függőlegesen is. „repeat-y” – ismétlés csak függőlegesen. „no-repeat” – a kép a helyére van fagyasztva, és nem ismétlődik. „space” – a teljes oldal a kép maximális számú másolatával lesz kitöltve, a legkülső oldalakat levágja. „kerek” – ugyanaz a lehetőség, de a kép szélei gondosan méretezve lesznek;
background-attachment: „Érték”. Ha a „Scroll” címkét helyettesíti az Érték szó helyett, a kép a webhely mellett gördül. „fix” – görgetés közben a háttér változatlan marad;
background-size: Érték Érték2. Itt az értékeknek pixelben kell lenniük. Például: 100 képpont 200 képpont. A pixeleken kívül százalékos értékeket is elfogadunk. Ez egy lehetőség az oldal képpel való feltöltésére. A számokon kívül két paramétert is megadhatunk: „contain” – a hosszú oldal mentén képpel tölti ki az oldalt és „borító” – szélessége mentén tölti ki képpel az oldalt.

Ha ismeri az oldal HTML-háttérrel való kitöltésének alapjait, készen áll az első webhely létrehozására.

Szinte minden népszerű weboldal szép megjelenésű. A weboldal tervezésének fontos része a háttér, más néven háttér, amelyet mindannyian létrehozhatunk vagy megváltoztathatunk. Ebben a cikkben elmondom, hogyan helyezhet el hátteret egy webhelyen.

Új háttér készítése weboldalak számára

A feladat végrehajtásához a 4 módszer egyikét használhatja:

1. Háttér egy színnel
2. háttér textúra
3. Háttér színátmenet segítségével
4. Háttér nagy képből

Hozzon létre egy hátteret egy szín használatával

Az egy színből álló webhely hátterének létrehozásához vagy módosításához lépjen a fájlba stílus.css, amelyben keresse meg az értéket - test (az oldal fő részéért felelős). Most regisztrálnia kell a háttérszín funkciót, ha nem létezett, és meg kell adnia a színkódot. Abban az esetben, ha fehér hátteret kell létrehoznia egy webhely számára, a következő kódot kell beírnia:

háttérszín: #83C5E9 ; (kék háttér, mint a példában)

A színek teljes listáját a weboldalon találja - (STM). A szín megváltoztatásához egyszerűen módosítsa az értéket a kettőspont után, és élvezze az erőfeszítéseit.

Háttér létrehozása textúra használatával

Ez a módszer az utóbbi időben különösen népszerű, mivel lehetővé teszi, hogy gyönyörű hátteret készítsen az oldalnak. A textúrák lehetnek egyszerűek, de nagyon szépek, ezért gyakran használják őket. Bármilyen textúra csatlakoztatásához fel kell töltenie azt a kép mappájába azon a tárhelyen, ahol a webhely telepítve van. Ezek után a következő kódot kell beírni:

háttérszín: #537759;

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

Ez a kód egy ismert paramétert tartalmaz a szín (zöld) fenntartására, valamint egy elemet, amely a zöld textúra összekapcsolásáért felelős.

Háttér készítése színátmenet segítségével

A css függvényekkel összekapcsolt bármely kép vízszintesen és függőlegesen is megismételhető (a tengelyek mentén xÉs Y). Ez a lehetőség lehetővé teszi, hogy saját kezűleg elkészítsük az oldal bármilyen egyszerű hátterét. Ehhez létre kell hozni egy 1 megapixel széles színátmenetet (lásd az alábbi képet), elmenteni képként és feltölteni a tárhelyedre. Ezután beírhatja a szükséges kódot, nevezetesen:

háttérszín: #83C5E9;

background-image: url(images/gradient.jpg);

háttér-ismétlés: ismétlés-x;

Ebben a készletben fontossági sorrendben van egy háttérszínért felelős funkció, amit viszontbiztosításnál használunk. Ezt követően egy paraméter, amely a gradiens összekapcsolásáért felelős, és végül egy függvény, amely a gradiens X tengely mentén történő ismétlődéséért felelős.

Nagy kép használata a webhely hátterében

Ez a módszer a második legnépszerűbb, mivel lehetővé teszi különböző képek felhasználását a háttér létrehozásához. A módszer megvalósításához csak egy nagy képet kell feltöltenie a webhely képmappájába, és be kell írnia a következő kódot:

háttérszín: #000000;

background-image: url(képek/képcím.jpg);

háttér-pozíció: középső felső;

háttér-ismétlés: nincs ismétlés;

Ha minden világos az első két paraméterrel, akkor az utolsó kettőt le kell fedni. A harmadik funkció lehetővé teszi a kép rögzítését a webhely közepére, az utolsó paraméter pedig blokkolja annak ismétlődését a teljes oldalszerkezetben.

A háttér megváltoztatása az ucoz webhelyeken

A webhely hátterének létrehozására szolgáló módszerek különböző tartalomkezelő rendszereken használhatók, de webhelyeken nem - ucoz. Az ucoz webhely hátterének megváltoztatásához lépjen a webhely vezérlőpultjára, menjen a címre "Dizájnmenedzsment", majd be "Sablonok szerkesztése".

Most meg kell nyitnia a stíluslapot (CSS), meg kell keresnie a sort "test"és paraméter "háttér". Ezt követően ki kell másolnia a linket, be kell illesztenie az internetböngészőjébe, és máris hozzáférhet a háttérben lévő képhez.

Új háttér használatához csak fel kell töltenie a Fájlkezelőbe. Ugyanakkor ügyeljen arra, hogy az új háttérkép neve megegyezzen a változtatás előttivel. Mentse el munkáját, és lépjen a webhelyre az elvégzett munka megtekintéséhez.

A webhely hátterének módosítása HTML-re

Ha egy html webhely hátterét egy kép segítségével szeretné elkészíteni, egyszerűen írja be a kódot a következő sorba:

És ha színnel szeretné elkészíteni a webhely hátterét, akkor a vonalnak így kell kinéznie:

Ezzel véget is ért a történetünk. Most már tudja, hogyan készíthet hátteret egy webhelyhez. Boldog projekteket!

A szerzőtől:Üdv mindenkinek. A webdizájnban óriási szerepet játszanak a háttérszínek és a képek, hiszen ezek segítségével tetszőleges elemet vonzóbbá alakíthatsz. Ma megnézzük, hogyan készítsünk hátteret HTML-ben.

Lehetséges HTML-t használni a háttér beállítására?

Azonnal megmondom, hogy nem. Általában a html-t nem weboldalak tervezésére hozták létre. Csak nagyon kényelmetlen. Például van egy bgcolor attribútum, amivel beállíthatod a háttérszínt, de ez nagyon kényelmetlen.

Ennek megfelelően a lépcsőzetes stíluslapokat (CSS) fogjuk használni. Sokkal több lehetőség van a háttér beállítására. Ma a legalapvetőbbeket nézzük meg.

Hogyan állíthatok be hátteret css segítségével?

Tehát mindenekelőtt el kell döntenie, hogy melyik elemre szeretné beállítani a hátteret. Vagyis találnunk kell egy szelektort, amelyre szabályt írunk. Ha például be kell állítania a hátteret a teljes oldal egészéhez, ezt a törzsválasztón, az összes blokk esetében pedig a div választón keresztül teheti meg. Hát stb. A hátteret bármilyen más szelektorhoz lehet és kell kötni: stílusosztályok, azonosítók stb.

Miután döntött a választó mellett, meg kell írnia magának az ingatlannak a nevét. A háttérszín (nevezetesen egyszínű, nem színátmenet vagy kép) beállításához használja a background-color tulajdonságot. Utána kettőspontot kell tennie, és meg kell írnia magát a színt. Ezt különböző módon lehet megtenni. Például kulcsszavak, hexadecimális kód, rgb, rgba, hsl formátumok használatával. Bármely módszer megteszi.

A leggyakrabban használt módszer a hexadecimális kód. A színek kiválasztásához használhat egy programot, amely megjeleníti a színkódot. Például photoshop, paint vagy valamilyen online eszköz. Ennek megfelelően példaként írok egy általános hátteret az egész weblapra.

test( háttérszín: #D4E6B3; )

Ezt a kódot be kell szúrni a fejrészbe. Fontos, hogy a fájlok ugyanabban a mappában legyenek.

Kép háttérként

A képhez egy kis html nyelvi ikont fogok használni:

Hozzunk létre egy üres blokkot egy azonosítóval:

< div id = "bg" > < / div >

Adjunk neki kifejezett méreteket és hátteret:

#bg(szélesség: 400px; magasság: 250px; háttérkép: url(html.png); )

#bg(

szélesség: 400 képpont;

magasság: 250 képpont;

background - image : url (html . png ) ;

Ebből a kódból láthatja, hogy egy új tulajdonságot használtam - a background-image-t. Kifejezetten egy kép beszúrására szolgál háttérként egy html elemhez. Nézzük meg mi történt:

Kép megadásához a kettőspont után az url kulcsszót kell írni, majd zárójelben meg kell adni a fájl elérési útját. Ebben az esetben az elérési út az alapján kerül megadásra, hogy a kép ugyanabban a mappában van, mint a html dokumentum. Meg kell adni a képformátumot is.

Ha ezt megtette, és a háttér továbbra sem jelenik meg a blokkban, ellenőrizze újra, hogy helyesen írta-e be a kép nevét, helyesen van-e beállítva az elérési út és a kiterjesztés. Ezek a leggyakoribb okok, amelyek miatt egyszerűen nem jelenik meg a háttér, mert a böngésző nem találja a képet.

De észrevettél egy dolgot? A böngésző felvette és megsokszorozta a képet az egész blokkban. Tehát, csak hogy tudd, ez a háttérképek alapértelmezett viselkedése – függőlegesen és vízszintesen ismétlődnek, ameddig elférnek a blokkban. Ezzel a viselkedéssel könnyen irányíthatod. Ehhez használja a background-repeat tulajdonságot, amelynek 4 fő értéke van:

Ismétlés – alapértelmezett érték, a kép mindkét oldalon ismétlődik;

Repeat-x – ismétlés csak az x tengelyen;

Repeat-y – csak az y tengely mentén ismétlődik;

No-repeat – egyáltalán nem ismétlődik;

Minden értéket felírhat, és megnézheti, mi történik. Így írom le:

háttér-ismétlés: ismétlés-x;

háttér - ismétlés : ismétlés - x ;

Most ismételje meg csak vízszintesen. Ha nem ismétlést állít be, akkor csak egy kép lesz.

Remek, itt be is fejezhetjük, hiszen ezek a háttérrel való munka alapvető képességei, de mutatok még 2 tulajdonságot, amivel nagyobb irányítást kaphatsz.

Az ismétlés révén az elrendezéstervezők egy apró kép felhasználásával tudtak háttértextúrákat és színátmeneteket létrehozni. Lehet 30 x 10 pixel vagy még kisebb is. Vagy talán egy kicsit többet. A kép olyan volt, hogy az egyik vagy akár mindkét oldalon megismételve nem látszott átmenet, így az eredmény egyetlen, zökkenőmentes háttér lett. Ezt a megközelítést egyébként most érdemes alkalmazni, ha egy zökkenőmentes textúrát szeretne használni a webhelyén háttérként. Ma már css3 metódusokkal is megvalósítható a gradiens, erről a későbbiekben mindenképpen szó lesz.

Háttér pozíció

Alapértelmezés szerint a háttérkép a blokk bal felső sarkában lesz, hacsak nincs beállítva ismétlésre. De a pozíció könnyen megváltoztatható a background-position tulajdonság segítségével.

Különféle módon állíthatja be. Az egyik lehetőség az, hogy egyszerűen megjelöli azokat az oldalakat, amelyeken a képnek elhelyezkednie kell:

háttér-pozíció: jobb felső;

háttér - pozíció : jobb felső ;

Vagyis függőlegesen minden marad a régiben: a háttérkép felül található, de vízszintesen az oldalt jobbra, azaz jobbra változtattuk. A pozíció beállításának másik módja a százalékos arány. Ebben az esetben a visszaszámlálás minden esetben a bal felső sarokból kezdődik. 100% - az egész blokk. Így, hogy a képet pontosan középre helyezzük, a következőképpen írjuk:

háttérpozíció: 50% 50%;

Ne felejtsen el egy fontos dolgot a pozicionálással kapcsolatban - az első paraméter mindig a vízszintes helyzet, a második pedig a függőleges helyzet. Tehát, ha 80% 20% értéket lát, akkor azonnal arra a következtetésre juthat, hogy a háttérkép nagyon el lesz tolva jobbra, de nem csökken sokat.

És végül megadhatja a pozíciót pixelben. Minden a régi, csak a % helyett px lesz. Bizonyos esetekben szükség lehet ilyen elhelyezésre.

Gyorsírási jelölés

Egyetért azzal, hogy a kód meglehetősen nehézkesnek bizonyul, ha minden úgy van beállítva, ahogy mi tettük. Kiderül, hogy meg kell adni a képhez vezető utat, az ismétlést és a pozíciót. Természetesen az ismétlés és a pozíció nem mindig szükséges, de mindenesetre helyesebb lenne a tulajdonságra rövidített jelölést használni. Ez így néz ki:

háttér: #333 url(bg.jpg) no-repeat 50% 50%;

háttér: #333 url(bg.jpg) ismétlés nélküli 50% 50%;

Vagyis az első lépés az általános szilárd háttérszín rögzítése, ha szükséges. Ezután a képhez vezető út, ismétlés és pozíció. Ha valamelyik paraméterre nincs szükség, egyszerűen hagyja ki. Egyetértek, ez sokkal gyorsabb és kényelmesebb, és jelentősen csökkentjük a kódunkat is. Általában azt tanácsolom, hogy mindig rövidített formában írjon, még akkor is, ha csak színt vagy képet kell feltüntetnie.

A háttérkép méretének szabályozása

A mostani képünk nem túl jó a következő trükk bemutatására, úgyhogy veszek egy másikat. Legyen egy blokk méretű vagy nagyobb. Tehát képzelje el, hogy azzal a feladattal kell szembenéznie, hogy készítsen egy háttérképet úgy, hogy az ne töltse ki teljesen a blokkját. És a kép például még a blokkméretnél is nagyobb.

Mit tehet ebben az esetben? Természetesen a legegyszerűbb és legésszerűbb lehetőség a kép egyszerű csökkentése, de ez nem mindig lehetséges. Tegyük fel, hogy a szerveren van, és jelenleg nincs idő és lehetőség csökkenteni. A probléma megoldható a background-size tulajdonsággal, amely viszonylag újnak nevezhető, és amely lehetővé teszi a háttérkép, sőt, bármilyen háttér méretének manipulálását.

Tehát a képem most az összes helyet elfoglalja a blokkban, de adok neki egy háttérméretet:

háttér-méret: 80% 50%;

Ismét az első paraméter állítja be a vízszintes méretet, a második - a függőleges méretet. Látjuk, hogy mindent helyesen alkalmaztak - a fotó a blokk szélességének 80% -a lett szélességben és fele magasságban. Itt csak egy pontosítást kell tennie - a méret százalékos beállításával befolyásolhatja a kép arányait. Tehát legyen óvatos, ha nem akarja felborítani az arányokat.

Ahogy sejthető, a háttér mérete pixelben is megadható. Két további kulcsszó is használható:

Borító – a kép úgy lesz méretezve, hogy legalább az egyik oldalon teljesen kitöltse a blokkot.

Tartalmaz – úgy méretezi, hogy a kép maximális méretben teljesen beleférjen a blokkba.

Ezeknek az értékeknek az az előnye, hogy nem változtatják meg a kép arányait, így ugyanazok maradnak.

Azt is meg kell értenie, hogy a kép nyújtása a minőség romlásához vezethet. Példát tudok hozni a layout tervezők életéből és valós gyakorlatából. Mindenki tudja és érti, hogy az asztali számítógépekre való tervezéskor hozzá kell igazítani az oldalt a fő monitorszélességekhez: 1280, 1366, 1920. Ha készít egy háttérképet, amelynek mérete mondjuk 1280 x 200, és nem adja meg egy háttér méretű, majd nagyobb szélességű képernyők Egy üres hely jelenik meg, a kép nem tölti ki teljesen a szélességet.

Az esetek 99%-ában ez nem felel meg a webfejlesztőnek, ezért úgy állítja be a background-size: cover-et, hogy a kép mindig az ablak maximális szélességéig nyúljon. Ez egy jó technika, de most azzal a problémával kell szembenéznie, hogy az 1920 pixeles képernyő szélességű felhasználók az optimális képminőséget nem látják.

Hadd emlékeztesselek, maximális szélességére fog nyújtani. Ennek megfelelően a minőség automatikusan romlik. Az egyetlen helyes megoldás itt az lenne, ha kezdetben nagyobb – 1920 pixel széles – képet használnánk. Ezután a legszélesebb képernyőkön természetes méretben lesz, másokon pedig egyszerűen fokozatosan levágják, ugyanakkor, ha a háttérképet megfelelően választják ki, ez nem befolyásolja az oldal megjelenését.

Általánosságban elmondható, hogy ez csak 1 példa arra, hogyan használhatja fel a cikkben megszerzett ismereteit valódi elrendezések készítésekor.

Átlátszó háttér css segítségével

Egy másik css segítségével megvalósítható funkció az áttetsző háttér. Vagyis ezen a háttéren keresztül lehet majd látni, mi van mögötte.

Példaként az egész oldalt beállítom a kép háttereként, amelyet korábban a példákban használtunk. A bg azonosítójú blokknál, amelyen minden kísérletünket elvégezzük, a hátteret az rgba színbeállítási formátum használatával állítjuk be.

Ahogy korábban mondtam, a CSS-ben számos formátum létezik a színek beállítására. Az egyik az rgb, amely a grafikus szerkesztőkkel dolgozók számára meglehetősen jól ismert formátum. Így van írva: rgb(17, 255, 34);

A zárójelben szereplő első érték a piros, majd a zöld, majd a kék telítettsége. Az érték numerikus lehet 0 és 255 között. Ennek megfelelően az rgba formátum sem különbözik, csak egy további paraméter kerül hozzáadásra - az alfa csatorna. Az érték 0 és 1 között lehet, ahol a 0 a teljes átlátszóságot jelenti.

Az utolsó cikkben arról beszéltünk, hogyan lehet megváltoztatni a háttérszínt egy webhelyen címke attribútumok segítségével testés CSS stílusok: . Ebben a cikkben arról lesz szó, hogyan lehet képeket háttérként használni egy webhelyen, hogyan lehet a hátteret az oldal teljes szélességére nyújtani és javítani.

Kép oldal háttereként - HTML

Először nézzük meg, hogyan állíthatunk be háttérképet egy webhelyen az attribútum használatával háttér címke test:

Háttérkép HTML használatával

Itt a háttérkép beállítása a body címke background attribútumával történik.

A fenti példához hasonlóan javasolt a képen kívül egy háttérszínt is megadni (az oldal betöltése közben ez megjelenik a webhelyen), amely a legjobban illeszkedik a háttérképhez és kontrasztot teremt a szöveggel az oldalon. Ha például fehér szövegszínt használ a webhelyén, akkor sötét háttérszínt kell megadnia, és sötét háttérképet kell beállítania. Ebben az esetben a szöveg könnyen olvasható lesz.

Jegyzet: Javasoljuk, hogy a háttérképet és a háttérszínt CSS-sel állítsa be HTML helyett. Ebben az esetben a kód érvényes és pontosabb lesz.

Kép oldal háttereként - CSS

A CSS-ben a háttérszín és a háttérkép egy tulajdonságban állítható be háttér:

Háttérkép CSS használatával

Itt a háttérképet a háttér CSS tulajdonságával állítjuk be.

Itt használja az ingatlant háttér-melléklet az oldal háttere rögzített, és a tulajdonságot használja háttér-ismétlés a kép vízszintes ismétlődése be van állítva. De érdemes megfontolni, hogy a háttérképet jól „varrjuk” a széleken.

Ha a háttérképet a böngészőablak teljes méretére szeretné kiterjeszteni, használja a tulajdonságot háttérméret: 100%;

A Nubex webhelykészítőben nagyméretű képet használhat bármely webhely háttereként, és rögzítheti azt.

A modern böngészők lehetővé teszik, hogy tetszőleges számú háttérképet adjunk egy elemhez, vesszővel elválasztva felsorolva az egyes hátterek paramétereit. Elég, ha az univerzális háttér tulajdonságot használjuk, és először egy hátteret adunk meg neki, és egy másodikat vesszővel elválasztva.

Hogyan lehet a hátteret az ablak teljes szélességére nyújtani?

A háttér méretezéséhez használja a background-size tulajdonságot, állítsa be az értékét 100%-ra, ekkor a háttér a böngészőablak teljes szélességét elfoglalja. A böngészők régebbi verzióinál speciális tulajdonságokat kell használnia előtagokkal, amint az az 1. példában látható.

Hogyan lehet háttérképet hozzáadni egy weboldalhoz?

Ha háttérképet szeretne hozzáadni egy weboldalhoz, állítsa be a kép elérési útját a háttérstílus tulajdonság url értékében, amely viszont hozzáadódik a törzsválasztóhoz.

Lehetséges animált hátteret készíteni?

Az animáció egy meglehetősen erős technika, amellyel minden dokumentumot életre kelt, így nem meglepő, hogy a Flash technológia, amely rajzfilmeket ad a weboldalakhoz, és méghozzá interaktívak, rendkívül népszerűvé vált. A GIF grafikus formátum az egyszerű animációt is támogatja a képkockák egymás utáni változtatásával. Tehát egy ilyen formátumú kép használatával nem csak egyes képek animálhatók, hanem egy weboldal vagy egy adott elem háttere is.

Először is létre kell hoznia egy animált képet GIF formátumban, amelyhez használhatja az Adobe Photoshopot vagy más megfelelő programot erre a célra. Vannak olyan könyvtárak is, amelyek kész animált fájlokat tartalmaznak, amelyek háttérképként használhatók. Ezután a képet háttérként adjuk hozzá a háttérstílus tulajdonság használatával, az 1. példában látható módon.

Hogyan lehet háttérképet tenni az oldal jobb alsó sarkába?

A háttérkép oldali pozíciójának szabályozásához a háttér-pozíció stílus tulajdonságot használjuk, amely egyszerre állítja be a kép vízszintes és függőleges koordinátáit. A háttérkép ismétlésének megszakításához használja a background-position tulajdonságot no-repeat értékkel.

Hogyan akadályozhatom meg a háttér megismétlődését?

Alapértelmezés szerint a háttérkép vízszintesen és függőlegesen ismétlődik, és mozaikot képez a weboldal teljes mezőjében. Ez a háttérviselkedés azonban nem mindig szükséges, különösen egyetlen kép elhelyezésekor, így segíthet, ha a háttérstílus tulajdonsághoz nem ismétlődő értéket adunk.

Hogyan állíthatom be, hogy a háttér csak függőlegesen ismétlődjön?

A háttér ismétlése általában szükséges dekoratív vonalak vagy színátmenetek létrehozásához, amelyek egy weboldal elemének vagy ablakának magasságához vannak kötve. Ilyen esetekben a háttér függőleges ismétlése konzisztens képet ad, függetlenül az elemek méretétől. Csak először győződjön meg arról, hogy a háttérkép varrások nélkül ismétlődik.

Hasznos lehet elolvasni: