De grootte van de achtergrondafbeelding regelen met behulp van css. Responsieve achtergrondafbeeldingen

De resolutie van monitoren groeit voortdurend en bij het opmaken van webpagina's moeten we rekening houden met het breedste scala aan resoluties. Dit is vooral belangrijk bij gebruik achtergrondafbeelding, die óf wordt afgebroken als de monitorresolutie laag is, óf, omgekeerd, niet helemaal past hoge resolutie. Een oplossing voor deze situatie is het schalen van de achtergrond. Dit belooft natuurlijk wat problemen, zoals het verschijnen van vervormingen en artefacten in afbeeldingen, maar het breidt ook het arsenaal aan lay-outtools uit.

De grootte wordt bepaald door de eigenschap background-size; de ​​waarde kan worden opgegeven trefwoord cover , dan zal de afbeeldingsgrootte zodanig zijn dat de breedte en hoogte in het opgegeven gebied passen (bijvoorbeeld een webpaginavenster); Het trefwoord contain schaalt de afbeelding zodat ten minste één zijde van de afbeelding volledig in het opgegeven gebied past. Bovendien is het acceptabel om expliciete horizontale of verticale dimensies in procenten of andere aan te geven CSS-eenheden. In afb. 1 toont de verandering in afbeeldingsgrootten wanneer verschillende betekenissen achtergrondgrootte. Grijs er wordt een blok van 280x200 pixels geselecteerd, waarbinnen de achtergrond wordt ingesteld.

Rijst. 1. Type achtergrondafbeeldingen, afhankelijk van de waarde van de achtergrondgrootte

Als er twee maatwaarden worden opgegeven, gescheiden door een spatie, bepaalt de eerste waarde de horizontale breedte en de tweede de verticale breedte. In dit geval worden de verhoudingen genegeerd, wat duidelijk zichtbaar is in Fig. 1 jaar In plaats van een van de formaten is het toegestaan ​​om het trefwoord auto te gebruiken, waarna de browser dit automatisch berekent op basis van de verhoudingen van de afbeelding.

Voorbeeld 1 stelt een achtergrondfoto in die het hele browservenster beslaat.

Voorbeeld 1. Achtergrondafbeelding

Resultaat dit voorbeeld getoond in afb. 2. Naarmate u het formaat van het venster wijzigt, wordt de foto groter of kleiner zodat deze de hele webpagina vult.

Vertaling: Vlad Merzjevitsj

In CSS 2.1 behoudt een achtergrondafbeelding die op een container wordt toegepast de oorspronkelijke afbeelding vaste maten. Gelukkig heeft CSS3 de eigenschap background-size geïntroduceerd, waarmee de achtergrond kan worden uitgerekt of gecomprimeerd. Het is ideaal als u een responsieve webontwerpsjabloon maakt.

Er zijn verschillende manieren om formaten te definiëren - kijk eens op de demopagina voor achtergrondgrootte.

Absoluut formaat wijzigen

Er kunnen meeteenheden van toepassing zijn.

Achtergrondgrootte: breedte-hoogte;

Standaard zijn breedte en hoogte ingesteld op auto , wat blijft staan originele afmetingen Afbeeldingen.

Je kunt vragen nieuwe maat afbeeldingen gebruiken absolute eenheden afmetingen zoals px, em, cm, etc. De verhoudingen zullen indien nodig veranderen. Als onze achtergrondafbeelding bijvoorbeeld afmetingen heeft van 200x200 pixels, laat de volgende code deze hoogte behouden, maar wordt de breedte half zo groot:

Achtergrondgrootte: 100px 200px;

Als er slechts één waarde is opgegeven, wordt deze beschouwd als de breedte. De hoogte is ingesteld op automatisch en de verhoudingen blijven behouden:

Achtergrondgrootte: 100px; /* vergelijkbaar */ achtergrondgrootte: 100px auto;

Deze code schaalt de afbeelding van 200x200 naar 100x100 pixels.

Relatieve grootteverandering via percentages

Als percentages worden toegepast, zijn de afmetingen gebaseerd op het element en NIET op de afbeelding:

Achtergrondgrootte: 50% automatisch;

De breedte van de achtergrondafbeelding is dus afhankelijk van de afmetingen van de container. Als de container een breedte van 500px heeft, wordt de grootte van onze afbeelding verkleind naar 250x250.

Het gebruik van percentages kan nuttig zijn adaptief ontwerp. Wijzig de breedte van de demopagina om te zien hoe de afmetingen veranderen.

