Skift baggrundsmønstre med Subtle Patterns

19. juni 2011 af Morten    Ingen kommentarer    Udgivet i Design

At finde en ordentlig baggrund som passer perfekt til ens hjemmeside kan i mange tilfælde være en hård nød at knække og man må også se sig begrænset af forskellige andre faktorer. F.eks. beskærer visse browsere indholdet såfremt man uploader og indsætter et billede, der er mindre end browservinduet, ligesom et for stort billede vil aktivere browserens scroll-funktion.

Et nyt websted, som dukkede op i april måned, gør det dog nemt at finde en flot designet baggrund som kan tilpasses stilen på ens egen webside. Tjenesten hedder Subtle Patterns, som groft oversat fra engelsk betyder sofistikerede mønstre. Den måske vigtigste faktor for de tilgængelige mønstre hos tjenesten er at de alle er såkaldt tileable. Med dette menes at ethvert billede kan gentages i en uendelighed, og derved står man ikke i en situation hvor baggrunden enten er for lille eller for stor, da det altsammen kan ordnes via et CSS stylesheet.

Hos tjenesten kan brugere selv uploade deres mønstre, som gennemgår en kvalitetskontrol hvad design angår, før de uploades og bliver tilgængelige på siden. På hjemmesiden er det også muligt, via JavaScript, at se previews af de forskellige mønstre så man kan få en nogenlunde idé om hvordan mønstre vil tage sig ud på ens egen hjemmeside. Udover at man kan downloade de forskellige mønstre som .png filer er de også tilgængelige som .pat filer, der kan hentes direkte ind i Adobe Photoshop og anvendes som patterns.

Alle mønstre er licenseret under Creative Commons Attribution 3.0 Unported og kan bruges frit i både personlige og kommercielle projekter.

Som en lille hjælp til at indsætte et af mønstrene i en tileable udgave, kan du kopiere nedenstående kode og indsætte denne i en CSS-fil. Husk dog at ændre sti, alt efter hvor du har uploadet filen, samt filnavn.

body
{
background-image:url('sti/billede.png');
background-repeat:repeat-y;
}

Husk også at komprimere billedet før du uploader det, så sparer du lidt loadtid.