Elementuek hondo bat izan dezakete, elementuaren edukiaren atzean eta edukiak eta betelanak hartzen duten eremuan zehar erakusten dena. Fondoa kolorez eta irudiz osatuta egon daitekeenez, CSSk hainbat propietate definitzen ditu hori sortzeko.
background-color —Propietate horrek kolore bat ematen dio elementu baten hondoari.
background-image —Propietate horrek irudi bat edo gehiago esleitzen dizkio elementu baten hondoari. Artxiboaren URLa url () funtzioarekin deklaratzen da (adibidez, url (“adreiluak.jpg”)). Irudi bat baino gehiago behar izanez gero, balioak koma batez bereizi behar dira.
background-position —Propietate horrek hondoko irudi baten hasierako posizioa adierazten du. Balioak ehunekotan, pixeletan edo center, left, right, top eta bottom gako-hitzen konbinazio bat erabiliz zehaztu daitezke.
background-size —Propietate horrek hondoko irudiaren tamaina adierazten du. Balioak ehunekotan, pixeletan edo cover eta contain gako-hitzak erabiliz zehaztu daitezke. cover hitz giltzarriak irudia zabaltzen du, haren zabalerak edo altuerak elementuaren eremua estaltzen duten arte; contain gako-hitzak aldiz, irudia estalti egiten du, eta elementuaren eremu osoa okupatu.
background-repeat —Propietate horrek zehazten du nola banatzen den hondoko irudia lau gako-hitz erabiliz: repeat, repeat-x, repeat-y eta no repeat.
Repeatgako-hitzak ardatz bertikalean eta horizontalean errepikatzen du irudia
repeat-xgako-hitzak ardatz horizontalean errepikatzen du irudia
repeat-ygako-hitzak ardatz bertikalean errepikatzen du irudia
norepeathondoko irudia behin bakarrik erakusten du
background-origin —Propietate horrek zehazten du hondoko irudia elementuaren eremuaren ertza, betelana edo edukia kontuan hartuta kokatuko den. Balio erabilgarriak border-box, padding-box eta content-box dira.
background-clip —Prpietate horrek hondoak estali beharreko eremua aitortzen du border-box, padding-box eta content-box balioak erabiliz.
border-boxbalioak elementuaren kaxaren ertzeko irudia mozten du
padding-boxbalioak kaxaren betegarrian irudia mozten du
content-boxbaliak kaxaren edukiaren inguruko irudia mozten du
background-attachment —Propietate honek zehazten du irudia estatikoa den edo gainerako elementuekin desplazatzen den, bi balio erabiliz: scroll (lehenetsita) eta fixed.
scrollbalioak irudia orriarekin mugiarazten du
fixedbalioak hondoko irudia jatorrizko lekuan finkatzen du
Funtsik ohikoenak koloreekin sortzen dira. Hurrengo arauak background-color propietatea ezartzen du, gure dokumentuaren goiburuari hondo gris bat gehitzeko.
Alboetan 30 pixeleko marjinak definitzen ditugunez, goiburua nabigatzailearen leihoan zentratuta geratzen da, baina < header> elementuaren barruko testua ezkerrean lerrokatuta dago oraindik (lerrokadura lehenetsia). 3-47 zerrendaren adibidean, funtsa aldatzeaz gain, izenburua zentratzeko text-align jabetza ere sartzen dugu.
Goiburuaren atzealdeari kolorea eman zaio
Koloreez gain, hondoko irudiak ere erabil ditzakegu. Kasu honetan, hondoa background-image jabetzarekin deklaratu behar dugu eta irudiaren URLa url funtzioarekin () deklaratu, hurrengo adibidean egiten dugun bezala.
Irudiekin arazoa da ez direla beti elementuak sortutako kaxaren tamaina berekoak. Horregatik, nabigatzaileek behin eta berriz errepikatzen dute irudia, eremu osoa estali arte.
Goiburuaren atzealdeko irudia errepikatu egiten da horizontalean
Egin ezazu zuk zeuk: Ordezkatu CSS artxiboko arauak 3-48 Kodeko arauekin. Deskargatu adreiluen irudia.jpg gure webgunetik. Kopiatu irudia zure irudia dagoen direktorio berean dokumentua. Ireki dokumentua zure nabigatzailean. 3-22 irudian agertzen denaren antzeko zerbait ikusi beharko nuke.
Lehenetsitako portaera aldatu nahi badugu, eskura ditugun hondoko gainerako propietateak erabil ditzakegu. Adibidez, berroinezko balioa esleitzen badiogu -eta background-repeat jabetzari, nabigatzaileak ardatz bertikalean soilik errepikatuko du irudia.
Goiburuaren atzealdeko irudia bertikalean errepikatzeko eskatu dugu. Irudiak altuera nahiko duenez, ez da ikusten errepikapena eta eskuinean tarte bat hutsik uzten du.
Gure diseinuak hainbat balio eskatzen dituenean funtsa konfiguratzeko, denak batera adieraz ditzakegu background propietatearekin. Jabetza horrek aukera ematen digu funtsaren hainbat alderdi kode-lerro bakar batean deklaratzeko.
Goiburuaren atzealdeko irudia bertikalean errepikatuta eskuinean hutsik geratu den zatia koloreztatu egingo da..
Goiko erregelak lehen erabiltzen ditugun balio berberak zehazten ditu, baina orain atzeko irudi bat eta kolore bat konbinatzen ditu. Emaitza 3-24 irudian ageri da.
3-24 irudia. Goiburuaren atzealdeko irudia bertikalean errepikatuta eta beste kolore batekin konbinatuta, eskuineko tartea koloreak betetzen du.
Estekak froga simpleak egiteko aproposa den aplikazio bat irekiko dizu elementuek zer-nolako itxura hartzen duten ikusteko, baina hor egindako frogak komeni da kode editorera eramatea eta bertan egiaztatzea gure nahiari hurbiltzen zaion egindakoa.