Cum să faci un fundal pentru o pagină. Setarea unui fundal perfect în HTML

Aproape fiecare site popular are un frumos aspect. În designul site-ului web parte importantă este fundalul, numit și fundal, pe care fiecare dintre noi îl poate crea sau schimba. În acest articol vă voi spune cum să puneți un fundal pe un site web.

Crearea unui nou fundal pentru site-uri web

Pentru a finaliza sarcina, puteți utiliza una dintre cele 4 metode:

• 1. Fundal cu o singură culoare
• 2. Fundal cu textură
• 3. Fundal folosind un gradient
• 4. Fundal dintr-o imagine mare

Creați un fundal folosind o singură culoare

Pentru a crea sau a schimba fundalul site-ul, care constă dintr-o singură culoare, trebuie să mergeți la fișier stil.css, în care găsiți valoarea - corp (este responsabil pentru corpul principal al site-ului). Acum trebuie să înregistrați funcția de culoare de fundal dacă nu a existat și să indicați codul de culoare. În cazul în care trebuie să creați un fundal pentru site alb, atunci va trebui să scrieți următorul cod:

culoare de fundal: #83C5E9; (fond albastru, ca în exemplu)

Puteți găsi o listă completă de culori pe site - (STM). Pentru a schimba culoarea, pur și simplu schimbați valoarea după două puncte și bucurați-vă de eforturile voastre.

Crearea unui fundal folosind textura

Această metodă este deosebit de populară în În ultima vreme, deoarece vă permite să creați un fundal frumos pentru site. Texturile pot fi simple, dar foarte frumoase, motiv pentru care sunt adesea folosite. Pentru a conecta orice textură, trebuie să o încărcați în folderul de imagini de pe găzduirea unde este instalat site-ul dvs. După aceasta, ar trebui să scrieți următorul cod:

culoare de fundal: #537759;

imagine de fundal: url(images/pattern.png);

Acest cod conține un parametru familiar pentru menținerea culorii (este verde) și un element care este responsabil pentru conectarea texturii verde.

Realizarea unui fundal folosind un gradient

Orice imagine care este conectată prin funcții css, poate fi repetat atât pe orizontală, cât și pe verticală (de-a lungul axelor XȘi Y). Această oportunitate ne permite să creăm orice fundal simplu pentru site cu propriile noastre mâini. Pentru a face acest lucru, trebuie să creați un gradient de 1 megapixel lățime (vezi imaginea de mai jos), să îl salvați ca imagine și să îl încărcați pe găzduirea dvs. După aceasta, puteți scrie codul necesar, și anume:

culoare de fundal: #83C5E9;

imagine de fundal: url(images/gradient.jpg);

background-repeat: repetare-x;

În acest set, în ordinea priorităților, există o funcție responsabilă de culoarea de fundal, pe care o folosim pentru reasigurare. După aceasta, un parametru care este responsabil pentru conectarea gradientului și, în sfârșit, o funcție care este responsabilă cu repetarea gradientului de-a lungul axei X.

Utilizarea unei imagini mari pentru fundalul site-ului

Această metodă este a doua cea mai populară deoarece vă permite să utilizați poze diverse pentru a crea un fundal. Pentru a implementa această metodă, trebuie doar să descărcați imagine mareîn folderul cu imaginile site-ului și scrieți următorul cod:

culoare de fundal: #000000;

imagine de fundal: url(imagini/titlu imagine.jpg);

fundal-poziție: centru sus;

background-repeat: fără repetare;

Dacă totul este clar cu primii doi parametri, atunci ultimii doi trebuie acoperiți. A treia funcție vă permite să fixați imaginea în centrul site-ului și ultimul parametru blochează repetarea acesteia în întreaga structură a paginii.

Schimbarea fundalului pe site-urile web ucoz

Aceste metode de creare a unui fundal pentru un site web pot fi utilizate pe sisteme diferite management site, dar nu pe site-uri - ucoz. Pentru a schimba fundalul pentru site-ul web ucoz, trebuie să accesați panoul de control al site-ului, accesați „Managementul designului”, și apoi în „Editarea șabloanelor”.

Acum trebuie să deschideți Foaia de stil (CSS), găsiți linia "corp"și parametru "fundal". După aceasta, trebuie să copiați linkul, să-l lipiți în browserul dvs. de internet și veți avea acces la imaginea care a fost fundalul.

Pentru a utiliza un fundal nou, trebuie doar să-l încărcați Manager de fișiere. În același timp, asigurați-vă că numele noii imagini de fundal este același ca înainte de modificare. Salvați-vă munca și accesați site-ul web pentru a vedea lucrările efectuate.

