Achtergrondafbeelding van website aanpassen aan schermgrootte

Ik begin net aan een website en ik kom al een klein probleem tegen waar ik geen specifieke oplossing voor kan vinden.

Ik wilde de achtergrond van mijn website op elke schermgrootte in de breedte laten passen, de hoogte maakt niet uit.

Dit is de link naar mijn afbeelding:

   ../IMAGES/background.jpg

BEWERKEN

Ik heb geen idee wat er aan de hand is, maar om de een of andere reden wil het lichaam de achtergrondafbeelding niet eens krijgen. Het geeft alleen een effen witte achtergrond weer.

body
{background-image:url(../IMAGES/background.jpg);}

Antwoord 1, autoriteit 100%

u kunt dit doen met deze plug-in http://dev.andreaseberhard.de/jquery/superbgimage/

of

  background-image:url(../IMAGES/background.jpg);
   background-repeat:no-repeat;
   background-size:cover;

zonder de voorvoegsels van browsers. het staat allemaal klaar in beide browsers

Antwoord 2, autoriteit 37%

Probeer dit,

background: url(../IMAGES/background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Volg voor meer informatie deze Perfecte volledige pagina-achtergrondafbeelding!!

Antwoord 3, autoriteit 20%

Je kunt het proberen met

.appBackground {
    position: relative;
    background-image: url(".../img/background.jpg");
    background-repeat:no-repeat;
    background-size:100% 100vh;
}

Werkt voor mij 🙂

Antwoord 4, Autoriteit 7%

Probeer dit, ik hoop dat het zal helpen:

position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');

Antwoord 5, Autoriteit 3%

Probeer dit:

background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;

Antwoord 6, Autoriteit 3%

.. Ik vond dat de bovenstaande oplossingen niet voor mij werk werk (op de huidige versies van Firefox en Safari tenminste).

In mijn geval probeer ik het daadwerkelijk te doen met een IMG-tag, geen achtergrondafbeelding, hoewel het ook moet werken voor achtergrondafbeelding als u Z-Hoogte gebruikt:

<img  src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >

Dit schaalt de afbeelding om ‘volledig scherm’ te zijn (waarschijnlijk de beeldverhouding) die was wat ik wilde doen, maar had een moeilijke plek.

Het kan ook werken voor de achtergrondafbeelding, hoewel ik het opgaf het proberen van die vorm na cover / bevat niet voor mij.

Ik vond het gedrag vast te bevatten dat ik de documentatie niet kan matchen die ik overal kon vinden – ik begreep de documentatie om te zeggen bevatten dat de grootste dimensie in het scherm (onderhouden aspect) moet maken. Ik vond dat ik altijd mijn beeld tiny heb gemaakt (originele afbeelding was groot).

Bevatten was met sommige hacks dichter bij wat ik wilde dan dekking, die lijkt te zijn dat het aspect wordt gehandhaafd, maar beeld wordt geschaald om de kleinste dimensie overeen te komen met het scherm – dat wil zeggen het beeld altijd zo groot als het kan bijhouden Een van de dimensies zou offscreen gaan …

Ik heb een aantal verschillende dingen geprobeerd, die overbegrepen was, maar gevonden hoogte werd in wezen altijd genegeerd en zou overlopen. (Ik heb geprobeerd een niet-breedbeeldbeeld te schalen om op beide te zijn, gebroken aspect is OK voor mij). Kortom, het bovenstaande is wat voor mij werkte, hoop dat het iemand helpt.

Antwoord 7

Dit werkte voor mij:

body {
  background-image:url(../IMAGES/background.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Antwoord 8

body{
    background-image: url(".../img/background.jpg");
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
}

Antwoord 9

Probeer dit,

.appBg {
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}

Deze werkt voor mij

Antwoord 10

Achtergrondafbeelding op schermen met Browser Compatibiliteit CSS

.full-screen {
    height: 100%;
    width: 100%;
    background-image: url(../images/banner.jpg);
    background-size: cover;
    background-position: center;
    //for browser compatibility
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
}

Antwoord 11

Hoewel er antwoorden op dit zijn, maar omdat ik ooit een slachtoffer was van dit probleem en na een paar online zoeken was ik niet in staat om het op te lossen, maar mijn mede-hub-partner hielp me en ik voel me dat ik het gevoel had.
Voorbeelden uitgelegd hieronder.

Mappen: web-projects/project1/imgs-journey.png

background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;

Mijn belangrijkste punten is de punten daar als je opmerkte dat mijn reis.png zich bevindt in een IMGS-map van een andere map, dus je kunt de punt toevoegen aan de cijfers van het cijfers waar je afbeelding wordt opgeslagen. In mijn geval wordt mijn reis.png-afbeelding opgeslagen in twee mappen, daarom wordt er twee stip gebruikt, dus ik denk dat dit het probleem is van achtergrondafbeeldingen die niet soms in onze codes worden weergegeven. Bedankt.

Antwoord 12

width: 100%;
background-image: url("images/bluedraw.jpg");   
background-size: cover;

Antwoord 13

je kunt het doen zoals wat ik heb gedaan met mijn website:

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

Antwoord 14

background: url("../image/b21.jpg") no-repeat center center fixed;
background-size: 100% 100%;
height: 100%;
position: absolute; 
width: 100%;