Schalen naar maximale grootte

De eigenschap background-size begrijpt ook het trefwoord contain. Het schaalt de afbeelding zodat deze de container vult. Met andere woorden: de afbeelding zal proportioneel groeien of krimpen, maar de breedte en hoogte zullen de afmetingen van de container niet overschrijden:

Achtergrondgrootte: bevatten;

Vul met achtergrond

De eigenschap background-size begrijpt ook het trefwoord cover. De afbeelding wordt geschaald om de hele container te vullen, maar als de beeldverhoudingen verschillend zijn, wordt de afbeelding bijgesneden.

Achtergrondformaat: omslag;

Meerdere achtergronden schalen

Meerdere achtergronden kunnen worden geschaald met behulp van een door komma's gescheiden lijst met waarden in dezelfde volgorde.

Achtergrond: url("sheep.png") 60% 90% niet-herhaling, url("sheep.png") 40% 50% niet-herhaling, url("sheep.png") 10% 20% niet-herhaling # 393; achtergrondgrootte: 240px 210px, automatisch, 150px;

Werken in browsers

De nieuwste versies van alle browsers ondersteunen achtergrondgrootte zonder voorvoegsels.

IE8 en lager ondersteunen deze eigenschap niet. Je kunt een IE-filter gebruiken om de inhoud en omslagwaarden te emuleren, maar het is onmogelijk om het formaat van de achtergrondafbeelding te wijzigen zonder trucs te gebruiken zoals het toevoegen van echte foto achter andere elementen. Het is rommelig, dus ik raad een sierlijke degradatie aan.

De resolutie van monitoren groeit voortdurend en bij het opmaken van webpagina's moeten we rekening houden met het breedste scala aan resoluties. Dit is vooral belangrijk bij het gebruik van een achtergrondafbeelding, die bij een lage monitorresolutie wordt afgekapt of juist bij een hoge resolutie niet helemaal past. Een oplossing voor deze situatie is het schalen van de achtergrond. Dit belooft natuurlijk wat problemen, zoals het verschijnen van vervormingen en artefacten in afbeeldingen, maar het breidt ook het arsenaal aan lay-outtools uit.

De eigenschap background-size is verantwoordelijk voor het regelen van de grootte; het trefwoord cover kan als waarde worden opgegeven, waarna de afbeeldingsgrootte zodanig is dat de breedte en hoogte in het opgegeven gebied passen (bijvoorbeeld een webpaginavenster); Het trefwoord 'bevatten' schaalt de afbeelding zodat ten minste één zijde van de afbeelding volledig in het opgegeven gebied past. Het is ook acceptabel om expliciete horizontale of verticale afmetingen op te geven in percentages of andere CSS-eenheden. In afb. Figuur 1 laat zien hoe afbeeldingen in grootte veranderen voor verschillende achtergrondgroottewaarden. Een blok van 280x200 pixels wordt grijs gemarkeerd, waarbinnen de achtergrond wordt ingesteld.

Rijst. 1. Type achtergrondafbeeldingen, afhankelijk van de waarde van de achtergrondgrootte

Als er twee maatwaarden worden opgegeven, gescheiden door een spatie, bepaalt de eerste waarde de horizontale breedte en de tweede de verticale breedte. In dit geval worden de verhoudingen genegeerd, wat duidelijk zichtbaar is in Fig. 1 jaar In plaats van een van de formaten is het toegestaan ​​om het trefwoord auto te gebruiken, waarna de browser dit automatisch berekent op basis van de verhoudingen van de afbeelding.

Voorbeeld 1 stelt een achtergrondfoto in die het hele browservenster beslaat. Om dit te doen, moest ik de hoogte van html en body instellen op 100%.

Voorbeeld 1. Achtergrondafbeelding

HTML5 CSS3 IE 9+ Cr Op Sa 5 Fx

De achtergrond bevat ook een verloop, dat ook kan worden geschaald, waardoor een verscheidenheid aan effecten wordt verkregen. Voeg bijvoorbeeld achtergrondgrootte toe aan lineaire gradiënt, laten we het herhalen, waardoor afwisselende verloopstrepen ontstaan ​​(voorbeeld 2).

Voorbeeld 2. Verticale strepen

Het resultaat van het voorbeeld wordt getoond in Fig. 2.

Rijst. 2. Verticale verloopstrepen