Schimbarea fundalului site-ului în HTML

Dacă doriți să faceți fundalul pe un site html folosind o imagine, atunci pur și simplu introduceți linia în cod:

Și dacă doriți să faceți fundalul site-ului folosind culoare, atunci linia ar trebui să arate astfel:

Aceasta încheie povestea noastră. Acum știi cum să faci un fundal pentru un site web. Proiecte fericite!

ÎN Imagini HTML introdus folosind o etichetă img.
Etichetă img- gol, conține atribute și nu are etichetă de închidere.

Atributul este folosit pentru a afișa o imagine pe pagină src. Sr a venit de la sursă, ceea ce înseamnă Sursă. Valoarea atributului src este url Imagini.

Linia de mai sus înseamnă că imaginea se află în același director (dosar) ca și fișierul html care face legătura cu această imagine. Să presupunem că aveți un folder html, care contine index.html cu codul de mai sus și imaginea însăși cu titlul imagine.jpg.

În acest caz, la deschidere index.html Veți vedea această imagine în browserul dvs. Dacă îl aveți în altă parte (un folder mai sus sau mai jos), atunci veți vedea fie un câmp alb, fie un dreptunghi mic cu o cruce roșie (imaginea nu a putut fi încărcată).

Imaginile nu sunt întotdeauna localizate în același director (dosar) ca fișierul în sine, așa că specificarea căilor va fi descrisă mai în mod specific puțin mai târziu.

atributele etichetei img

Pe lângă src etichetă img Există și alte atribute care sunt responsabile pentru dimensiunea imaginii afișate, legenda acesteia și așa mai departe.

src- adresa imaginii
lăţime- latimea imaginii
înălţime- înălțimea imaginii
titlu- semnătură care apare când treci cu mouse-ul peste imagine
alt - text alternativ. Necesar pentru robot de căutareși indexarea imaginilor
frontieră- grosimea marginii imaginii. 0 - fără chenar, 1 - chenar cel mai subțire etc.

Adresa imaginii introduse (exemple)

De obicei, Imagini nu sunt stocate în același folder cu fișier html. În acest scop, se creează un folder în același director imagini(sau img, in functie de gust si culoare). Și totul este deja pus în el imaginile necesare. În cazul stocării separate, va trebui să specificați o adresă diferită pentru atributul src

Dacă fișierul se află în folderul de mai sus, atunci așa

De asemenea, puteți insera o imagine de pe alt site cu totul, fără a o descărca în folderul dvs. Pentru a face acest lucru, trebuie să aveți o conexiune la Internet stabilă și aproximativ următorul cod, în care introduceți adresa imaginii de pe Internet în adresa:

Imagine de fundal în HTML

La fel de imagine de fundal pot apărea fișiere cu extensii gif, jpg, jpegȘi png. Dacă dimensiunea imaginii este mai mică decât fereastra browserului, imaginea va continua automat să umple fundalul rămas. ÎN corp utilizați atributul fundal, în care specificăm calea către imagine

Vlad Merjevici

Datorită particularităților paginilor web, imaginile de fundal joacă un rol semnificativ în aspectul documentelor site-ului. În același timp, ei sunt implicați activ într-o varietate de lucruri, de exemplu, automatizarea procesului de atașare a imaginilor la text, crearea de tranziții în gradient și, desigur, adăugarea unui fundal sub conținut. Mai jos sunt câteva aspecte ale utilizării imaginilor de fundal.

Fundal pe o pagină web

Instalare imagine de fundal la o pagină web apare în mod tradițional prin atributul de fundal al etichetei . Acest model se repetă orizontal și vertical, umplând astfel întreaga fereastră a browserului. Este clar că opțiuni speciale Nu este loc pentru creativitate aici, așa că hai să ne întoarcem la stiluri și să vedem ce poți face cu CSS.

CSS are cinci atribute care controlează imaginea de fundal: adăugarea, poziția și repetarea acesteia. Cu toate acestea, toți acești parametri sunt înlocuiți cu o proprietate universală, fundal, pe care o vom folosi în viitor.

Adăugarea unui tapet

Adăugarea unei imagini are loc prin setarea adresei imaginii folosind cuvântul cheie url. Pentru a controla repetarea unei imagini, se folosesc argumentele no-repeat, repeat-x (repeat orizontal) și repeat-y (repeat vertical). Datorită acestui lucru, puteți obține pagina web prezentată în Fig. 1.

Pentru a seta o imagine pe o pagină web, trebuie să adăugați o proprietate de stil de fundal la selectorul BODY, așa cum se arată în Exemplul 1.

