CSS : Szöveg/kép mögött kép (háttér) |
Szöveg/kép mögött kép (háttér)
Demó:
Ide jön a tartalom, ami lehet bármilyen szöveg, sőt akár képet is illeszthetsz be! Íme pár kép mutatóba :)
|
Két kódra van szükségünk, az egyik egy táblázat, a másik pedig egy CSS.
Táblázat:
Egy cellára van szükségünk, aminek a kódját annak a modulnak a forráskódjába kell beilleszteni, amelyikben háttérrel szeretnénk megjeleníteni a tartalmat. A kód beillesztése után nyugodtan visszatérhetünk rendes szerkesztői nézetbe, s a szokásos módon írhatjuk a táblázatba a szöveget, illeszthetjük be a képeket. Kód:
<table>
<tbody>
<tr>
<td class="picttext">
<p>Ide jön a tartalom, ami lehet bármilyen szöveg, sőt akár képet is illeszthetsz be!</p>
</td>
</tr>
</tbody>
</table>
CSS:
A CSS kóddal határozhatjuk meg a táblázatunk kinézetét, itt kell megadnunk, hogy milyen kép legyen a tartalom háttere. A legjobb, ha ismétlődő képet adunk meg, de akár sima képet is megadhatunk. Utóbbi esetben mindenképpen legyen egyező a táblázat mérete a kép méreteivel, illetve ügyeljünk arra, hogy a tartalom, ne legyen több annál, amit a kép mérete megenged. A kódot a legideálisabb jobb/bal oldalon lévő egyszerű modulba illeszteni, így ha a táblázatot töb helyen is használod, mindig ugyanúgy fog kinézni. A kódban találsz magyarázatot is, ezt nem kell törölnöd, a kód így is működik. Kód:
<style type="text/css">
td.picttext
{width: 400px; /* táblázat szélessége */
height: 140px; /* táblázat magassága */
background-image: url("KÉP URL-je"); /* a háttér url címe, az idézőjelek közé írd */
font-size: 11px; /* betűméret */
font-color: #000000} /* betűszín */
</style>
Természetesen több tulajdonság is megadható a CSS-ben (betűtípus, keret stb.).
Értelemszerűen többször beillesztheted egy modulba a táblázatot, így igen vonzóvá teheted a frissítések kiírását. Pl.:
tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom!
|
tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom!
|
tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom!
|
|