Handige tips

Hoe u snel en gemakkelijk een achtergrondafbeelding maakt met HTML

Pin
Send
Share
Send
Send


Elke kamer ziet er veel beter uit als deze bedekt is met duur Perzisch tapijt. Dus wat is het ergste van uw site? Misschien is het tijd om zijn vloer te 'bedekken' met een duur, elegant, handgemaakt paleis. We zullen in meer detail onderzoeken hoe we een achtergrond voor de site kunnen maken:

Afbeelding selectie

Ik zou willen beginnen met het kiezen van een afbeelding. Om de achtergrond er op de pagina egaler en mooier uit te laten zien, en u zich niet druk hoefde te maken over de afmetingen en uitlijning. Ik stel voor onmiddellijk op zoek te gaan naar naadloze textuur. Wat is dit

Helaas is het niet mogelijk om een ​​afbeelding in html naar volledig scherm uit te rekken. De foto wordt op volledig formaat gebruikt. Als de afbeelding klein is, effent deze het hele gebied, zoals in de onderstaande schermafbeelding. Om de afbeelding uit te rekken, moet u een extra CSS-document maken, zonder dit werkt het niet.

Hoewel, je hebt de mogelijkheid om het systeem te omzeilen. Gebruik hiervoor Photoshop en verklein de afbeelding naar de breedte van het scherm (1280x720). Hoewel in dit geval de afbeelding bij het naar beneden scrollen een andere zal vervangen.

Een veel betere optie als u geen CSS wilt gebruiken, is om naadloze texturen te gebruiken. Ze zien geen gewrichten. Ze zijn als behang of moderne tegels in ontwerp. De ene vervangt de andere en er zijn geen gewrichten zichtbaar.

Als u geïnteresseerd bent in gratis afbeeldingen en het ontbreken van juridische consequenties voor het gebruik ervan, raad ik aan om op de site te zoeken Pixabay.com.

Laten we nu met de code werken. Ik moet meteen zeggen dat we nu met HTML werken, dat wil zeggen dat we de afbeelding niet voor de hele site wijzigen, maar alleen voor een specifieke pagina waarvoor de code wordt geschreven. Als u geïnteresseerd bent in wijzigingen in de hele bron, moet u code maken met css, maar daarover later meer.

Dus je kunt in Kladblok werken, ik heb liever NotePad ++. Het is veel handiger om erin te werken: de code wordt voor u toegevoegd, de tags worden gemarkeerd. Het programma is gratis en weegt ongeveer 3 MB. Sterk aanbevelen, vooral als je een beginner bent.

Dus in de tag lichaam u moet een kenmerk toevoegen achtergrond en geef een link naar de afbeelding op, waar de foto van wordt genomen. Zo ziet het eruit in het programma.

U kunt eenvoudig het notitieblok openen en deze code kopiëren. Plaats tussen aanhalingstekens een link naar de gewenste afbeelding.

Afbeelding als pagina-achtergrond - HTML

Overweeg eerst de methode om de achtergrondafbeelding op de site in te stellen met behulp van het kenmerk achtergrond label lichaam:

Net als in het bovenstaande voorbeeld wordt het aanbevolen om naast de afbeelding de achtergrondkleur aan te geven (deze wordt op de site weergegeven wanneer de pagina wordt geladen), die wordt gecombineerd met de achtergrondafbeelding en een contrast vormt met de tekst op de site. Als u bijvoorbeeld de witte kleur van de tekst op de site gebruikt, moet u een donkere achtergrondkleur opgeven en een donkere achtergrondafbeelding instellen. In dit geval is de tekst gemakkelijk te lezen.

Let op: Het wordt aanbevolen om de achtergrondafbeelding en achtergrondkleur niet in te stellen met HTML, maar met CSS. In dit geval is de code geldig en correcter.

Afbeelding als pagina-achtergrond - CSS

In CSS kunnen de achtergrondkleur en achtergrondafbeelding met één eigenschap worden ingesteld. achtergrond:

Hier met behulp van de eigenschap background-attachment pagina-achtergrond is vast en het gebruik van de eigenschap background-repeat horizontale beeldherhaling is ingesteld. Maar het is de moeite waard om te overwegen dat de achtergrondafbeelding goed langs de randen moet "steken".

Als u de achtergrondafbeelding wilt uitrekken tot de volledige grootte van het browservenster, gebruikt u de eigenschap achtergrondformaat: 100%,

In de Nubex-sitebouwer kunt u voor elke site een grote afbeelding als achtergrond gebruiken en repareren.

Achtergrond voor de site

Het gebeurt dat het oude site-ontwerp al saai is. En ik wil iets nieuws en smakelijks. En het nieuwe ontwerp zal zo zijn als je het zelf kookt.