Exemplul 1: imagine de fundal

ÎN în acest exemplu desen grafic target.gif este definit ca fundalul unei pagini web fără a repeta imaginea. Pentru a preveni ca imaginea să se potrivească strâns la marginile browserului, aceasta este deplasată cu 30 de pixeli la dreapta și cu 20 de pixeli în jos față de poziția inițială.

Repetarea unui model

Datorită faptului că puteți seta modelul de fundal să se repete orizontal sau vertical, sunt disponibile mai multe opțiuni pentru proiectarea paginilor web. De exemplu, pentru a crea dungă verticală de-a lungul marginii din stânga (Fig. 2) veți avea nevoie de imaginea prezentată în Fig. 3.

Modelul ar trebui să fie astfel încât să se potrivească pe verticală fără cusături vizibile și, de asemenea, să formeze un singur întreg cu culoarea specificată fundalul paginii web. Exemplul 2 arată cum să creați o astfel de imagine de fundal, folosind din nou proprietatea de fundal și valoarea sa de repetare.

Exemplul 2. Repetarea fundalului pe verticală

În mod similar, puteți repeta fundalul pe orizontală, de exemplu, creând un gradient și setându-l ca imagine de fundal(Fig. 4).

Pentru a obține pagina web prezentată în Fig. 4, mai întâi va trebui să faceți o imagine cu o tranziție în gradient. Lățimea este suficientă pentru a specifica 20-40 pixeli, iar înălțimea imaginii depinde de scopul documentului și de înălțimea așteptată a conținutului paginii web. De asemenea, nu trebuie să uităm că desenul marime mare va duce la o creștere a volumului fisier grafic. Și acest lucru va afecta negativ viteza de încărcare și, în cele din urmă, va duce la afișarea mai lentă în fundal. Pentru acest caz, o imagine de 30x200 pixeli era destul de potrivită (Fig. 5).

Exemplul 3 arată codul HTML pentru a crea un fundal gradient.

Exemplul 3: Repetare pe fundal orizontal

Un design gradient se potrivește bine cu un bloc de culoare solidă, așa că în acest exemplu adăugăm un strat pentru a afișa conținutul paginii web.

Adăugarea unei imagini la text

Folosind o imagine de fundal, puteți automatiza procesul de adăugare a elementelor grafice unui anumit text, cum ar fi titluri. În acest scop este folosit proprietate universală fundal care se aplică selectorului dorit. Valoarea este calea către imagine și, pentru ca aceasta să nu se repete, argumentul fără repetare (exemplul 4).

Exemplul 4: Adăugarea unei imagini

Titlu

Textul principal

După cum se arată în acest exemplu, imaginea poate fi deplasată orizontal și vertical față de ea pozitia de pornire, implicit acesta este colțul din stânga sus element bloc. Deplasarea fundalului vă permite să poziționați imaginea în raport cu textul în modul dorit. Pentru a preveni suprapunerea textului cu imaginea, trebuie să adăugați proprietatea padding-left, datorită căreia textul este deplasat la dreapta cu distanța specificată. Este individual în fiecare caz și este de obicei egal cu lățimea imaginii plus spațiul dorit dintre imagine și text.

În această postare vă voi spune ca de obicei setați fundalul site-ului folosind HTML cod.

De asemenea, vă voi arăta un excelent serviciu de selecție străină fundaluri fără sudură.
În zilele noastre, setările site-ului sunt făcute mai ușoare și mai convenabile prin console CMS precum WordPress.
Poate fi necesar să schimbați șabloanele de site-uri web de vânzare, acest articol vă va ajuta în acest sens.

Dacă nu știi ce este HTML, atunci aceasta poate fi numită în general limba site-urilor sau un set de reguli prin care site-urile sunt generate.

De exemplu, vedeți o imagine pe un site web, dar în codul HTML al paginii poate arăta astfel:

Setați o culoare solidă pentru fundalul paginii.

Pentru a instala fundal de culoare solidă, trebuie să etichetați adauga atribut bgcolor.

< html >
< head >
< title >Titlul paginii.

< body bgcolor = "#ffcc00" >

Puteți acest cod Introdu in fisier textși salvați cu extensia .html. Apoi deschideți-l cu orice browser și vedeți rezultatul.

După cum probabil ați ghicit, culoarea de fundal apare datorită codului de culoare din atribut bgcolor= „valoare”, care poate fi găsit accesând acest link.

Setarea unei imagini pe fundalul unei pagini HTML.

Pentru a setați imaginea pe fundal, puteți folosi atributul fundalîn etichetă .

