Centralizando uma imagem de plano de fundo, usando CSS

148

Quero centralizar uma imagem de fundo. Não há div usada, este é o estilo CSS :

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

As peças CSS acima estão espalhadas e centralizam, mas metade da imagem não é vista, apenas meio que sobe. O que eu quero fazer é centralizar a imagem. Eu poderia adotar a imagem para ver mesmo em uma tela de 21 "?

css

— X10nD
fonte

1

Agora isso dependeria do tamanho da imagem e do tamanho do navegador, não é?

— Nikc.org

@nikc +1, estou ciente, mas necessidade de saber se havia um trabalho em torno

— X10nD

305

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

Isso deve funcionar.

Caso contrário, por que não fazer um divcom a imagem e usá z-index-lo para torná-lo o plano de fundo? Seria muito mais fácil centralizar do que uma imagem de fundo no corpo.

Além dessa tentativa:

background-position: 0 100px;/*use a pixel value that will center it*/Ou acho que você pode usar 50% se tiver definido seu corpo min-heightpara 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%;
}

— Kyle
fonte

Ele faz centralize, mas exibe apenas metade da tela, eu desejo stackoverflow tinha uma opção para anexar imagens

— X10nD

Você pode fazer uma captura de tela e enviá-la para o servidor ou para um site de hospedagem de fotos gratuito, como photobucket.com, ou fazer um exemplo temporário em www.jsfiddle.net e postar um link para nós. Pelo que você disse, a imagem é 1600x1200 e a maioria das resoluções de tela não é tão alta, tente redimensionar sua imagem para caber. Eu uso um monitor widescreen de 1440x900, por exemplo.

— Kyle

Screenshot - imagevat.com/picview.php?ig=6179 não estou certo de como fazer upload de imagens para jsFiddle, se você puder me ajudar lá jsfiddle.net/yWrQP

— X10nD

Para adicionar uma imagem ao jsfiddle, basta usar o caminho http completo EX: background-image:url(http://www.myurl.com/images/image.jpg);coloque isso no CSS.

— Kyle

Eu não tenho o servidor de fazê-lo, mas usou um site imagehosting, mas ainda verificá-la agora

— X10nD

20

Eu uso esse código, funciona bem

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;
}

— vencedor Martinez
fonte

Obrigado! Eu nem sabia que havia declarações diferentes para webkit, etc ... #

— Mike Rapadas 28/02

Ei Victor, eu usei muito seu código, mas parece que não funciona agora. Adicionei anexo em segundo plano: fixo; mas não está funcionando no meu navegador iPad ...

— Vadim

Só -webkit-background-sizeexiste a partir de declarações especiais.

— BigBang1112

16

Eu acho que é isso que se quer:

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

— Caranguejo
fonte

6

background-attachment corrigiu o problema para mim;)

— kdoteu

7

Experimentar

background-position: center center;

— Pekka
fonte

Como é que o centro duplo funciona? De qualquer forma isso não resolve o problema, ainda o mesmo

— X10nD

1

@ Jean: veja as especificações, a posição de fundo na verdade pode levar 2 valores (horizontal e vertical). w3.org/TR/CSS2/colors.html#propdef-background-position

— Rob van Groenewoud

@rob não está funcionando, a imagem está lado a lado. A imagem é uma 1600x1200 e meu tamanho da tela é 1280x800

— X10nD

2

@ Jean, você ainda não pode redimensionar uma imagem de fundo. É possível no CSS 3, mas ainda não há suporte suficiente. center centerem conjunto com background-repeat: no-repeatdeve fazer o que você pede - centralize a imagem.

— Pekka

2

@ Jean ahh, vejo agora a partir da sua captura de tela. Você precisa dar a bodyum min-heightde 100%modo que se estende em toda a tela cheia. Isso pode resolver o problema.

— Pekka

5

Como isso:

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;
}

Expandir snippet

— Ronnie Royston
fonte

3

Há um erro no seu código. Você está usando uma mistura de sintaxe completa e notação abreviada na propriedade background-image. Isso está fazendo com que a não repetição seja ignorada, pois não é um valor válido para a propriedade background-image.

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

Deve se tornar um dos seguintes:

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

ou

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

EDIT: Para o problema de 'redimensionamento' da imagem, convém consultar a resposta desta pergunta .

— Rob van Groenewoud
fonte

'background: url (../ images / images2.jpg) centro central sem repetição;' não funciona, uma vez que a sintaxe é errado E os outros não quer trabalhar

— X10nD

2

Tente isto background-position: center top;

Isso fará o truque para você.

— Magnus
fonte

2

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

Não centraliza verticalmente a imagem de plano de fundo ao usar um doctype html 4.01 'STRICT'.

Adicionando:

background-attachment: fixed;

Deve corrigir o problema

(Então Alexander está certo)

— Stephan
fonte

1

simplesmente substitua

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

com

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

— Praveen
fonte

0

Se você não estiver satisfeito com as respostas acima, use este

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

— Toye_Brainz
fonte

0

Teve o mesmo problema. Utilizou propriedades de exibição e margem e funcionou.

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

— Robert Paul
fonte

0

background-position: center center;

não funciona para mim sem ...

background-attachment: fixed;

usando ambos centralizou minha imagem nos eixos xey

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

— verde
fonte

-2

A única coisa que funcionou para mim é ..

margin: 0 auto

— plop
fonte