Een achtergrondafbeelding centreren met CSS

Ik wil een achtergrondafbeelding centreren. Er wordt geen div gebruikt, dit is de CSS-stijl:

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

De bovenstaande CSS-tegels zijn overal en centreren het, maar de helft van de afbeelding wordt niet gezien, het beweegt gewoon een beetje omhoog. Wat ik wil doen is het beeld centreren. Kan ik de afbeelding overnemen om ze zelfs op een 21-inch scherm te bekijken?


Antwoord 1, autoriteit 100%

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

Dat zou moeten werken.

Zo niet, waarom maakt u geen divmet de afbeelding en gebruikt u z-indexom er de achtergrond van te maken? Dit zou veel gemakkelijker te centreren zijn dan een achtergrondafbeelding op het lichaam.

Probeer anders:

background-position: 0 100px;/*use a pixel value that will center it*/Of ik denk dat je 50% kunt gebruiken als je je lichaam min-heightnaar 100%.

body{
    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

Antwoord 2, autoriteit 7%

Ik gebruik deze code, het werkt goed

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(back2.png) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Antwoord 3, autoriteit 5%

Ik denk dat ditis wat we willen:

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
} 

Antwoord 4, autoriteit 2%

Probeer

background-position: center center;

Antwoord 5, autoriteit 2%

Zoals dit:

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;

html{
height:100%
}
body{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}

Antwoord 6

Probeer deze background-position: center top;

Dit zal het voor je doen.


Antwoord 7

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

Centraalt de achtergrondafbeelding niet verticaal bij gebruik van een html 4.01 ‘STRIKT’ doctype.

Toevoegen:

background-attachment: fixed;

Zou het probleem moeten oplossen

(Dus Alexander heeft gelijk)


Antwoord 8

gewoon vervangen

background-image:url(../images/images2.jpg) no-repeat;

met

background:url(../images/images2.jpg)  center;

Antwoord 9

Als u niet tevreden bent met de bovenstaande antwoorden, gebruik dan deze

   * {margin: 0;padding: 0;}
    html
    {
        height: 100%;
    }
    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

Antwoord 10

Heb hetzelfde probleem gehad. Gebruikte weergave- en marge-eigenschappen en het werkte.

.background-image {
  background: url('yourimage.jpg') no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: whateveryouwantpx;
  width: whateveryouwantpx;
}

Antwoord 11

background-position: center center;

werkt niet voor mij zonder…

background-attachment: fixed;

mijn afbeelding beide gecentreerd op de x- en y-as

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

Antwoord 12

Het enige dat voor mij werkte, is..

margin: 0 auto

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes