{"id":313,"date":"2020-03-07T13:44:31","date_gmt":"2020-03-07T13:44:31","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=313"},"modified":"2020-03-11T13:05:49","modified_gmt":"2020-03-11T13:05:49","slug":"veebilehe-elementide-taust","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/veebilehe-elementide-taust\/","title":{"rendered":"Veebilehe elementide taust"},"content":{"raw":"Mitmetel veebilehe elementidel saab m\u00e4\u00e4rata tausta omadusi. Terve veebilehe tausta m\u00e4\u00e4rab stiil, mis luuakse elemendile <body><\/code> kuid sarnaselt v\u00f5ib tausta m\u00e4\u00e4rata sektsioonidele <section><\/code> alajaotustele <div><\/code>, tabelile ja\/v\u00f5i tabeli osadele jne.\r\n

Taustav\u00e4rv<\/h1>\r\nVeebilehe taustav\u00e4rv m\u00e4\u00e4ratakse omadusega background-color j\u00e4rgmiselt:\r\n\r\nbackground-color:v\u00e4rv<\/em>\r\n\r\nN\u00e4iteks m\u00e4\u00e4rame veebilehele taustav\u00e4rviks helehalli:\r\n
body {\r\n  background-color: #c0c0c0;\r\n}<\/pre>\r\n
Astmikt\u00e4ide (gradient)<\/h1>\r\nCSS3 v\u00f5imaldab taustal kasutada ka astmikt\u00e4idet (gradient<\/em>).\r\n\r\nKasutada saab lineaarset (linear<\/em>), radiaalset (radial<\/em>) ja elliptilist (elliptical<\/em>) astmikt\u00e4idet.\r\n\r\nMoodsatel veebilehtedel see v\u00f5imalus tihti kasutust ei leia ning visuaalselt meeldiva tulemuse saavutamiseks tuleb astmikt\u00e4ite kasutmisel olla ettevaatlik.\r\n\r\nAstmikt\u00e4ite kasutamiseks tuleb m\u00e4\u00e4rata v\u00e4hemalt kaks v\u00e4rvi millede vahel v\u00e4rvi muutus toimuma hakkab.\r\n\r\nbackground: linear-gradient(suund,\u00a0v\u00e4rv1, v\u00e4rv2, ...);<\/span><\/em>\r\n\r\nN\u00e4iteks:\r\n
#kastike{\r\n  background-image: linear-gradient(blue, lightblue);\r\n}<\/pre>\r\n[caption id=\"attachment_316\" align=\"aligncenter\" width=\"461\"]\"Lineaarse N\u00e4ide: Lineaarse astmikt\u00e4itega taust[\/caption]\r\n\r\nKui me n\u00e4iteks sooviksime, et v\u00e4rvide \u00fcleminek toimuks vasakult paremale, saame kasutada suunav\u00e4\u00e4rtust to right<\/em> (paremale):\r\n
#kastike{\r\n  background-image: linear-gradient(to right, blue, lightblue);\r\n}<\/pre>\r\n
Taustapilt ja selle paigutus<\/h1>\r\nVeebilehe elemendi (v\u00f5i terve veebilehe) taustana saab kasutada ka pilti. \u00dcldiselt ei kasutata \u00fcht suurt, tervet veebilehe tausta katvat pilti, sest selle laadimine v\u00f5taks palju aega. Reeglina kasutatakse v\u00e4ikesem\u00f5\u00f5dulist pilti, mida siis mosaiigina \u00fcle terve tausta laotakse. Kasutatakse gif, jpg ja png vormingus pildifaile.\r\n\r\nTaustapildi lisamiseks kasutatakse omadust background-image<\/em> j\u00e4rgmiselt:\r\n
background-image: url(\"pildifaili_URL\")<\/pre>\r\nM\u00e4\u00e4rata saab ka seda kas ja kuidas kasutatavat pilti mosaiigina taustale laotakse. Selleks on omadus background-repeat<\/em>, millel on neli v\u00f5imalikku v\u00e4\u00e4rtust:\r\n
    \r\n \t
  • repeat<\/em> \u2013 pilti laotakse mosaiigina nii horisontaalsuunal kui ka vertikaalsuunal (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t
  • repeat-x<\/em> \u2013 pilti laotakse mosaiigina vaid horisontaalsuunal;<\/li>\r\n \t
  • repeat-y<\/em> \u2013 pilti laotakse mosaiigina vaid vertikaalsuunal;<\/li>\r\n \t
  • no-repeat<\/em> \u2013 pilti ei laota mosaiigina, n\u00e4idatakse nii nagu on.<\/li>\r\n<\/ul>\r\nTaustapildile, mida mosaiigina ei laota saab m\u00e4\u00e4rata t\u00e4pse asukoha veebilehitseja aknas. Selleks kasutatakse omadust background-position<\/em>, mille v\u00e4\u00e4rtusteks v\u00f5ivad olla konstandid: top left<\/em>, top center<\/em>, top right<\/em>, center left<\/em>, center center<\/em>, center right<\/em>, bottom left<\/em>, bottom <\/em>center<\/em>, bottom right<\/em>, koordinaatide paar protsentides v\u00f5i koordinaatide paar pikslites.\r\n\r\nN\u00e4iteks asetame veebilehe taustale pildi, ei lao seda mosaiigina ning asetame ta veebilehitseja\r\naknas \u00fclemisest vasakust nurgast 300 pikslit vasakule ja 200 pikslit allapoole:\r\n
    body {\r\n  background-image: url(\"taustapilt.gif\");\r\n  background-repeat: no-repeat;\r\n  background-position: 300px 200px\r\n}<\/pre>\r\nSaab ka m\u00e4\u00e4rata, kas ja kuidas k\u00e4itub taustapilt veebilehe kerimisel. Kasutada on omadus background-attachment<\/em>, millel on j\u00e4rgmised v\u00e4\u00e4rtused:\r\n
      \r\n \t
    • fixed<\/em> \u2013 pilt p\u00fcsib veebilehitseja aknas \u00fchel kohal;<\/li>\r\n \t
    • scroll<\/em> \u2013 pilti keritakse koos elemendiga, mille taustal ta on;<\/li>\r\n \t
    • local<\/em> \u2013 pilti keritakse koos elemendi sisuga.<\/li>\r\n<\/ul>\r\nKokkuv\u00f5tlikult v\u00f5ib HTML elemendi <body><\/code> jaoks CSS abil kirjutada n\u00e4iteks j\u00e4rgmise kujunduse, kus lisaks eelnevatele n\u00e4idetele on taustapilt oma kohale fikseeritud:\r\n
      body {\r\n  background-color: #c0c0c0;\r\n  background-image: url(\"taustapilt.gif\");\r\n  background-repeat: no-repeat;\r\n  background-position: 300px 200px;\r\n  background-attachment: fixed\r\n}<\/pre>\r\n
      Tausta stiil l\u00fchikeselt kirjutatuna<\/h1>\r\nTausta omadusi saab kirja panna ka l\u00fchidalt (shorthand) omadusena background, millele k\u00f5ik erinevate omaduste v\u00e4\u00e4rtused t\u00fchikutega eraldatuna j\u00e4rjest kirja pannakse. Sellisel juhul tuleb k\u00f5ik omadused kirja panna j\u00e4rgmises j\u00e4rjekorras:\r\n
        \r\n \t
      • background-color<\/em><\/li>\r\n \t
      • background-image<\/em><\/li>\r\n \t
      • background-repeat<\/em><\/li>\r\n \t
      • background-attachment<\/em><\/li>\r\n \t
      • background-position<\/em><\/li>\r\n<\/ul>\r\nKui m\u00f5ne omaduse v\u00e4\u00e4rtust ei m\u00e4\u00e4rata (see puudub), siis \u00fclej\u00e4\u00e4nud peavad ikkagi seda j\u00e4rjekorda j\u00e4rgima!\r\n\r\nN\u00e4iteks v\u00f5ib eespool toodud tausta stiili kirja panna j\u00e4rgmiselt:\r\n
        body {\r\n  background: #c0c0c0 url(\"taustapilt.gif\") no-repeat fixed 300px 200px;\r\n}<\/pre>\r\n
        Taustapildi suurus<\/h1>\r\n\u00dche uuendusena saab v\u00f5imalikuks taustapildi suuruse muutmine. Selleks on omadus background-size.<\/em>\r\nTaustapildi suurust saab m\u00e4\u00e4rata absoluutarvudega pikslites. M\u00e4\u00e4rata v\u00f5ib \u00fche v\u00e4\u00e4rtuse (laius, k\u00f5rgus arvutatakse automaatselt ja proportsionaalselt) v\u00f5i siis kaks v\u00e4\u00e4rtust (laius, k\u00f5rgus). N\u00e4iteks:\r\n
        #sisukast {\r\n  background-size: 200px 100px;\r\n}<\/pre>\r\nTaustapildi suurust saab m\u00e4\u00e4rata ka protsentuaalselt elemendi suhtes, mille taustaks ta on. M\u00e4\u00e4rata v\u00f5ib taas kas \u00fche v\u00e4\u00e4rtuse (laius, k\u00f5rgus arvutatakse automaatselt ja proportsionaalselt) v\u00f5i kaks v\u00e4\u00e4rtust (laius, k\u00f5rgus). Lisaks on v\u00f5imalik kasutada konstante:\r\n
          \r\n \t
        • contain<\/em> \u2013 Taustapilt venitatakse maksimaalselt suureks nii, et ta laius ja k\u00f5rgus mahuvad m\u00f5lemad elemendi m\u00f5\u00f5tudesse.<\/li>\r\n \t
        • cover<\/em> \u2013 taustapilt venitatakse nii suureks, et ta katab terve elemendi (v\u00f5ib ulatuda ka \u00fcle serva).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
          #sisukast {\r\n  background-size: cover;\r\n}<\/pre>\r\n[caption id=\"attachment_319\" align=\"aligncenter\" width=\"300\"]\"taust Taustapildi suurus protsentuaalselt: laius 100% k\u00f5rgus 100%[\/caption]\r\n\r\n[caption id=\"attachment_320\" align=\"aligncenter\" width=\"300\"]\"taust: Taustapildi suurus: contain<\/em>[\/caption]\r\n\r\n[caption id=\"attachment_321\" align=\"aligncenter\" width=\"300\"]\"taust Taustapildi suurus: cover[\/caption]\r\n
          Taustapildi koordinaatide alguspunkt<\/h1>\r\nLisaks on v\u00f5imalik taustapilt objekti raamjoone, polsterduse (padding<\/em>) v\u00f5i sisu koordinaatidest l\u00e4htuvalt. Selleks on omadus background-origin<\/em>, mille\r\nv\u00f5imalikud v\u00e4\u00e4rtused on:\r\n
            \r\n \t
          • padding-box<\/em> \u2013 vaikev\u00e4\u00e4rtus, taustapilt paigutatakse l\u00e4htudes raamjoonest (border<\/em>);<\/li>\r\n \t
          • border-box<\/em> \u2013 taustapilt paigutatakse l\u00e4htudes elemendi polsterdusest (padding<\/em>);<\/li>\r\n \t
          • content-box<\/em> \u2013 taustapilt paigutatakse l\u00e4htudes elemendi sisu piirkonnast.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
            div {\r\n  background-image:url('taustapilt.png');\r\n  background-repeat:no-repeat;\r\n  background-position:top left;\r\n  background-origin:content-box;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_327\" align=\"aligncenter\" width=\"300\"]\"Taustapilt Taustapildi asukoht polsterduse suhtes (padding-box<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_326\" align=\"aligncenter\" width=\"300\"]\"taustapilt Taustapildi asukoht raamjoone suhtes (border-box<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_328\" align=\"aligncenter\" width=\"300\"]\"taustapilt Taustapildi asukoht sisu suhtes (content-box<\/em>)[\/caption]\r\n
            Tausta kaetav ala<\/h1>\r\nOmadus background-clip<\/em> annab v\u00f5imaluse m\u00e4\u00e4rata, millise ala elemendist taust katab. Kas kaetakse vaid sisu piirkond v\u00f5i kogu raamjoone sisse j\u00e4\u00e4v ala. V\u00f5imalikud v\u00e4\u00e4rtused on:\r\n
              \r\n \t
            • padding-box<\/em> \u2013 vaikev\u00e4\u00e4rtus, taust katab kogu elemendi alla j\u00e4\u00e4va piirkonna, kaasaarvatud polsterduse ala ja raamjoon;<\/li>\r\n \t
            • border-box<\/em> \u2013 taust katab elemendi sisu ja polsterduse (padding<\/em>) alla j\u00e4\u00e4va piirkonna;<\/li>\r\n \t
            • content-box<\/em> \u2013 taust katab vaid elemendi sisu piirkonna.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
              div {\r\n  border: 6px dashed black;\r\n  padding: 15px;\r\n  background: lightblue;\r\n  background-clip: border-box;  \r\n}<\/pre>\r\n \r\n\r\n\"taustapildid\"\r\n
              Mitu taustapilti<\/h1>\r\nV\u00f5imalus on kasutada ka mitut taustapilti. Selleks tuleb taustapildid komadega eraldatult \u00fcles lugeda. Sarnaselt tuleks komadega eraldatult \u00fcles lugeda k\u00f5ik teised tausta omadused (samas j\u00e4rjekorras).\r\n\r\nN\u00e4iteks:\r\n
              body {\r\n  background-image: url(\"img\/ylemine.png\"), url(\"img\/alumine.png\");\r\n  background-size: 30%; \/*see on m\u00f5lema taustapildi \u00fchine omadus*\/\r\n  background-position: top right, bottom right;\r\n  background-repeat: no-repeat; \/*see on m\u00f5lema \u00fchine omadus*\/\r\n}<\/pre>","rendered":"
              Mitmetel veebilehe elementidel saab m\u00e4\u00e4rata tausta omadusi. Terve veebilehe tausta m\u00e4\u00e4rab stiil, mis luuakse elemendile <body><\/code> kuid sarnaselt v\u00f5ib tausta m\u00e4\u00e4rata sektsioonidele <section><\/code> alajaotustele <div><\/code>, tabelile ja\/v\u00f5i tabeli osadele jne.<\/p>\n
              Taustav\u00e4rv<\/h1>\n
              Veebilehe taustav\u00e4rv m\u00e4\u00e4ratakse omadusega background-color j\u00e4rgmiselt:<\/p>\n
              background-color:v\u00e4rv<\/em><\/p>\n
              N\u00e4iteks m\u00e4\u00e4rame veebilehele taustav\u00e4rviks helehalli:<\/p>\n
              body {\r\n  background-color: #c0c0c0;\r\n}<\/pre>\n
              Astmikt\u00e4ide (gradient)<\/h1>\n
              CSS3 v\u00f5imaldab taustal kasutada ka astmikt\u00e4idet (gradient<\/em>).<\/p>\n
              Kasutada saab lineaarset (linear<\/em>), radiaalset (radial<\/em>) ja elliptilist (elliptical<\/em>) astmikt\u00e4idet.<\/p>\n
              Moodsatel veebilehtedel see v\u00f5imalus tihti kasutust ei leia ning visuaalselt meeldiva tulemuse saavutamiseks tuleb astmikt\u00e4ite kasutmisel olla ettevaatlik.<\/p>\n
              Astmikt\u00e4ite kasutamiseks tuleb m\u00e4\u00e4rata v\u00e4hemalt kaks v\u00e4rvi millede vahel v\u00e4rvi muutus toimuma hakkab.<\/p>\n
              background: linear-gradient(suund,\u00a0v\u00e4rv1, v\u00e4rv2, …);<\/span><\/em><\/p>\n
              N\u00e4iteks:<\/p>\n
              #kastike{\r\n  background-image: linear-gradient(blue, lightblue);\r\n}<\/pre>\n
              \"Lineaarse
              N\u00e4ide: Lineaarse astmikt\u00e4itega taust<\/figcaption><\/figure>\n
              Kui me n\u00e4iteks sooviksime, et v\u00e4rvide \u00fcleminek toimuks vasakult paremale, saame kasutada suunav\u00e4\u00e4rtust to right<\/em> (paremale):<\/p>\n
              #kastike{\r\n  background-image: linear-gradient(to right, blue, lightblue);\r\n}<\/pre>\n
              Taustapilt ja selle paigutus<\/h1>\n
              Veebilehe elemendi (v\u00f5i terve veebilehe) taustana saab kasutada ka pilti. \u00dcldiselt ei kasutata \u00fcht suurt, tervet veebilehe tausta katvat pilti, sest selle laadimine v\u00f5taks palju aega. Reeglina kasutatakse v\u00e4ikesem\u00f5\u00f5dulist pilti, mida siis mosaiigina \u00fcle terve tausta laotakse. Kasutatakse gif, jpg ja png vormingus pildifaile.<\/p>\n
              Taustapildi lisamiseks kasutatakse omadust background-image<\/em> j\u00e4rgmiselt:<\/p>\n
              background-image: url(\"pildifaili_URL\")<\/pre>\n
              M\u00e4\u00e4rata saab ka seda kas ja kuidas kasutatavat pilti mosaiigina taustale laotakse. Selleks on omadus background-repeat<\/em>, millel on neli v\u00f5imalikku v\u00e4\u00e4rtust:<\/p>\n
                \n
              • repeat<\/em> \u2013 pilti laotakse mosaiigina nii horisontaalsuunal kui ka vertikaalsuunal (vaikev\u00e4\u00e4rtus);<\/li>\n
              • repeat-x<\/em> \u2013 pilti laotakse mosaiigina vaid horisontaalsuunal;<\/li>\n
              • repeat-y<\/em> \u2013 pilti laotakse mosaiigina vaid vertikaalsuunal;<\/li>\n
              • no-repeat<\/em> \u2013 pilti ei laota mosaiigina, n\u00e4idatakse nii nagu on.<\/li>\n<\/ul>\n
                Taustapildile, mida mosaiigina ei laota saab m\u00e4\u00e4rata t\u00e4pse asukoha veebilehitseja aknas. Selleks kasutatakse omadust background-position<\/em>, mille v\u00e4\u00e4rtusteks v\u00f5ivad olla konstandid: top left<\/em>, top center<\/em>, top right<\/em>, center left<\/em>, center center<\/em>, center right<\/em>, bottom left<\/em>, bottom <\/em>center<\/em>, bottom right<\/em>, koordinaatide paar protsentides v\u00f5i koordinaatide paar pikslites.<\/p>\n
                N\u00e4iteks asetame veebilehe taustale pildi, ei lao seda mosaiigina ning asetame ta veebilehitseja
                \naknas \u00fclemisest vasakust nurgast 300 pikslit vasakule ja 200 pikslit allapoole:<\/p>\n
                body {\r\n  background-image: url(\"taustapilt.gif\");\r\n  background-repeat: no-repeat;\r\n  background-position: 300px 200px\r\n}<\/pre>\n
                Saab ka m\u00e4\u00e4rata, kas ja kuidas k\u00e4itub taustapilt veebilehe kerimisel. Kasutada on omadus background-attachment<\/em>, millel on j\u00e4rgmised v\u00e4\u00e4rtused:<\/p>\n
                  \n
                • fixed<\/em> \u2013 pilt p\u00fcsib veebilehitseja aknas \u00fchel kohal;<\/li>\n
                • scroll<\/em> \u2013 pilti keritakse koos elemendiga, mille taustal ta on;<\/li>\n
                • local<\/em> \u2013 pilti keritakse koos elemendi sisuga.<\/li>\n<\/ul>\n
                  Kokkuv\u00f5tlikult v\u00f5ib HTML elemendi <body><\/code> jaoks CSS abil kirjutada n\u00e4iteks j\u00e4rgmise kujunduse, kus lisaks eelnevatele n\u00e4idetele on taustapilt oma kohale fikseeritud:<\/p>\n
                  body {\r\n  background-color: #c0c0c0;\r\n  background-image: url(\"taustapilt.gif\");\r\n  background-repeat: no-repeat;\r\n  background-position: 300px 200px;\r\n  background-attachment: fixed\r\n}<\/pre>\n
                  Tausta stiil l\u00fchikeselt kirjutatuna<\/h1>\n
                  Tausta omadusi saab kirja panna ka l\u00fchidalt (shorthand) omadusena background, millele k\u00f5ik erinevate omaduste v\u00e4\u00e4rtused t\u00fchikutega eraldatuna j\u00e4rjest kirja pannakse. Sellisel juhul tuleb k\u00f5ik omadused kirja panna j\u00e4rgmises j\u00e4rjekorras:<\/p>\n
                    \n
                  • background-color<\/em><\/li>\n
                  • background-image<\/em><\/li>\n
                  • background-repeat<\/em><\/li>\n
                  • background-attachment<\/em><\/li>\n
                  • background-position<\/em><\/li>\n<\/ul>\n
                    Kui m\u00f5ne omaduse v\u00e4\u00e4rtust ei m\u00e4\u00e4rata (see puudub), siis \u00fclej\u00e4\u00e4nud peavad ikkagi seda j\u00e4rjekorda j\u00e4rgima!<\/p>\n
                    N\u00e4iteks v\u00f5ib eespool toodud tausta stiili kirja panna j\u00e4rgmiselt:<\/p>\n
                    body {\r\n  background: #c0c0c0 url(\"taustapilt.gif\") no-repeat fixed 300px 200px;\r\n}<\/pre>\n
                    Taustapildi suurus<\/h1>\n
                    \u00dche uuendusena saab v\u00f5imalikuks taustapildi suuruse muutmine. Selleks on omadus background-size.<\/em>
                    \nTaustapildi suurust saab m\u00e4\u00e4rata absoluutarvudega pikslites. M\u00e4\u00e4rata v\u00f5ib \u00fche v\u00e4\u00e4rtuse (laius, k\u00f5rgus arvutatakse automaatselt ja proportsionaalselt) v\u00f5i siis kaks v\u00e4\u00e4rtust (laius, k\u00f5rgus). N\u00e4iteks:<\/p>\n
                    #sisukast {\r\n  background-size: 200px 100px;\r\n}<\/pre>\n
                    Taustapildi suurust saab m\u00e4\u00e4rata ka protsentuaalselt elemendi suhtes, mille taustaks ta on. M\u00e4\u00e4rata v\u00f5ib taas kas \u00fche v\u00e4\u00e4rtuse (laius, k\u00f5rgus arvutatakse automaatselt ja proportsionaalselt) v\u00f5i kaks v\u00e4\u00e4rtust (laius, k\u00f5rgus). Lisaks on v\u00f5imalik kasutada konstante:<\/p>\n
                      \n
                    • contain<\/em> \u2013 Taustapilt venitatakse maksimaalselt suureks nii, et ta laius ja k\u00f5rgus mahuvad m\u00f5lemad elemendi m\u00f5\u00f5tudesse.<\/li>\n
                    • cover<\/em> \u2013 taustapilt venitatakse nii suureks, et ta katab terve elemendi (v\u00f5ib ulatuda ka \u00fcle serva).<\/li>\n<\/ul>\n
                      N\u00e4iteks:<\/p>\n
                      #sisukast {\r\n  background-size: cover;\r\n}<\/pre>\n
                      \"taust
                      Taustapildi suurus protsentuaalselt: laius 100% k\u00f5rgus 100%<\/figcaption><\/figure>\n
                      \"taust:
                      Taustapildi suurus: contain<\/em><\/figcaption><\/figure>\n
                      \"taust
                      Taustapildi suurus: cover<\/figcaption><\/figure>\n
                      Taustapildi koordinaatide alguspunkt<\/h1>\n
                      Lisaks on v\u00f5imalik taustapilt objekti raamjoone, polsterduse (padding<\/em>) v\u00f5i sisu koordinaatidest l\u00e4htuvalt. Selleks on omadus background-origin<\/em>, mille
                      \nv\u00f5imalikud v\u00e4\u00e4rtused on:<\/p>\n
                        \n
                      • padding-box<\/em> \u2013 vaikev\u00e4\u00e4rtus, taustapilt paigutatakse l\u00e4htudes raamjoonest (border<\/em>);<\/li>\n
                      • border-box<\/em> \u2013 taustapilt paigutatakse l\u00e4htudes elemendi polsterdusest (padding<\/em>);<\/li>\n
                      • content-box<\/em> \u2013 taustapilt paigutatakse l\u00e4htudes elemendi sisu piirkonnast.<\/li>\n<\/ul>\n
                        N\u00e4iteks:<\/p>\n
                        div {\r\n  background-image:url('taustapilt.png');\r\n  background-repeat:no-repeat;\r\n  background-position:top left;\r\n  background-origin:content-box;\r\n}\r\n<\/pre>\n
                        \"Taustapilt
                        Taustapildi asukoht polsterduse suhtes (padding-box<\/em>)<\/figcaption><\/figure>\n
                        \"taustapilt
                        Taustapildi asukoht raamjoone suhtes (border-box<\/em>)<\/figcaption><\/figure>\n
                        \"taustapilt
                        Taustapildi asukoht sisu suhtes (content-box<\/em>)<\/figcaption><\/figure>\n
                        Tausta kaetav ala<\/h1>\n
                        Omadus background-clip<\/em> annab v\u00f5imaluse m\u00e4\u00e4rata, millise ala elemendist taust katab. Kas kaetakse vaid sisu piirkond v\u00f5i kogu raamjoone sisse j\u00e4\u00e4v ala. V\u00f5imalikud v\u00e4\u00e4rtused on:<\/p>\n
                          \n
                        • padding-box<\/em> \u2013 vaikev\u00e4\u00e4rtus, taust katab kogu elemendi alla j\u00e4\u00e4va piirkonna, kaasaarvatud polsterduse ala ja raamjoon;<\/li>\n
                        • border-box<\/em> \u2013 taust katab elemendi sisu ja polsterduse (padding<\/em>) alla j\u00e4\u00e4va piirkonna;<\/li>\n
                        • content-box<\/em> \u2013 taust katab vaid elemendi sisu piirkonna.<\/li>\n<\/ul>\n
                          N\u00e4iteks:<\/p>\n
                          div {\r\n  border: 6px dashed black;\r\n  padding: 15px;\r\n  background: lightblue;\r\n  background-clip: border-box;  \r\n}<\/pre>\n
                           <\/p>\n
                          \"taustapildid\"<\/div>\n
                          Mitu taustapilti<\/h1>\n
                          V\u00f5imalus on kasutada ka mitut taustapilti. Selleks tuleb taustapildid komadega eraldatult \u00fcles lugeda. Sarnaselt tuleks komadega eraldatult \u00fcles lugeda k\u00f5ik teised tausta omadused (samas j\u00e4rjekorras).<\/p>\n
                          N\u00e4iteks:<\/p>\n
                          body {\r\n  background-image: url(\"img\/ylemine.png\"), url(\"img\/alumine.png\");\r\n  background-size: 30%; \/*see on m\u00f5lema taustapildi \u00fchine omadus*\/\r\n  background-position: top right, bottom right;\r\n  background-repeat: no-repeat; \/*see on m\u00f5lema \u00fchine omadus*\/\r\n}<\/pre>\n","protected":false},"author":1,"menu_order":1,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":310,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/313"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":15,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/313\/revisions"}],"predecessor-version":[{"id":448,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/313\/revisions\/448"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/310"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/313\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=313"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=313"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}