Maar om het hele ontwerp van de bron volledig te veranderen, is een ondankbaar iets. En niet iedereen heeft zijn handen geslepen onder dit bedrijf. Daarom is het het gemakkelijkst om de oude sjabloon te vernieuwen door de achtergrondkleur van de resource of de achtergrondafbeelding te wijzigen.

Er zijn verschillende manieren om de achtergrond op de site te wijzigen. Gebruik hiervoor de mogelijkheden van CSS of html. Maar veel van de eigenschappen voor het werken met de achtergrond hebben dezelfde naam en toepassingsmethode in deze webtechnologieën.

HTML-basisbeginselen

U kunt verschillende elementen als achtergrond gebruiken:

  • kleur
  • Achtergrondafbeelding
  • Textuur afbeelding.

We zullen elk van hen in meer detail behandelen.

Om de achtergrondkleur voor de site in te stellen, wordt de eigenschap background-color van de stijlattribuutstijl gebruikt. Dat wil zeggen, om de primaire kleur voor een webpagina in te stellen, moet u deze in de tag registreren. Bijvoorbeeld:

Html ondersteunt slechts 16 trefwoorden voor kleur. Hier zijn een paar van hen: wit, rood, blauw, zwart, geel en anderen.

Om de achtergrond voor de html-site in te stellen, is het daarom beter om het hexadecimale formaat of RGB te gebruiken.

Naast kleurselectie zijn er ook andere instellingen beschikbaar. Als de eigenschap background-color is ingesteld op transparant, wordt de achtergrond van de pagina transparant. Deze waarde wordt standaard aan deze eigenschap toegewezen.

Overweeg nu de mogelijkheden van de hyperteksttaal om de achtergrond voor de site in te stellen. Dit kan met behulp van de eigenschap background-image.

Stel dat we een site over poëzie ontwikkelen en dat we een Pegasus-afbeelding als substraat moeten gebruiken. Het gevleugelde paard zal de vrijheid van de creatieve gedachte van de dichter belichamen!

  • repeat-x - herhaal de achtergrondafbeelding horizontaal,
  • herhaal-y - verticaal,
  • herhaal - op beide assen,
  • niet herhalen - herhalen is verboden.

Onder de genoemde opties zijn we geïnteresseerd in de laatste. Voordat we de achtergrond van de site wijzigen, gebruiken we deze in onze code:

  • Trefwoord (boven, onder, midden, links, rechts),
  • Procent - het aftellen begint in de linkerbovenhoek,
  • In maateenheden (pixels).

We gebruiken de eenvoudigste centreeroptie:

Het komt voor dat u de positie van de afbeelding moet corrigeren tijdens het scrollen. Gebruik daarom, voordat u een afbeelding van de achtergrond van de site maakt, de speciale eigenschap voor achtergrondbijlage. De waarden die hij accepteert zijn:


  • scroll,
  • vast.

We hebben de laatste waarde nodig. Nu ziet de code van ons voorbeeld er als volgt uit: [/ HTML]

Weefsel site achtergrond

In het eerste voorbeeld hebben we voor de achtergrond een groot en prachtig woestijnlandschap gebruikt. Maar voor zo'n schoonheid moet je volledig betalen. Het gewicht van een afbeelding in hoge kwaliteit kan verschillende megabytes bereiken.

Dit bedrag heeft geen invloed op de laadsnelheid van de pagina van de browser met een snelle internetverbinding. Maar hoe zit het met mobiel internet, waarbij het downloaden van een paar "meters" veel tijd kost?

Al deze problemen worden opgelost met behulp van een textuurachtergrond. Het gebruikt een kleine afbeelding als textuurpatroon. Zelfs als het vele malen wordt herhaald, wordt de tekening slechts eenmaal geladen.

Ga naar Photoshop om een ​​donkere achtergrond voor de site te maken, maak een afbeelding in de vorm van een strook van 1200 pixels lang en 15 pixels breed. Pas vervolgens een eenvoudig zwart-wit verloop toe en verbind de resulterende textuur met de sitepagina:

Voor de duidelijkheid hebben we tekst toegevoegd en de kleur ingesteld met de eigenschap color. Dit is wat er gebeurde:

CSS-hulpmiddelen

Alle hierboven beschreven eigenschappen zijn ook van toepassing op cascading style sheets. Maak de css-site-achtergrond door de code te herschrijven voor een van onze vorige voorbeelden:

Het resultaat zal hetzelfde zijn.

Welnu, hier hebben we alle opties onderzocht om de achtergrond op de site te wijzigen. Nu blijft het alleen om een ​​tekening van het toekomstige tapijt te maken en deze op de pagina's van uw resource te verspreiden. Maar dit is al aan jou.

Bekijk de video: Hoe Maak Je Een Wordpress Website 2019 (Mei 2021).

Pin
Send
Share
Send
Send