105 views

Strek en schaal een CSS-afbeelding op de achtergrond – met alleen CSS

Hosted by Code Expert
.net

Ik wil dat mijn achtergrondafbeelding wordt uitgerekt en geschaald, afhankelijk van de grootte van de viewport van de browser.

Ik heb een aantal vragen over Stack Overflow gezien die het werk doen, zoals Rek en schaal bijvoorbeeld CSS-achtergrond. Het werkt goed, maar ik wil de afbeelding plaatsen met behulp van background, niet met een img-tag.

In die ene wordt een img-tag geplaatst, en dan met CSS brengen we een eerbetoon aan de img-tag.

width:100%; height:100%;

Het werkt, maar die vraag is een beetje oud en stelt dat in CSS 3 het formaat van een achtergrondafbeelding redelijk goed zal werken. Ik heb dit voorbeeld de eerste, maar het werkte niet voor mij.

Is er een goede methode om dit te doen met de background-image-declaratie?

Antwoord 1, autoriteit 100%

CSS3 heeft een leuk attribuut genaamd background-size:cover.

Hiermee wordt de afbeelding geschaald zodat het achtergrondgebied volledig wordt bedekt door de achtergrondafbeelding, terwijl de beeldverhouding behouden blijft. Het hele gebied zal worden gedekt. Een deel van de afbeelding is echter mogelijk niet zichtbaar als de breedte/hoogte van de gewijzigde afbeelding te groot is.

Antwoord 2, autoriteit 43%

Je zou de CSS3-eigenschap kunnen gebruiken om het heel mooi te doen. Het formaat wordt aangepast aan de verhouding, dus geen beeldvervorming (hoewel het kleine afbeeldingen wel opschaalt). Houd er rekening mee dat het nog niet in alle browsers is geïmplementeerd.

background-size: 100%;

Antwoord 3, autoriteit 17%

Met behulp van de code die ik noemde…

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
    width:100%;
    height:100%;
}

Dat geeft het gewenste effect: alleen de inhoud zal scrollen, niet de achtergrond.

Het formaat van de achtergrondafbeelding wordt aangepast aan de browserviewport voor elk schermformaat. Als de inhoud niet in de viewport van de browser past en de gebruiker door de pagina moet scrollen, blijft de achtergrondafbeelding vast in de viewport terwijl de inhoud schuift.

Met CSS 3 lijkt dit een stuk eenvoudiger te zijn.

Antwoord 4, autoriteit 16%

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

Antwoord 5, autoriteit 5%

background-size: 100% 100%;

rekt de achtergrond om het hele element op beide assen te vullen.

Antwoord 6, autoriteit 4%

Het volgende CSS-gedeelte zou de afbeelding met alle browsers moeten uitrekken.

Ik doe dit dynamisch voor elke pagina. Daarom gebruik ik PHP om voor elke pagina een eigen HTML-tag te genereren. Alle foto’s staan ​​in de map ‘image’ en eindigen op ‘Bg.jpg’.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Als u slechts één achtergrondafbeelding voor alle pagina’s heeft, kunt u de variabele $pic verwijderen, escaping back-slashes verwijderen, paden aanpassen en deze code in uw CSS-bestand plaatsen.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Dit is getest met Internet Explorer 9, Chrome 21 en Firefox 14.

Antwoord 7, autoriteit 2%

Gebruik deze CSS:

background: url('img.png') no-repeat; 
background-size: 100%;

Antwoord 8, autoriteit 2%

Je kunt hetzelfde effect bereiken als een achtergrondafbeelding met de img-tag. Je hoeft alleen de z-index lager in te stellen dan al het andere, position:absolute in te stellen en een transparante achtergrond te gebruiken voor elk vak op de voorgrond.

Antwoord 9

Je kunt deze klasse toevoegen aan je CSS-bestand.

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Het werkt in:

  • Safari 3 of hoger
  • Chrome Wat of later
  • Internet Explorer 9 of hoger
  • Opera 10 of hoger (Opera 9.5 ondersteunde background-size, maar niet de zoekwoorden)
  • Firefox 3.6 of hoger (Firefox 4 ondersteunt versie met prefix van niet-leverancier)