Verticale en horizontale strepen kunnen niet alleen met een verloop worden gemaakt, maar ook met duidelijke randen. Om dit te doen, moet u vier kleuren opgeven in de verloopparameters: van 0 tot 50% van de kleur van de eerste streep en van 50% tot 100% van de kleur van de tweede streep. Je hoeft de eerste kleur niet met 0% en de laatste kleur met 100% te schrijven, deze worden automatisch door de browser toegevoegd, dus we beperken ons tot slechts twee waarden. Voorbeeld 3 laat zien hoe u een creatie maakt horizontale strepen 50 pixels hoog.

Voorbeeld 3: Horizontale strepen

HTML5 CSS3 IE 10+ Cr Op Sa Fx

Het resultaat van dit voorbeeld wordt getoond in Fig. 3.

Rijst. 3. Horizontale strepen

Omdat u meerdere achtergronden tegelijk kunt toevoegen, waarbij u de parameters ervan gescheiden door komma's opsomt, kunt u hetzelfde doen met verlopen. Slechts één van de kleuren mag doorschijnend zijn, anders overlappen de verlopen elkaar. Voorbeeld 4 gebruikt twee verlopen voor de achtergrond van de webpagina, die elkaar in een rechte hoek kruisen, waardoor in combinatie met de achtergrondgrootte cellen ontstaan.

Voorbeeld 4. Twee gradiënten

HTML5 CSS3 IE Cr Op Sa Fx

Het resultaat van dit voorbeeld wordt getoond in Fig. 4.

Rijst. 4. Cellen

Door de combinatie van een verloop en de eigenschap achtergrondgrootte kunt u een grote verscheidenheid aan achtergrondvullingen maken zonder achtergrondafbeeldingen te gebruiken.

Webtechnologieën staan, net als verschillende soorten trends in design, niet stil, dus elke keer verschijnen er enkele originele kenmerken en nuances voor websites. Eén van deze ‘richtingen’ is het gebruik van een achtergrond (backgorund), die zich in breedte en hoogte over het gehele scherm uitstrekt. Ik vertelde zoiets als ongeveer een jaar of langer geleden - de afbeelding werd in de blogkop geplaatst en soepel "overgegaan" naar de hoofdpagina Achtergrond kleur webpagina's. Als je wilt, kun je zelfs toevoegen.

Het plaatsen van een grote schaalbare afbeelding als achtergrond is iets nieuws en complexer, de oplossing waarvoor ik in dit artikel heb gevonden.

Doel deze les op de website plaatsen achtergrondafbeelding, die permanent de volledige achtergrond van het browservenster zou bedekken. Wat moet er precies gebeuren:

• vul de hele pagina met één afbeelding zonder spaties;
• wijzig het formaat van de afbeelding indien nodig (het browservenster verkleinen);
• het behouden van beeldverhoudingen;
• positionering van de afbeelding in het midden van de pagina;
• gebrek aan schuifbalken op de pagina;
• cross-browser oplossing geschikt voor verschillende browsers;
• implementatie zonder technologieën van derden, zoals flash.

Er zijn dus verschillende geschikte oplossingen voor een website-achtergrond op volledig scherm.

Een prachtige, eenvoudige en vooruitstrevende oplossing met behulp van CSS3

Om deze taak te volbrengen, kunnen we de eigenschap background-size in CSS3 gebruiken. We zullen een html-element gebruiken dat beter is dan body. Laten we instellen dat de achtergrond vast en gecentreerd is, en vervolgens de waarde cover in de achtergrondgrootte gebruiken.

html (achtergrond: url(images/bg.jpg) centrum zonder herhaling midden vast; -webkit-achtergrondgrootte: omslag; -moz-achtergrondgrootte: omslag; -o-achtergrondgrootte: omslag; achtergrondgrootte: omslag)

De oplossing wordt ondersteund door bijna alle populaire op het netwerk:

• Firefox 3.6+ (Firefox 4 ondersteunt een versie zonder voorvoegsel van de leverancier)
• Opera 10+ (Opera 9.5 ondersteunt achtergrondgrootte maar zonder de omslagwaarde)
• Chroom Wat dan ook+
• DWZ 9+
• Safari3+

Een zekere Goltzman heeft een oplossing gevonden waardoor de hack in IE kan werken

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”.myBackground.jpg”, sizingMethod=”scale”); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="mijnachtergrond.jpg", sizingMethod="scale"");