< html >
< head >
< title >Titlul paginii.

< body background = "http://сайт/images/mlmsecret.jpg" >Buna ziua. Aceasta este prima mea pagină.

Este posibil să observați că atributul fundal este egal cu calea fișierului care este folosit ca fundal.

Pentru a schimba rapid fundalul sau orice imagine de pe pagină, trebuie doar să specificați Metoda nouaîn fișierul dvs. folosind un editor de text.

Pentru a afla calea anterioară, pe pagina cu poza, dați clic pe poză Click dreaptași faceți clic pe „Copiați adresa URL a imaginii”. astfel vei vedea numele imaginii/fondului. Apoi puteți pur și simplu să înlocuiți vechea imagine cu a dvs., folosind același nume de fișier.

Acestea au fost cele mai simple elemente de bază pentru configurare fundal în html, acum vine partea interesantă. 🙂

Dacă trebuie să formatați un document în text Editor Microsoft Cuvântul nu este doar corect, ci și frumos, atunci este mai bine să folosiți un fel de desen în fundal. Puteți lua oricare, dar este mai bine să se potrivească cu textul tipărit. Poate fi, de asemenea, un logo sau un nume de companie. Dacă le plasați în spatele textului, acesta arată mai frumos decât un filigran sau un fundal și atrage mai multă atenție.

În articolul pe care îl vom analiza Acest subiect, și învață cum să faci o imagine ca fundal în MS Word.

Adăugați o imagine prin elementul de meniu corespunzător

Iată cum puteți selecta o imagine pentru o pagină în Word 2007, 2010 și 2013. Deschis documentul solicitatși accesați fila "Aranjament în pagină". Apoi faceți clic pe butonul „Culoarea paginii” și selectați din meniu.

Dacă aveți Word 2016 instalat, atunci în document deschis accesați fila „Design”, apoi faceți totul așa cum este descris mai sus: „Culoarea paginii” – „Metode de umplere”.

Se va deschide o mică casetă de dialog. În ea, accesați fila „Desen” și faceți clic pe butonul cu același nume, care se află sub zona goală din mijloc.

În Word 2016, aceasta va apărea în fața ferestrei afișate în captura de ecran de mai sus. În el puteți selecta de unde doriți să inserați fotografia, poate fi o imagine de pe computer sau găsiți ceea ce aveți nevoie prin căutare.

După selectarea unei imagini, faceți clic pe „OK” în fereastra corespunzătoare.

La care se adauga aceasta metoda este că fundalul pe care îl alegeți se aplică tuturor paginilor din document.

Și dezavantajul este că imaginea ar trebui să fie dimensiune potrivită. După cum puteți vedea, în exemplu, este vizibil doar un pinguin. În consecință, trebuie să salvez această imagine cu o dimensiune diferită printr-un editor, de exemplu, Paint.

Realizarea unei imagini pe fundalul paginii

Să ne uităm la un alt mod de a face imaginea dorită pe fundal.

Deschideți documentul și accesați fila. Apoi faceți clic pe butonul „Imagine” pentru a o adăuga pe pagină.

În fereastra următoare, găsiți ceea ce vi se potrivește pe computer, selectați-l și faceți clic pe „Inserați”.

După ce imaginea este adăugată, faceți clic dreapta pe ea și selectați din meniul contextual „Încheierea textului” – „În spatele textului”.

Acum tot textul care se află în document va fi afișat în fața imaginii. Pentru a face din imaginea selectată fundalul întregii foi și pentru a elimina marginile albe, trebuie să o întindeți. Pentru a face acest lucru, dați clic pe imagine. Markerii vor apărea imediat de-a lungul marginilor - puncte în colțuri și câte un punct pe fiecare parte. Folosind aceste markere, întindeți cadrul în lățime și înălțime pentru a acoperi întreaga foaie.

Așa mi s-a întâmplat. Avantajul acestei metode este că puteți alege în mod independent care parte a imaginii va fi afișată pe foaie: întregul lucru sau îl puteți întinde și face astfel încât să fie afișată doar o anumită zonă.

Dar dacă aveți nevoie de o singură imagine pentru a fi folosită și există multe pagini în document, atunci este mai bine să alegeți dimensiunea potrivită pentru aceasta și să o faceți pe fundal, așa cum este descris în primul paragraf.

Documentele tale vor arăta mai interesante după ce vei pune o imagine potrivită ca fundal al paginilor. Nu uitați că niciun text nu trebuie pierdut pe fundalul selectat și ar trebui să se potrivească cu textul.

Evaluează acest articol: