Teorija

Elementa vai visas lapas fons
Lapas fonu var iestatīt, izvēloties grafisko zīmējumu un norādot kodā URL adresi. Iespējams norādīt arī veidu, kādā tiks attēlots fona zīmējums (zīmējumam jāatrodas tajā pašā mapē, kur pamatdokuments, citādi, pārnesot Web dokumentu uz citu datoru, fona zīmējums neparādīsies).
 
Fona iestatīšanai izmanto šādus parametrus:

• background-image - parametra vērtība var būt attēla vai zīmējuma URL adrese, piem., <style>body {background-image:url(zim.jpg)}</style>
• background-repeat - parametrs, kas nosaka, kādā veidā tiks aizpildīts pārlūkprogrammas logs:
     - repeat - logs tiks aizpildīts ar fona attēlu pa horizontāli un vertikāli (šī ir noklusētā vērtība);
     - repeat-x - logs tiks aizpildīts ar fona attēlu pa horizontāli;
     - repeat-y - logs tiks aizpildīts ar fona attēlu pa vertikāli;
     - no-repeat - logs tiks aizpildīts ar vienu attēlu;
• background-attachment - parametrs nosaka, vai fona zīmējums parādīsies arī citās lapās, ja šķirstīsim Web dokumentu. Vērtības: scroll - zīmējums parādīsies visās lapās, sekos līdzi (noklusētā vērtība), fixed - zīmējums būs fiksēts, nesekos līdzi, šķirstot Web dokumenta lapas;
• background-position - parametrs nosaka fona zīmējuma sākuma stāvokli ar divām skaitliskām vērtībām: pa x asi un y asi. Vērtības atdala ar komatu un norāda procentos, absolūtās vienībās vai ar atslēgas vārdiem top, center, bottom, left, right. Pēc noklusējuma vērtības ir left, top.
 
Fona zīmējuma iestatīšana
 
Fona zīmējumu vislabāk ir ievietot tajā pašā mapē, kur atrodas pamatdokuments.
 
Piemērs:
<html>
<title>Fona zīmējums</title>
<style type="text/css">
body {
background-image:url(zim1.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
padding:0px}
.AA {
margin-left:100px;
margin-top:20px;
margin-right:20px;
margin-bottom:20px}
</style>
</head>
<body>
<div class="AA">
<h1>Teksts</h1>
</div>
</body>
</html>
Rezultāts:
 
b31.png
 
Fona zīmējuma uzlikšana pa x asi
 
Piemērs:
<html>
<head>
<title>background</title>
</head>
<body>
<div style="background:url(zim2.jpg) repeat-x;">
<h1 style="font-family:Arial,sans-serif; color:#8b2500; font-size:80px">Teksts</h1>
<div style="margin-top:120px; font-size:1.2em">
</div></div>
</body>
</html>
Rezultāts:
 
b32.png
 
Fona zīmējumu uzdošanas veidi
 
Piemērs:
<html>
<head>
<title>background-repeat</title>
</head>
<body>
<div style="background-image:url(zim3.jpg); background-repeat: repeat-x; margin:30px; padding:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Teksts 1</p>
</div>
<div style="background-image:url(zim4.jpg); background-repeat margin:30px; padding:50px; border:thin solid #CCCCFF; font-size:150%">
<p>Teksts 2</p>
</div>
<div style="background-image:url(zim5.jpg); background-repeat:no-repeat; padding-bottom: 150px; margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Teksts 3</p>
</div>
</body>
</html>
Rezultāts:
 
b33.png
 
Fona zīmējumu pārklāšanās
 
Piemērs:
<html>
<head>
<title>background-image</title>
</head>
<body style="background-image:url(zim6.jpg)">
<div style="background-image:url(zim7.jpg); margin:60px; padding:10px">
<h1 align="center" style="color:#FFFFCC">Teksts 1</h1>
<div style="background-image:url(zim8.jpg); margin:60px; padding:60px">
<h2 align="center" style="color:#cae1ff">Teksts 2</h2>
</div>
</div>
</body>
</html>
Rezultāts:
 
b34.png
 
Atsauce:
Tīmekļa lapu veidošana. HTML un CSS / Andris Kamars - Rīga: Apgāds Zvaigzne ABC, 2008. – 320 lpp.: il. – izmantotā literatūra: 158.-162. lpp.