Slike za ozadje telesa so narejene enostavno

Lepa lastnost, ki jo boste našli na mnogih spletnih mestih, je, da se zdi, da osrednje področje vsebine prekriva stran s senco za njo. To je pravzaprav dokaj preprost način, da vaš blog lepo izgleda (ali druga spletna stran) z eno samo sliko v ozadju.

Kako je to storjeno?

1. Ugotovite, kako široka je vaša vsebina. Primer: 750 slikovnih pik.
2. Sliko v aplikaciji za ilustracije (uporabljam Illustrator) zgradite širše od področja vsebine. Primer: 800 slikovnih pik.
3. Nastavite ozadje slike na ozadje, ki ga želite imeti na vsaki strani bloga.
4. Nad ozadjem dodajte belo območje.
5. Nanesite senco na belo območje, ki se iztisne z obeh strani območja.
6. Širino območja obrezovanja nastavite za 1 slikovno piko v višino. Tako bo slika za prenos lepa in kompaktna za hitro upodabljanje.
7. Iznesite sliko.

Evo, kako sem ga zgradil s pomočjo Illustratorja (upoštevajte, da imam območje obrezovanja veliko višje ... to je samo zato, da vidite, kaj počnem):

Tu je primer, kako bi bil izhod videti s sliko v ozadju:

Tukaj je opis, kako sliko uporabiti s pomočjo oznake vašega sloga telesa v vašem CSS Datoteka.

ozadje: # B2B2B2 url ('images / bg.gif') center za ponavljanje;

Tu je razčlenjevanje oznake sloga ozadja:

• # B2B2B2 - nastavi splošno barvo ozadja strani. V tem primeru je siva, da se ujema s sivo na sliki v ozadju.
• url ('images / bg.gif') - nastavi sliko v ozadju, ki jo želite uporabiti.
• repeat-y - nastavi sliko za ponovitev na osi y. Slika v ozadju se bo torej ponovila od vrha do dna strani.
• center - nastavi sliko na sredino strani.

Lepo in enostavno ... ena slika, ena slog oznaka!