Antwoord 10

Het wordt verklaard door CSS-trucs: Perfecte volledige pagina-achtergrond Afbeelding

Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive .php

Code:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Antwoord 11

Gebruik het volgende om uw afbeeldingen op de juiste manier te schalen op basis van de containergrootte:

background-size: contain;
background-repeat: no-repeat;

Antwoord 12

Ik gebruik dit en het werkt met alle browsers:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}
            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="https://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>

Antwoord 13

Ik wilde een achtergrondafbeelding centreren en schalen, zonder deze uit te rekken tot de hele pagina, en ik wilde dat de beeldverhouding behouden bleef. Dit werkte voor mij, dankzij de variaties die in andere antwoorden werden gesuggereerd:

INLINE AFBEELDING: ————————

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ———————————-

html {
    height:100%;
}
#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}
.stretch {
    margin: auto;
    height:100%;
}

Antwoord 14

Bedankt!

Maar toen werkte het niet voor de Google Chrome en Safari browsers (uitrekken werkte, maar de hoogte van de foto’s was slechts 2 mm!), totdat iemand me vertelde wat er ontbreekt:

Probeer height:auto;min-height:100%;

in te stellen

Dus verander dat voor uw height:100%; regel, geeft:

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}
.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

Net voor die nieuw toegevoegde code heb ik dit in mijn Drupal Tendu thema’s style.css:

html, body{height:100%;}

#pagina{achtergrond:#ffffff; hoogte:auto !belangrijk;hoogte:100%;min-hoogte:100%;positie:relatief;}

Vervolgens moet ik een nieuw blok maken binnen Drupal met de afbeelding terwijl ik class=stretch toevoeg:

< img alt=”” class=”stretch” src=”pic.url” />

Alleen een afbeelding kopiëren met de editor in dat Drupal-blok werkt niet; men moet de editor veranderen in niet-opgemaakte tekst.

Antwoord 15

Ik ben het eens met de afbeelding in absolute div met 100% breedte en hoogte. Zorg ervoor dat u 100% breedte en hoogte voor de body in de CSS instelt en zet de marges en opvulling op nul. Een ander probleem dat u bij deze methode zult tegenkomen, is dat bij het selecteren van tekst het selectiegebied soms de achtergrondafbeelding kan omvatten, wat het ongelukkige effect heeft dat de volledige pagina de geselecteerde staat krijgt. U kunt dit omzeilen door de CSS-regel user-select:none te gebruiken, zoals:

<html>
    <head>
        <style type="text/css">
            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }
            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }
            #background img {
                width: 100%;
                height: 100%;
            }
            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Nogmaals, Internet Explorer is hier de slechterik, omdat het de optie voor het selecteren van de gebruiker niet herkent – zelfs niet Internet Explorer 10 preview ondersteunt dit, dus u kunt ofwel JavaScript gebruiken om selectie van achtergrondafbeeldingen te voorkomen (bijvoorbeeld http://www.felgall.com/jstip35.htm ) of met behulp van CSS 3 background-stretch-methode.

Ook voor SEO zou ik de achtergrondafbeelding onderaan de pagina plaatsen, maar als het laden van de achtergrondafbeelding te lang duurt (dat wil zeggen, aanvankelijk met een witte achtergrond), kunt u naar de bovenkant van de pagina gaan.

Antwoord 16

Ik heb een combinatie van de background-X CSS-eigenschappen gebruikt om de ideale schaalachtergrondafbeelding te verkrijgen.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Hierdoor beslaat de achtergrond altijd het hele browservenster en blijft deze gecentreerd bij het schalen.

Antwoord 17

Gebruik de Backstretch-plug-in. Men zou zelfs meerdere afbeeldingen kunnen laten schuiven. Het werkt ook binnen containers. Op deze manier zou men bijvoorbeeld slechts een deel van de achtergrond kunnen bedekken met een achtergrondafbeelding.

Omdat zelfs ik het aan het werk kon krijgen, blijkt het een eenvoudig te gebruiken plug-in te zijn :).

