Am
body {
background: url(images/background.svg);
}
Efectul dorit este că această imagine de fundal va avea lățimea egală cu cea a paginii, înălțime schimbare pentru a menține proporția. de exemplu, dacă imaginea originală se întâmplă să fie 100*200 (unități) și corpul este 600px lățime, imaginea de fundal ar trebui să se încheie până fiind 1200px mare. Înălțimea ar trebui să se schimbe în mod automat în cazul în care fereastra este redimensionată. Este posibil acest lucru?
În momentul de față, Firefox se pare ca's efectuarea înălțime formă și apoi ajustarea lățimii. Asta e, probabil, pentru că înălțimea este cea mai mare dimensiune și it's încercarea de a evita decuparea? Am vrea ** pentru a decupa vertical, apoi selectați: nr orizontală repeta.
De asemenea, Chrome este plasarea imaginii în centrul orașului, nu se repeta, chiar și atunci când background-repeat:repeat
este dat în mod explicit, care este implicit oricum.
Există o CSS3 proprietate pentru acest lucru, și anume background-size
(compatibilitate). În timp ce o pot seta valorile lungimii, l's de obicei folosit cu valori speciale conțin
și "acoperi". În cazul dumneavoastră specific, ar trebui să utilizați "acoperi":
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
conțin
și "acoperi"Ne pare rău pentru rău de cuvinte, dar am'm de gând să utilizați fotografia zilei de Biswarup Ganguly pentru demonstrație. Vă permite să spun că acest lucru este ecranul, și zona gri este în afară de ecran vizibil. Pentru demonstrație, am'm de gând să-și asume un 16x9 raport.
Vrem să folosim menționate mai sus imaginea zilei ca un fundal. Cu toate acestea, am decupat imaginea 4x3 pentru un motiv oarecare. Am putea stabili background-size proprietatea unor lungime fixă, dar ne vom concentra pe
conțin` și "acoperi". Rețineți că, de asemenea, cred că ne-am't mangle lățimea și/sau înălțimea de "corp".
conțin
conține Scala imaginea, în timp ce păstrarea sale intrinseci raportul de aspect (dacă este cazul), pentru cea mai mare dimensiune, astfel încât ambele lățimea și înălțimea acestuia se pot potrivi in interiorul fundal de poziționare zonă.
Acest lucru face sigur că imaginea de fundal este întotdeauna inclusă complet în fundal de poziționare zonă, cu toate acestea, nu ar putea fi un spațiu gol umplut cu culoare de fundal în acest caz:
husa Scala imaginea, în timp ce păstrarea sale intrinseci raportul de aspect (dacă este cazul), la cele mai mici dimensiuni, astfel că atât lățimea și înălțimea sa poate acoperi complet fundal de poziționare zonă.
Acest lucru face sigur că imaginea de fundal se acoperă totul. Nu va fi nici o vizibil background-color
, cu toate acestea, în funcție de ecranul de's raport o mare parte din imaginea ta ar putea fi tăiate:
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>
Bazat pe sfaturi de la https://developer.mozilla.org/en-US/docs/CSS/background-size am sfârșit cu următoarea rețetă care a lucrat pentru mine
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;
}
Am'm nu sunt sigur ce ai de're în căutarea pentru exact, dar tu într-adevăr ar trebui să verificați aceste excelent blog scris de Chris Coyier de la CSS-Trucuri:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Citiți descrierile pentru fiecare dintre articole și a vedea dacă acestea're ceea ce're în căutarea pentru.
Primele răspunsuri la următoarea întrebare:
există o modalitate de a face o imagine de fundal redimensionarea? Ca și în, umple fundalul unei pagini web edge-to-edge cu o imagine, indiferent de dimensiunea ferestrei browserului. De asemenea, au redimensiona mai mari sau mai mici ca fereastră a browser-ului se schimbă. De asemenea, asigurați-vă că acesta își păstrează raportul (nu't stretch ciudat). De asemenea, nu't că barele de derulare, doar taie pe verticală dacă e nevoie. De asemenea, vine de pe pagina ca o linie tag-ul.
Cel de-al doilea post's scopul este de a obține cele ce urmează, o "imagine de fundal pe un site care acoperă întreaga fereastră a browser-ului în orice moment. "
Sper că acest lucru vă ajută.
Încercați acest lucru,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
Trebuie doar să adăugați această linie:
.your-class {
height: 100vh;
}
vh este viewport înălțime. Acest lucru va scala automat pentru a se potrivi dispozitivului' fereastră a browser-ului.
Verifica mai multe aici: https://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window?rq=1
Imaginea de fundal nu este Setul Perfect atunci css este problema de a crea atât lui fișier css pentru a schimba codul de mai jos
html {
background-image: url("example.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
}
%; background-size: 100% 100%;"
Am avut aceeasi problema, în imposibilitatea de a redimensiona imaginea la reglarea browser dimensiuni.
Cod rău:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
Bună Cod:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
Cheia aici este adăugarea acestui element -> fundal-dimensiune: conțin;
Aici's ceea ce a lucrat pentru mine:
background-size: auto 100%;
Setarea de fundal, dimensiunea nu ajuta, următoarea soluție a lucrat pentru mine:
.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}
Practic culturi imaginea și de a face să se potrivească în, background-size: conțin/acoperi
încă n't se potrivi.