Lage ditt eget faste vannmerke i bakgrunnen

click fraud protection

Hvis du er utforme et nettsted, kan du være interessert i å lære å lage et fast bakgrunnsbilde eller vannmerke på en webside. Dette er en vanlig designbehandling som har vært populær online i ganske lang tid. Det er en praktisk effekt å ha i nettdesignposen din med triks.

Hvis du ikke har gjort dette før eller har prøvd det tidligere uten hell, kan prosessen virke skremmende, men det er faktisk ikke veldig vanskelig i det hele tatt. Med denne korte opplæringen får du informasjonen du trenger for å lære teknikken i løpet av få minutter ved hjelp av CSS.

Starter

Bakgrunnsbilder eller vannmerker (som egentlig bare er veldig lyse bakgrunnsbilder) har en historie innen trykt design. Dokumenter har lenge inneholdt vannmerker på dem for å forhindre at de kopieres. I tillegg bruker mange flyers og brosjyrer store bakgrunnsbilder som en del av utformingen av det trykte stykket. Nettdesign har lenge lånt stiler fra trykk, og bakgrunnsbilder er en av disse lånte stilene.

Disse store bakgrunnsbildene er enkle å lage ved hjelp av følgende tre CSS-stil eiendommer:

instagram viewer
  • bakgrunnsbilde
  • bakgrunn-gjenta
  • bakgrunn-vedlegg
  • bakgrunnsstørrelse

Bakgrunnsbilde

Du vil bruke bakgrunnsbilde for å definere bildet som skal brukes som vannmerke. Denne stilen bruker ganske enkelt en filsti for å laste inn et bilde du har på nettstedet ditt, sannsynligvis i en katalog som heter Bilder.

bakgrunnsbilde: url (/images/page-background.jpg);

Det er viktig at selve bildet er lettere eller mer gjennomsiktig enn et normalt bilde. Dette vil skape at "vannmerke"utseende der et halvt gjennomsiktig bilde ligger bak teksten, grafikken og andre hovedelementer på websiden. Uten dette trinnet vil bakgrunnsbildet konkurrere med informasjonen på siden din og gjøre det vanskelig å lese.

Du kan justere bakgrunnsbildet i ethvert redigeringsprogram som Adobe Photoshop.

Bakgrunn-Gjenta

Bakgrunn-gjenta egenskapen kommer neste. Hvis du vil at bildet ditt skal være et stort grafisk vannmerke-stil, vil du bruke denne egenskapen til at bildet bare vises én gang.

bakgrunn-gjenta: nei-gjenta;

Uten nei-gjenta egenskap, er standard at bildet gjentar seg igjen og igjen på siden. Dette er uønsket i de fleste moderne nettsidedesigner, så denne stilen bør betraktes som viktig i din CSS.

Bakgrunnsvedlegg

Bakgrunnsvedlegg er en egenskap som mange webdesignere glemmer. Ved å bruke den holder bakgrunnsbildet ditt på plass når du bruker fikset eiendom. Det er det som gjør det bildet til et vannmerke som er festet på siden.

Standardverdien for denne egenskapen er bla. Hvis du ikke angir en vedleggsverdi for bakgrunnen, vil bakgrunnen bla sammen med resten av siden.

bakgrunn-vedlegg: fast;

Bakgrunn-størrelse

Bakgrunnsstørrelse er en nyere CSS-egenskap. Den lar deg angi størrelsen på en bakgrunn basert på visningsfeltet den vises i. Dette er veldig nyttig for responsive nettsteder som vises i forskjellige størrelser på forskjellige enheter.

bakgrunnsstørrelse: omslag;

To nyttige verdier du kan bruke for denne egenskapen inkluderer:

  • Dekke - Skalerer bakgrunnen slik at enten full bredde eller full høyde vises. Dette betyr at noen deler av bildet ikke vises på skjermen, men at hele området blir dekket.
  • Inneholde - Skaler bildet slik at hele bredden og høyden vises i området som styles. Bildet er ikke avskåret, men ulempen er at deler av området kanskje ikke dekkes av bildet.

Legge til CSS på siden din

Etter at du har forstått egenskapene ovenfor og deres verdier, kan du legge til disse stilene på nettstedet ditt.

Legg til følgende i HEAD på nettsiden din hvis du lager et ensidig nettsted. Legg det til CSS-stilene til et eksternt stilark hvis du bygger et nettsted med flere sider og vil dra nytte av kraften til et eksternt ark.

Endre URL-en til bakgrunnsbildet slik at det samsvarer med det spesifikke filnavnet og filbanen som er relevant for nettstedet ditt. Gjør eventuelle andre endringer som også passer til designet ditt, så får du et vannmerke.

Du kan også spesifisere posisjon

Hvis du vil plassere vannmerket på et bestemt sted på websiden din, kan du gjøre det også. For eksempel vil du kanskje ha vannmerket på midten av siden eller kanskje i nedre hjørne, i motsetning til det øverste hjørnet, som er standard.

For å gjøre dette, legg til bakgrunnsposisjonsegenskapen i stilen din. Dette vil plassere bildet på det nøyaktige stedet du vil at det skal vises. Du kan bruke pikselverdier, prosenter eller justeringer for å oppnå den posisjonseffekten.

bakgrunn-posisjon: sentrum;
instagram story viewer