Doing háttérképet üzeneteket blogger (blogspot)

Így a háttérképet hozzászólások Blogger (Blogspot)

Néha, ha csinál egy blogbejegyzést, azt akarom, hogy valami szokatlan, ami nem valósítható meg egyszerű stilisztikai tulajdonságait színes, árnyékok, színátmenetek, vagy akár az összes együtt. Ilyen esetekben mindig siet a jó régi kép. És most, továbbra is a témája a változás Blogger sablon segítségével CSS, azt akarom mondani, hogy hogyan lehet blogbejegyzések háttérkép.
Természetesen nincs semmi ijesztő az, hogy egy képet, mint a háttérben a böjt. De ebben a cikkben szeretnék figyelni, hogy néhány fontos pontot, ha a teljes képet, és a végrehajtását egy ilyen terv a Blogger. mivel bizonyos nehézségek ezen.
Lehetőségek, ebben az esetben nem sok, de inkább csak kettő. De kezdjük azzal, hogy a szokásos sablon már csak azt kell szelektor tőlünk csak hozzá kell adni nekik, és / vagy módosíthatja a meglévő tulajdonságait. ezek mind után a következő sort:

Most a lehetőségeket.

1. ábra Háttér éhgyomri (ismétlések nélkül)

1. A legegyszerűbb lehetőség - ahelyett, hogy a szín a linket egy képet, az eredmény az 1. ábrán látható.
Meg kell jegyezni, hogy a háttérképet, hogy magába zárja csak egy üzenet - cím nélkül, és „pince”. Továbbá, ebben az esetben a kiválasztott képet a „töredezett” élek, ami nem biztosít ismételni a függőleges vagy vízszintes, hogy a CSS a bejegyzést meg kell adnia értékeket a tulajdonságok magassága és szélessége megegyezik az értékek a kiválasztott képre, és adjunk hozzá, ha szükséges függőleges görgetősáv.
De akkor vedd fel, vagy hogy (vágott) saját képet, hogy a felső része volt, mint a folytatása az alsó, és válassza ki a hátteret függőleges ismétlés, akkor csak a kívánt szélességben fogják kérni, hogy az üzenet test, egyenlő a kép szélességét.
Ennek a végrehajtására lehetőséget .post test választó (ez a kód az alapértelmezett sablon), akkor meg kell adni a háttérben tulajdonságokkal, és mások. CSS kód ebben az esetben a következő lesz:

post-test font-size: 110%;
line-height: 1.4;
helyzet: a relatív;
background: url no-repeat (/image/post-bacground-600x1000.png.) / * A háttérkép megismétlése nélkül * /
magasság: 1000px; / * Üzenet testmagasság - magassága megegyezik a kép * /
overflow-y: auto; / * A számos szöveges automatikusan hozzáadódik függőleges görgetéssel * /
szélesség: 600px; / * Szélessége a test utáni - egyezteti az adatokat, szélesség * /
>

Ne felejtsük el, hogy optimalizálja a képet a kép tömörítő program. Mielőtt ráöntjük a gazda vagy a blogján.

Ábra 2. Háttér fragmenseinek képek

h3.post-cím,
.bejegyzést
.post-footer padding: 0;
margin: 0;
/ *
jelzik az azonos értékű szélessége
az összes szükséges elem,
egyenlő a kép szélességét
* /
szélesség: 600px;
>
h3.post-cím background: url no-repeat (/image/post-header-600x138.png.)
magasság: 138px; / * A magasság az a kép magasságát szegmens * /
text-align: center;
>
.utáni background: url repeat-y (/image/post-body-600x517.png.) / * Háttér utáni egy adott függőleges ismétlés * /
magasság: 100%;
>
.post-footer background: url (/image/post-footer.png.) no-repeat;
magasság: 116px; / * A magasság az a kép magasságát szegmens * /
>
/ * Stílusok belsőépítészeti elemek * /
h3.post-cím szín: #fff;
>
.post-test / * padding, align utáni szöveget középre * /
margin-left: 120 képpont;
margin-right: 120 képpont;
width: auto;
>
.post-footer-line padding: 10px;
margin: 10px 120 képpont;
>

Ahhoz, hogy hosszú festeni, hogy mi történik, azt mutatja be vázlatosan:

Itt egy kép, hogy én a példában használt, lehet kísérletezni.
Kirpichi.JPG
Kirpichi.PNG

A cikk blokk méretek példaértékű és megfelelnek a képek méretét a példákban használt. Ezeket úgy kell kiválasztani függetlenül és külön-külön.

Ez valószínűleg csak annyit sikeres tervezési megoldások.