Hvordan man laver en fast Baggrund i CSS

January 30



Du kan oprette websider med mange stil egenskaber. Brug HTML og CSS (Cascading Style Sheets) kan du angive forskellige stil regler, der bestemmer, hvordan din webside indhold vil blive vist. Blandt stil egenskaber, du kan erklærer i CSS er baggrunden. Du kan indstille baggrunden egenskaber for elementer og for HTML-side som en helhed. En baggrund kan også indeholde et billede, der kan gentages for at udfylde den tilgængelige plads og eventuelt fastgjort således, at den ikke bevæger sig, når brugeren ruller siden.

Instruktioner

1 Opret din webside. Hvis du ikke allerede har en webside, bygget brug den følgende prøve struktur, som indeholder et link til et eksternt typografiark:

<Html>

<Head>

<Link rel = "stylesheet" type = "text / css" href = "backstyle.css" />

</ Head>

<Body>

<Div> Her er sidens indhold </ div>

</ Body>

</ Html>

Siden indeholder en enkelt "div" element udelukkende for at demonstrere. Hvis du ønsker at give din CSS-fil et andet navn, ændre "link" element "href" attribut, der passer til det navn, du vælger.

2 Forbered dit baggrundsbillede. Hvis du allerede har en billedfil, du ønsker at bruge i baggrunden på din webside, uploade det til din webserver. Hvis billedfilen er stor i størrelsen, kan du ønsker at optimere den til at reducere mængden af ​​tid, det tager at downloade over internettet, når folk ser din side. Hvis du henter et billede til brug som din side baggrund eller skaber det ved hjælp af et grafisk design program er dette også en tilrådeligt trin. Du kan reducere filstørrelsen på et billede ved at vælge indstillinger for billedkvaliteten, når du gemmer det i et program som Photoshop, Paint.NET eller The GIMP (GNU Image Manipulation Program).

3 Opret din CSS kode ved at åbne en ny fil i en teksteditor, gemme det med navnet "backstyle.css" eller et andet navn, du foretrækker, huske den "href" attribut i din HTML "link" element skal matche dette navn. Indtast følgende kode indstille din valgte billede som baggrund:

body {baggrund: # 000000 URL ( "billeder / bgpic.jpg");}

Denne kode antager din billedfil vil blive gemt i en mappe med navnet "billeder", som er gemt i samme mappe som den webside selv. Ret koden, der passer til navnet og placeringen af ​​din billedfil hvis det er nødvendigt. Koden viser også, at ethvert område ikke er dækket af baggrundsbilledet skal være farvet sort.

4 Alter din CSS kode for at diktere, om dit baggrundsbillede gentages eller ej. Følgende kode viser, at billedet vil blive gentaget på "y" akse, men ikke på "x" akse:

baggrund: # 000000 URL ( "images / bgpic.jpg") repeat-y;

Andre valgfrie værdier for baggrund gentagelse omfatte "repeat-x" for at gentage på "x" aksen og "no-repeat" til at vise billedet én gang. Hvis du ikke medtager en værdi for baggrunden gentage ejendom, standard er at for det billede, der skal gentages langs begge akser.

5 Alter din CSS kode for at fastsætte baggrundsbilledet. Følgende udvidede kode sætter alle baggrunden egenskaber i en enkelt erklæring, herunder den faste indstilling:

baggrund: # 000000 URL ( "images / bgpic.jpg") repeat-y fast;

Tilføjelse ordet "faste" angiver, at når siden rulles af brugeren baggrundsbilledet vil ikke rulle sammen med det, men vil forblive i den samme position. Gem dine filer, overføre dem til din server og gå til dem for at teste deres udseende.

TIPS

  • En effektiv billede baggrund kan skabe et stilfuldt look på en side uden behov for detaljerede designarbejde grafik.
  • En gentagen billede baggrund kan se forvirrende afhængigt af billedet pågældende.

relaterede artikler