Ik heb
body {
background: url(images/background.svg);
}
Het gewenste effect is dat deze achtergrondafbeelding een breedte heeft die gelijk is aan die van de pagina, waarbij de hoogte verandert om de proportie te behouden. Bijvoorbeeld, als de originele afbeelding 100*200 (willekeurige eenheden) is en de body is 600px breed, dan moet de achtergrondafbeelding uiteindelijk 1200px hoog zijn. De hoogte moet automatisch veranderen als het venster wordt verkleind. Is dit mogelijk?
Op dit moment lijkt het alsof Firefox de hoogte passend maakt en dan de breedte aanpast. Is dit misschien omdat de hoogte de langste dimensie is en het probeert bijsnijden te voorkomen? Ik wil verticaal bijsnijden en dan scrollen: geen horizontale herhaling.
Ook plaatst Chrome de afbeelding in het midden, zonder herhaling, zelfs als background-repeat:repeat
expliciet is opgegeven, wat sowieso de standaard is.
Hier is een CSS3 eigenschap voor, namelijk background-size
(compatibiliteitscontrole). Hoewel men lengte waarden kan instellen, wordt het meestal gebruikt met de speciale waarden contain
en cover
. In uw specifieke geval moet u cover
gebruiken:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
en cover
Sorry voor de slechte woordspeling, maar ik'ga de foto van de dag door Biswarup Ganguly gebruiken voor demonstratie. Laten we zeggen dat dit uw scherm is, en het grijze gebied is buiten uw zichtbare scherm. Voor demonstratie ga ik uit van een 16x9 verhouding.
We willen de eerder genoemde foto van de dag gebruiken als achtergrond. We hebben het plaatje echter om een of andere reden bijgesneden tot 4x3. We zouden de background-size
eigenschap op een vaste lengte kunnen zetten, maar we zullen ons richten op contain
en cover
. Merk op dat ik er ook van uitga dat we de breedte en/of hoogte van body
niet verwisseld hebben.
contain
bevatten Schaal de afbeelding, met behoud van zijn intrinsieke aspect ratio (als die er is), naar de grootste grootte zodat zowel zijn breedte als zijn hoogte binnen het achtergrond positioneringsgebied passen.
Dit zorgt ervoor dat de achtergrond afbeelding altijd volledig binnen het achtergrond plaatsingsgebied valt, echter, er kan wat lege ruimte zijn gevuld met uw achtergrondkleur
in dit geval:
cover
bedekken Schaal de afbeelding, met behoud van de intrinsieke hoogte-breedteverhouding (als die er is), tot de kleinste afmeting zodat zowel de breedte als de hoogte het achtergrond-positioneringsgebied volledig kan bedekken.
Dit zorgt ervoor dat de achtergrond afbeelding alles bedekt. Er zal geen zichtbare achtergrondkleur
zijn, maar afhankelijk van de schermverhouding zou een groot deel van je afbeelding afgesneden kunnen worden:
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>
Op basis van tips van https://developer.mozilla.org/en-US/docs/CSS/background-size kwam ik uit op het volgende recept dat voor mij werkte
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;
}
Ik weet niet zeker waar je precies naar op zoek bent, maar je moet echt eens kijken naar deze uitstekende blog posts geschreven door Chris Coyier van CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Lees de beschrijvingen van elk van de artikelen en kijk of ze'zijn wat u zoekt.
Het eerste beantwoordt de volgende vraag:
Is er een manier om een achtergrondafbeelding resizeable te maken? Als in, vul de achtergrond van een webpagina van rand tot rand met een afbeelding, ongeacht de grootte van het browservenster. Laat het ook groter of kleiner worden als het browservenster verandert. Zorg er ook voor dat het zijn verhouding behoudt (niet raar uitrekt). Veroorzaakt ook geen scrollbars, maar snijdt gewoon verticaal af als dat nodig is. Komt ook op de pagina als een inline tag.
De tweede post's doel is om het volgende te krijgen, een "achtergrondafbeelding op een website die het hele browservenster te allen tijde bedekt. "
Hoop dat dit helpt.