Om du är utforma en webbplats, kanske du är intresserad av att lära dig att skapa en fast bakgrundsbild eller vattenstämpel på en webbsida. Detta är en vanlig designbehandling som har varit populär online under ganska lång tid. Det är en praktisk effekt att ha i din webbdesignpåse med tricks.
Om du inte har gjort det tidigare eller har provat det tidigare utan tur kan processen verka skrämmande, men det är faktiskt inte särskilt svårt alls. Med den här korta handledningen får du den information du behöver för att lära dig tekniken på några minuter med CSS.
Komma igång
Bakgrundsbilder eller vattenstämplar (som egentligen bara är mycket ljusa bakgrundsbilder) har en historia inom tryckt design. Dokument har länge inkluderat vattenstämplar på dem för att förhindra att de kopieras. Dessutom använder många flygblad och broschyrer stora bakgrundsbilder som en del av designen av det tryckta stycket. Webbdesign har länge lånat stilar från tryck och bakgrundsbilder är en av dessa lånade stilar.
Dessa stora bakgrundsbilder är enkla att skapa med följande tre CSS-stil egenskaper:
- bakgrundsbild
- bakgrund-upprepa
- bakgrundsbilaga
- bakgrundsstorlek
Bakgrundsbild
Du kommer att använda bakgrundsbild för att definiera bilden som ska användas som vattenstämpel. Denna stil använder helt enkelt en filsökväg för att ladda en bild som du har på din webbplats, troligen i en katalog som heter bilder.
bakgrundsbild: url (/images/page-background.jpg);
Det är viktigt att själva bilden är ljusare eller mer transparent än en normal bild. Detta kommer att skapa det "vattenstämpel"utseende där en halvgenomskinlig bild ligger bakom texten, grafiken och andra huvudelement på webbsidan. Utan detta steg kommer bakgrundsbilden att konkurrera med informationen på din sida och göra det svårt att läsa.
Du kan justera bakgrundsbilden i vilket redigeringsprogram som helst Adobe Photoshop.
Bakgrund-upprepa
Egenskapen bakgrundsupprepning kommer därefter. Om du vill att din bild ska vara en stor vattenstämpel-grafik, skulle du använda den här egenskapen för att bilden endast ska visas en gång.
bakgrundsupprepning: ingen upprepning;
Utan nej-upprepa egenskap är standard att bilden upprepas om och om igen på sidan. Detta är inte önskvärt i de flesta moderna webbdesigner, så den här stilen bör anses vara väsentlig i din CSS.
Bakgrundsbilaga
Bakgrundsbilaga är en egenskap som många webbdesigners glömmer bort. Att använda den håller din bakgrundsbild fast på plats när du använder fast fast egendom. Det är det som gör den bilden till en vattenstämpel som är fixerad på sidan.
Standardvärdet för den här egenskapen är skrolla. Om du inte anger ett bakgrundsbilagevärde rullas bakgrunden tillsammans med resten av sidan.
bakgrundsbilaga: fast;
Bakgrundsstorlek
Bakgrundsstorlek är en nyare CSS-egenskap. Den låter dig ställa in storleken på en bakgrund baserat på visningsområdet den visas i. Detta är mycket användbart för lyhörda webbplatser som visas i olika storlekar på olika enheter.
bakgrundsstorlek: omslag;
Två användbara värden som du kan använda för den här egenskapen inkluderar:
- Omslag - Skalar bakgrunden så att antingen hela bredden eller hela höjden visas. Det betyder att vissa delar av bilden kanske inte visas på skärmen utan att hela området täcks.
- Innehålla - Skalar bilden så att hela bredden och höjden visas i det område som utformas. Bilden klipps inte av, men nackdelen är att delar av området kanske inte täcks av bilden.
Lägga till CSS på din sida
När du förstår egenskaperna ovan och deras värden kan du lägga till dessa stilar på din webbplats.
Lägg till följande i HEAD på din webbsida om du skapar en sida med en sida. Lägg till det i CSS-format för ett externt formatmall om du bygger en webbplats med flera sidor och vill utnyttja kraften från ett externt ark.
Ändra webbadressen till din bakgrundsbild så att den matchar det specifika filnamnet och filvägen som är relevant för din webbplats. Gör eventuella andra ändringar som passar din design också så får du en vattenstämpel.
Du kan också ange position
Om du vill placera vattenstämpeln på en viss plats på din webbsida kan du också göra det. Du kanske till exempel vill ha vattenstämpeln mitt på sidan eller kanske i det nedre hörnet, i motsats till det övre hörnet, vilket är standard.
För att göra detta, lägg till bakgrundspositionsegenskapen i din stil. Detta kommer att placera bilden på den exakta platsen som du vill att den ska visas. Du kan använda pixelvärden, procentsatser eller justeringar för att uppnå den positioneringseffekten.
bakgrundsposition: centrum;