Hur man Ă€ndrar sin design – BakgrundsfĂ€rgen
Eftersom sĂ„ mĂ„nga vill veta hur man Ă€ndrar sin design tĂ€nker jag nu stegvis göra en guide. Det Ă€r sĂ„ mĂ„nga delar som innefattar och jag vill lĂ€ra ut er allt jag kan. DĂ€rför kan ni nu hitta detta under ”design tips”.
Det första jag nÄgonsin ville lÀra mig dÄ jag skulle designa om min blogg var hur man Àndrade bakgrundsfÀrg, det Àr en del som ger ett stort intryck pÄ andra. Varesig det Àr en fÀrg eller en bild man valt.
body {
margin: 0px;
padding: 0px;
background: #fff;
}
Om ni vill Ă€ndra bakgrunden sĂ„ ska ni leta efter ”body” i stilmallen, det Ă€r den första delen som vi kan se. Margin och padding * vill ni ha pĂ„ 0 i detta sammanhang eftersom vi idag inte ska göra nĂ„got avancerat med det.
Det vi ska fokusera pĂ„ Ă€r sjĂ€lva fĂ€rgen, ”background” eller ”background-color” Ă€r det man skall Ă€ndra pĂ„. FĂ€rgerna skriver man oftast i hexadecimala koder (#FFFFFF = vit), dvs att man skriver fĂ€rgerna i 6 tecken i antingen bokstĂ€ver och/eller siffror.
Vill du istÀllet ha en bild som bakgrund kan du istÀllet skriva in.
background: url(bildens url-adress);
”URL” mĂ„ste anges för att webblĂ€saren ska förstĂ„ att det Ă€r en url-adress som skall lĂ€sas av och dĂ€refter skriver man in sin url-adress (bildens adress, du hittar den i adressfĂ€ltet dĂ„ du har endast bilden uppe) innanför tvĂ„ paranteser ( sĂ„hĂ€r ), sedan skall man alltid avsluta med ett semikolon ; för att webblĂ€saren skall veta att denna rad Ă€r slut.
Ănnu Ă€r vi inte klara, ibland kan bilder bli vĂ€ldigt stora sĂ„ för att spara tid till att ladda upp sidan sĂ„ kan vi istĂ€llet göra smĂ„ bilder som repeteras.
background: url(bildens url); background-repeat: repeat-x eller repeat-y;
Repeat-x – repeteras bilden horisontellt, dvs pĂ„ ”bredden”
Repeat-y – repeteras bilden vertikalt, dvs pĂ„ höjden.
Detta Àr ett jÀttebra tips som man skall ha i bakhuvudet, att anvÀnda sÄ smÄ bilder som möjligt och istÀllet repetera dem.
Exempel pÄ repetition av bild:
Ni ser den lilla bilden till vĂ€nster kan repeteras pĂ„ ett vis sĂ„ att bilden egentligen ser ut att vara stor. Vill man göra pĂ„ detta vis pĂ„ exempelbilden sĂ„ repteras den som ni ser horisontellt och dĂ„ anvĂ€nder man ”repeat-x”.
* Vad margin och padding Àr kan ni se hÀr [lÀnk].
