Utforming av nettstedet: CSS bakgrunner

Utforming av et nettsted er like (om ikke mer) viktigere enn dens funksjonalitet og brukervennlighet. Det er grunnleggende for et vellykket nettsted for å være sterke visuelt samt foundationally.

La oss ta et kort øyeblikk for å diskutere det sixtinske kapell for å illustrere mitt poeng. Kapellet selv ble bygget for å vare og er foundationally lyd. Imidlertid er kapellet ikke kjent bare på grunn av dens funksjonaliteten. Michelangelos beryktede maleri hviler på kapellet i taket og forlater mest i ærefrykt for kunstnerisk skjønnhet. Resultatet av denne kombinasjonen er ganske enkelt en av verdens største kapellene.

Websider kan eksistere stole på enten tilstedeværelse av grand design eller fantastisk kode, men for at nettsteder for å trives er det viktig å kombinere de to.

I dette innlegget, vil jeg gjerne ta en titt på den viktigste delen av design og koding av ligning med CSS, mer spesifisere CSS bakgrunnen Property.

W3Schools definerer CSS Bakgrunn Property som: "en kortform eiendom for å sette alle bakgrunn egenskaper i en erklæring." Merk at de fleste verdiene funnet i bakgrunnen eiendommen kan brukes som egen eiendom. Eksemplene nedenfor vil bare være med stenografi versjonen av Bakgrunn Property. En ulempe med å bruke bare stenografi er at det ikke er bra for feilretting eller oppdager stavefeil

La oss begynne med å se på de mest grunnleggende verdi, en som skal komme først på alle bakgrunn eiendom: Color.

body {
background: #000000;
}

Ved hjelp av enkle fargeverdi, kan en bakgrunn være veldig ren og enkel. Dette enkelhet kan være nyttig for mange nettsteder. Husk at god design teknikk betyr ikke nødvendigvis prangende bilder og Web 2.0 bevels overalt. I tillegg til fargene som brukes i bakgrunnen eiendommen, kan du også bruke verdien av gjennomsiktig. Den gjennomsiktige verdien brukes hovedsakelig på bakgrunn innenfor det området som på innsiden divs og bord og ikke vanlig på en kropp bakgrunn som finnes her.

Fargen Verdien skal alltid være et forankringspunkt i bakgrunnen din eiendom. Selv om du har et bilde i bakgrunnen din som spenner over 1000 + piksler, er du fortsatt kommer til å ønske å legge en farge verdi bak det slik at mens bakgrunnsbildet lastes brukeren ikke ser en sterk hvit bakgrunn på din fine mørke website.

Deretter kan diskutere en annen viktig bakgrunn verdi, spesielt i dagens web-verden, background-image.

body {
background: #000000 url(images/yourimage.jpg) repeat fixed top;
}

Bildene kan brukes i en rekke forskjellige måter, og i forbindelse med verdier som background-attachment, background-position, and background-repeat. Det er ingen ende på hva du kan gjøre for kroppen din bakgrunn. Selv om du kan legge et bilde inn i CSS uten å legge disse andre verdier det er avgjørende at de fire verdiene fortsatt sammen.

Eksemplene ovenfor og nedenfor viser bare noen få måter du kan bruke background-image verdi ved hjelp av background-repeat verdi. Enkelt mønstrede bakgrunner med background-repeat verdien satt til å gjenta er illustrert ovenfor. Les mer kompliserte versjoner av verdien satt til gjenta-x kan sees nedenfor. Sentrert bilder kan oppnås ved å sette verdien til no-repeat like fin mørk nettside, den background-repeat og background-image støttes av bakgrunnen-posisjon og background-attachment verdier hjelp til å fremheve dine nettsteder stil.