Veel nieuwe lay-out, gewoon naar het hart van het maken van websites, vaak af hoe je html naar de achtergrond afbeelding te maken.En als sommigen van hen kan omgaan met dit probleem, toch heb je problemen tijdens het traject de gehele breedte van het beeld op de monitor.Tegelijkertijd wil ik de site worden weergegeven op alle browsers te zien, dus het moet voldoen aan de eisen krossbrauzernosti.U kunt een achtergrond instellen op twee manieren: door het gebruik van HTML-tags en CSS-stijlen.Ieder voor zich kiest de beste optie.Natuurlijk, CSS-stijl is veel handiger, omdat de code wordt opgeslagen in een apart bestand en neemt geen extra luidsprekers in de belangrijkste site-tags, maar eerst kijken naar een eenvoudige methode van het beeld op de achtergrond instellen op de site.
eenvoudige HTML-tags om de achtergrond
Dus, ga dan naar de vraag hoe om een achtergrondafbeelding te maken naar html op het scherm te creëren.Om prachtige site kijken, moet je een vrij belangrijk detail te begrijpen: het is genoeg om een verloop achtergrond of een effen kleur te schilderen te maken, maar als u de afbeelding wilt invoegen in de achtergrond, het zal niet de volledige breedte van de monitor te rekken.Het beeld was oorspronkelijk nodig te halen of maak je eigen ontwerp met deze extensie, waarin u de pagina weer te geven.Alleen wanneer de achtergrond klaar is, verplaatsen naar een map met de naam «Beelden».Daarin zullen we alle gebruikte afbeeldingen, animaties en andere beeldbestanden op te slaan.Deze map moet in de root directory van het bestand met al uw HTML.Nu kunt u gaan naar de code.Er zijn verschillende mogelijkheden voor het opnemen code waarmee het patroon beeld te veranderen.
- attribuut Write tag.
- via CSS-stijl in de HTML-code.
- Write CSS-stijl in een apart bestand.
Hoe naar HTML om de achtergrond afbeelding te maken, voor u om te beslissen, maar ik zou graag een paar woorden over hoe het de meest optimale zou zeggen.De eerste methode is door het schrijven via een tag lang achterhaald is.De tweede optie wordt gebruikt zeer zelden, want het blijkt dat een groot deel van de dezelfde code.Een derde optie is de meest voorkomende en effectief.Hier is de HTML-tag voorbeelden:
- eerste methode van het opnemen via een tag (lichaam) in het bestand index.htm.Het is geschreven in deze vorm: (body achtergrond = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ body).Dat wil zeggen, als we een foto met de naam «Foto» en uitbreiding JPG, en de map die we de naam «Beelden», dan is het record van de HTML-code zou er als volgt uitzien: (body achtergrond = "Images / Picture.jpg") ... (/ lichaam).
- tweede methode houdt opnemen CSS styling, maar is geschreven in hetzelfde bestand met de naam index.htm.(body style = "background: url (../ Images / Picture.jpg ')").
- De derde wijze van opname in twee bestanden.Het document met de naam index.htm tag (hoofd) is geschreven dergelijke lijn: (kop) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ head).Een stijl bestand met de naam style.css al schrijven: body {background: url (Images / Picture.jpg ')}.
Hoe naar HTML om de achtergrond afbeelding te maken, hebben we besproken.Nu moet je om erachter te komen hoe om het beeld te rekken over de breedte van het hele scherm.
methoden van het uitrekken van het behang op de breedte van het venster
stel ons scherm in procenten.Het blijkt dat de gehele lengte en breedte van het scherm 100% x 100% zal zijn.We moeten het beeld rekken tot deze breedte.Naar afbeeldingen in het style.css bestand regel dat het beeld zal uitrekken om de gehele breedte en lengte van het scherm opneemt.Gelijk geschreven is in uw CSS stijl?Het is eenvoudig!
lichaam
{
achtergrond: url (Images / Picture.jpg ')
achtergrond-size: 100%;/ * Dit bericht is geschikt voor de meeste moderne browsers * /
}
Dus we bedacht hoe te maken van de foto achtergrond naar html op het scherm.Er is een methode van de opname in het bestand index.htm.Hoewel deze methode en verouderd, maar voor beginners moet kennen en begrijpen.De tag (hoofd) (stijl) div {background-size: dekken;} (/ Style) (/ head), deze plaat betekent dat we wijzen een speciale eenheid voor de achtergrond, die over de gehele breedte van het venster wordt gepositioneerd.We hebben twee manieren om de site achtergrond foto html te maken beschouwd, is het uitgerekt tot de volledige breedte van het scherm in een van de moderne browsers.
Hoe een vaste achtergrond
maken Als u besluit om het beeld van de toekomst van de website gebruiken als achtergrond, dan moet je gewoon weten hoe het vast te maken, zodat het niet te rekken in de lengte en niet de esthetische uitstraling niet bederven.Gewoon met behulp van HTML-code om een kleine toevoeging te registreren.Je nodig hebt om het bestand style.css om een zin toe te voegen na de achtergrond: url (Images / Picture.jpg ") vastgesteld;of in plaats daarvan toegevoegd na de puntkomma aparte lijn - position: fixed.Zo zal je behang worden vastgesteld.Tijdens het scrollen een content site, zult u zien dat de tekstregels bewegen, maar de achtergrond blijft op zijn plaats.Dus je hebt geleerd hoe je html om de achtergrondafbeelding te maken, op verschillende manieren.
werken met tabellen in HTML
Veel onervaren webontwikkelaars, geconfronteerd met tafels en eenheden vaak niet begrijpen hoe naar html om de afbeelding de tafel achtergrond te maken.Net als alle andere teams HTML en CSS-stijlen, de taal van het web programmeren is heel simpel.De oplossing voor dit probleem is om een paar regels code te schrijven.Je moet al weten dat het schrijven van een tabel respectievelijk rijen en kolommen, zoals aangegeven door de markeringen (tr) en (td).Om de achtergrond van de tafel in de vorm van beelden maken, is het noodzakelijk om aan de tag (tabel), (tr) of (td) een eenvoudige uitdrukking met verwijzing naar afbeelding: achtergrond = URL van het beeld.Voor de duidelijkheid geven we een paar voorbeelden.
tafels met achtergrondafbeelding plaats: HTML voorbeelden
Teken een 2x3 tafel en maken het de achtergrond afbeelding die is opgeslagen in de map "Afbeeldingen": (tabelachtergrond = "Images / Picture.jpg") (tr) (td)1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabel).Zodat onze tafel zal worden opgesteld in de achtergrond van de foto.
Trek nu dezelfde plaat maten 2x3, maar plaatst u een afbeelding in een kolom nummer 1, 4, 5 en 6 (tabel) (tr) (td achtergrond = "Images / Picture.jpg") 1 (/ td)(td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td achtergrond = "Images / Picture.jpg") 4 (/ td) (td achtergrond = "Beelden / Picture.jpg") 5 (/ td) (td achtergrond =" Images / Picture.jpg ") 6 (/ td) (/ tr) (/ tabel).Na het bekijken kan zien dat de achtergrond verschijnt alleen in die cellen, waarin we hebben geregistreerd, maar niet de hele tabel.
Cross-browser website
Er is zoiets als een cross-browser compatibiliteit web bron.Dit betekent dat de pagina's van de website evengoed worden in verschillende soorten en uitvoeringen van browsers.Het moet HTML code en CSS om de stijl die door browsers aan te passen.Bovendien is in het moderne tijdperk van smart phones, veel web-ontwikkelaars proberen om sites die zijn aangepast en een mobiele versie van een computer en een look te creëren.