Maar aandacht!!! dit kan problemen veroorzaken met de links op de pagina. Trouwens, even later voegde Matt Litherland eraan toe dat de code in principe wel kan worden gebruikt, maar hiervoor niet kan worden gebruikt html-elementen of body, maar je moet alles implementeren via een div met 100% hoogte en breedte.

CSS-hack nummer 1

Een alternatieve versie wordt gepresenteerd door Doug Neiner. In dit geval wordt een element gebruikt dat in de pagina is ingebed , waarvan het formaat in elke browser kan worden aangepast. We stellen de minimale hoogtewaarde in, die het browservenster verticaal vult, en stellen de breedte in op 100%, waardoor de pagina horizontaal wordt gevuld. We stellen ook de minimale breedte in, zodat de afbeelding nooit kleiner is dan deze in werkelijkheid is.

img.bg ( /* Stel regels in om de achtergrond te vullen */ min-height: 100%; min-width: 1024px; /* Stel proportionele schaling in */ breedte: 100%; hoogte: auto; /* Positionering instellen */ positie: vaste bovenkant: 0; links: 0; ) @mediascherm en (max. breedte: 1024px) ( /* Specifiek voor deze specifieke afbeelding */ img.bg (links: 50%; marge-links: -512px; / * 50% */ ) )

Werkt in elke versie kwaliteit browsers- Safari/Opera/Firefox en Chrome. Zoals altijd heeft IE zijn eigen nuances:

• IE 9 - werken;
• IE 7/8 - functioneert meestal correct, maar centreert geen afbeeldingen die kleiner zijn dan het browservenster;
• IE 6 - kan worden aangepast, maar wie heeft deze browser toch nodig?

CSS-hackoptie 2

Een andere optie om het probleem op te lossen met behulp van CSS-stijlen is het plaatsen van een inline afbeelding op de pagina met een vaste positie aan de linkerkant bovenste hoek en stel vervolgens de minimale breedte en minimale hoogte in op 100%, waarbij de verhoudingen behouden blijven.

#bg ( positie:vast; boven:-50%; links:-50%; breedte:200%; hoogte:200%; ) #bg img ( positie:absoluut; boven:0; links:0; rechts:0; onderkant: 0; marge: automatisch; minimale breedte: 50%; minimale hoogte: 50% )

De hack werkt in:

• Safari/Chrome/Firefox (ook vroege versies niet getest, maar werkt goed in de nieuwste versies)
• IE 8+
• Opera (elke versie) en samen met IE bevatten beide op dezelfde manier fouten met een positioneringsfout.

Methode met jQuery

Deze optie is veel eenvoudiger (vanuit CSS-oogpunt) als we weten dat de beeldverhouding van de afbeelding (img gebruikt als achtergrond) groter of kleiner is dan de huidige beeldverhouding van het browservenster. Als dit minder is, kunnen we alleen breedte = 100% gebruiken en wordt het venster in breedte en hoogte gelijkmatig gevuld. Indien meer, kunt u alleen hoogte = 100% opgeven om het hele venster te vullen.

Alle gegevens zijn toegankelijk via JavaScript, de gebruikte codes zijn als volgt:

#bg ( positie: vast; boven: 0; links: 0; ) .bgwidth ( breedte: 100%; ) .bgheight ( hoogte: 100%; )

$(window).load(function() ( var theWindow = $(window), $bg = $("#bg'), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( if ((deVenster.breedte() /deVenster.hoogte())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Naar mijn mening wordt centreren in dit geval niet uitgevoerd (voor zover ik het begrijp), maar het kan wel worden gedaan. De meeste desktopbrowsers worden ondersteund, inclusief IE7+. Ten slotte heeft de auteur van het artikel over hacks een reeks voorbeeldbestanden opgesteld waarin dit allemaal is geïmplementeerd - u kunt deze downloaden. De commentaren op het originele artikel bevatten ook wat informatie en discussie, hoewel de auteur de meeste belangrijke details in de vorm van instructies aan het bericht heeft toegevoegd en ik ze ook heb laten vertalen en aangeven. Natuurlijk zullen voorbeelden u helpen dit allemaal te begrijpen. Over het algemeen zouden alle genoemde hacks ideaal zijn als de constante "grappen" van IE7 er niet waren geweest.

P.S. Wil je een boek kopen? - je hoeft niet naar de winkel, want dankzij een online boekwinkel kun je nu alles online doen - kiezen, betalen en thuisbezorgen regelen.