Jeg har
body {
background: url(images/background.svg);
}
Den ønskede effekt er, at dette baggrundsbillede vil have en bredde, der er lig med sidens bredde, og en højde, der ændrer sig for at bevare proportioner. Hvis det originale billede f.eks. er 100*200 (alle enheder) og kroppen er 600px bred, skal baggrundsbilledet ende med at være 1200px højt. Højden bør ændres automatisk, hvis vinduet ændres i størrelse. Er dette muligt?
I øjeblikket ser Firefox ud som om den's gør højden passer og derefter justerer bredden. Er det måske fordi højden er den længste dimension, og den forsøger at undgå beskæring? Jeg vil beskære lodret og derefter scrolle: ingen vandret gentagelse.
Desuden placerer Chrome billedet i midten, ingen gentagelse, selv når background-repeat:repeat
er angivet eksplicit, hvilket alligevel er standard.
Der findes en CSS3-egenskab til dette, nemlig background-size
(kompatibilitetskontrol). Selv om man kan indstille længdeværdier, bruges den normalt sammen med de særlige værdier contain
og cover
. I dit specifikke tilfælde bør du bruge cover
:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
og cover
Undskyld det dårlige ordspil, men jeg vil bruge dagens billede af Biswarup Ganguly til demonstration. Lad os sige, at dette er din skærm, og det grå område er uden for din synlige skærm. Til demonstration vil jeg antage et 16x9-forhold.
Vi ønsker at bruge det førnævnte billede af dagen som baggrund. Vi har dog beskåret billedet til 4x3 af en eller anden grund. Vi kunne indstille egenskaben background-size
til en eller anden fast længde, men vi vil fokusere på contain
og cover
. Bemærk, at jeg også antager, at vi ikke har manglet bredden og/eller højden af body
.
contain
indeholde Skalerer billedet, samtidig med at dets iboende formatforhold (hvis der er et sådant) bevares, til den største størrelse, så både dets bredde og højde kan passe inden for baggrundspositioneringsområdet.
Dette sikrer, at baggrundsbilledet altid er helt indeholdt i baggrundspositioneringsområdet, men der kan dog være noget tomt rum, der i dette tilfælde er fyldt med din background-color
:
cover
cover Skalerer billedet, samtidig med at dets iboende formatforhold (hvis der er et sådant) bevares, til den mindste størrelse, så både dets bredde og højde kan dække baggrundspositioneringsområdet fuldstændigt.
Dette sikrer, at baggrundsbilledet dækker alt. Der vil ikke være nogen synlig baggrundsfarve
, men afhængigt af skærmens forhold kan en stor del af dit billede blive afskåret:
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>
Baseret på tips fra https://developer.mozilla.org/en-US/docs/CSS/background-size endte jeg med følgende opskrift, som fungerede for mig
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;
}
Jeg er ikke sikker på, hvad du leder efter, men du bør virkelig tjekke disse fremragende blogindlæg skrevet af Chris Coyier fra CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Læs beskrivelserne for hver af artiklerne og se, om de er det, du leder efter.
Den første svarer på følgende spørgsmål:
Er der en måde at gøre et baggrundsbillede størrelsesændrende på? Som i, at fylde baggrunden på en webside kant til kant med et billede, uanset størrelsen af browservinduet. Også få det til at ændre størrelsen større eller mindre, når browservinduet ændres. Sørg også for, at det bevarer sit forhold (ikke strækker sig underligt). Det giver heller ikke scrollbars, men skærer bare lodret af, hvis det er nødvendigt. Desuden kommer det ind på siden som et inline tag.
Den anden post's mål er at få følgende, et "baggrundsbillede på et websted, der dækker hele browservinduet hele tiden. "
Håber dette hjælper.