Antwoord 18

Als je de inhoud horizontaal gecentreerd wilt hebben, gebruik dan een combinatie als deze:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Dit ziet er prachtig uit.

Antwoord 19

Het volgende werkte voor mij.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

die werkte om de hele achtergrond op verschillende dimensies te bedekken

Antwoord 20

Gebruik deze CSS:

background-size: 100% 100%

Antwoord 21

U kunt de eigenschap border-image : yourimage gebruiken om de afbeelding tot aan de rand te schalen. Zelfs als je de achtergrondafbeelding geeft, wordt de randafbeelding eroverheen getekend.

De eigenschap border-image is erg handig als je stylesheet ergens is geïmplementeerd die geen CSS 3 ondersteunt. Als je Google Chrome of Firefox gebruikt, raad ik de eigenschap background-size:cover zelf aan.

Antwoord 22

Wilt u dit bereiken met slechts één afbeelding? Omdat je met twee afbeeldingen eigenlijk iets vergelijkbaars kunt maken met een uitrekkende achtergrond. PNG-afbeeldingen bijvoorbeeld.

Ik heb dit eerder gedaan en het is niet zo moeilijk. Bovendien denk ik dat uitrekken de kwaliteit van de achtergrond alleen maar zou schaden. En als je een enorme afbeelding toevoegt, zou dat trage computers en browsers vertragen.

Previous articleHoe een jQuery If else-instructie te schrijven?
Next articleC++ verwachte primaire expressie vóór ‘ ‘

LEAVE A REPLY

Please enter your comment!
Please enter your name here

four − two =

Other episodes

Hoe krijg ik de Stack-tracering bij het loggen van uitzonderingen met NLLog?

.net Code Expert - 0
Als ik de standaardlay-out gebruik met NLog, wordt alleen de naam van de uitzondering afgedrukt. Mij ​​is verteld dat de log4jxmlvent-lay-out niets over de uitzondering...
Read more

Hoe los ik een VSTO-add-in op die niet laadt?

.net Code Expert - 0
Mijn VSTO Outlook-invoegtoepassing werkte plotseling niet meer op de computer van één klant (hij laadt niet, geen foutmelding) en ik zit vast met het...
Read more

Waar is MSBuild.exe geïnstalleerd in Windows wanneer geïnstalleerd met BuildTools_Full.exe?

.net Code Expert - 0
Ik probeer een build-server voor .NET in te stellen, maar ik kan er niet achter komen waar MSBuild.exe is geïnstalleerd. Ik probeer MSBuild te installeren...
Read more

Nuget-verbindingspoging mislukt “Kan de service-index voor bron niet laden”

.net Code Expert - 0
Terwijl ik probeer verbinding te maken met Nuget, krijg ik de onderstaande foutmelding en kan ik geen verbinding maken: Kan de service-index voor de...
Read more

OAuth met verificatie in .NET

.net Code Expert - 0
Ik probeer een op .NET gebaseerde client-app te maken (in WPF - hoewel ik het voorlopig alleen doe als een console-app) om te integreren...
Read more

Hoe kan ik zien in welke staat ManualResetEvent zich bevindt?

.net Code Expert - 0
Ik gebruik een instantie van ManualResetEventom threadtoegang tot een bron te regelen, maar ik ondervind er problemen mee. Weet iemand hoe ik er tijdens...
Read more

Een enumwaarde doorgeven als opdrachtparameter vanuit XAML

.net Code Expert - 0
Ik wil een enum-waarde doorgeven als opdrachtparameter in WPF, met zoiets als dit: <Button x:Name="uxSearchButton" Command="{Binding Path=SearchMembersCommand}"...
Read more

© Copyright - Code Expert 2021