Imam
body {
background: url(images/background.svg);
}
Želeni učinek je, da ima ta slika v ozadju širino, ki je enaka širini strani, višina pa se spreminja, da se ohrani razmerje. npr. če je prvotna slika 100*200 (poljubne enote) in je telo široko 600px, mora biti slika v ozadju visoka 1200px. Višina se samodejno spremeni, če se spremeni velikost okna. Ali je to mogoče?
Trenutno je videti, da Firefox prilagodi višino in nato prilagodi širino. Ali je to morda zato, ker je višina najdaljša dimenzija in se poskuša izogniti obrezovanju? Želim* obrezati navpično, nato pa se pomikati: brez vodoravnega ponavljanja.
Poleg tega Chrome postavi sliko na sredino, brez ponavljanja, tudi če je izrecno navedena možnost background-repeat:repeat
, ki je tako ali tako privzeta.
Za to obstaja lastnost CSS3, in sicer background-size
(preverjanje združljivosti). Čeprav lahko nastavimo vrednosti dolžine, se običajno uporablja s posebnima vrednostma contain
in cover
. V vašem primeru morate uporabiti cover
:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
in cover
Opravičujem se za slabo besedno igro, vendar bom za demonstracijo uporabil sliko dneva Biswarupa Gangulyja. Recimo, da je to vaš zaslon, sivo območje pa je zunaj vašega vidnega zaslona. Za predstavitev bom predpostavil razmerje 16x9.
Kot ozadje želimo uporabiti prej omenjeno sliko dneva. Vendar smo sliko iz nekega razloga obrezali na 4x3. Lastnost background-size
bi lahko nastavili na neko fiksno dolžino, vendar se bomo osredotočili na contain
in cover
. Upoštevajte, da predpostavljam tudi, da nismo spremenili širine in/ali višine lastnosti body
.
contain
contain Pomanjšajte sliko, pri čemer ohranite njeno notranje razmerje stranic (če obstaja), na največjo velikost, tako da se lahko njena širina in višina prilegata območju za pozicioniranje ozadja.
To zagotavlja, da je slika ozadja vedno v celoti vsebovana v območju za pozicioniranje ozadja, vendar je v tem primeru lahko nekaj praznega prostora zapolnjenega z vašo barvo ozadja
:
cover
cover Pomanjšajte sliko, pri čemer ohranite njeno notranje razmerje stranic (če obstaja), na najmanjšo velikost, tako da lahko tako po širini kot po višini v celoti pokrije območje pozicioniranja ozadja.
S tem je zagotovljeno, da slika ozadja pokriva vse. Barva ozadja ne bo vidna, vendar je lahko glede na razmerje zaslona velik del slike odrezan:
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
Na podlagi nasvetov s spletne strani https://developer.mozilla.org/en-US/docs/CSS/background-size sem pripravila naslednji recept, ki se mi je obnesel.
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
Nisem prepričan, kaj točno iščete, vendar bi si morali ogledati te odlične objave na blogu, ki jih je napisal Chris Coyier iz CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/.
http://css-tricks.com/perfect-full-page-background-image/
Preberite opise vseh člankov in preverite, ali so to, kar iščete.
Prvi članek odgovarja na naslednje vprašanje:
Ali obstaja način, da sliki ozadja spremenimo velikost? Tako, da bi ozadje spletne strani od roba do roba zapolnili s sliko, ne glede na velikost okna brskalnika. Prav tako lahko sliko povečate ali zmanjšate, ko se okno brskalnika spreminja. Prav tako poskrbite, da slika ohrani svoje razmerje (da se čudno ne raztegne). Prav tako ne povzroča vrstic za pomikanje, ampak se po potrebi samo navpično odreže. Prav tako je na strani prikazan kot vdelana oznaka .
Cilj drugega prispevka je dobiti naslednje: "slika ozadja na spletni strani, ki ves čas pokriva celotno okno brskalnika. "
Upam, da to pomaga.