Imagens de fundo css responsivas

195

Eu tenho um site (g-floors.eu) e quero tornar o plano de fundo (em css, defini uma imagem bg para o conteúdo) também responsivo. Infelizmente, eu realmente não tenho nenhuma idéia de como fazer isso, exceto por uma coisa em que consigo pensar, mas é uma solução alternativa. Criando várias imagens e, em seguida, usando o tamanho da tela css para alterar as imagens, mas eu quero saber se existe uma maneira mais prática de conseguir isso.

Basicamente, o que eu quero é que a imagem (com a marca d'água 'G') seja redimensionada automaticamente sem exibir menos da imagem. Se é possível, é claro

link: g-floors.eu

Código que tenho até agora (parte do conteúdo)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}
jochemke
fonte
7
Dê uma olhada neste link, pode ser o que você está procurando? css-tricks.com/perfect-full-page-background-image
Christofer Vilander
Sinto que a solução que Christofer Vilander postou é uma solução melhor que a resposta escolhida.
CU3ED
Basta saber por que o site realmente não implementa esse recurso de redimensionamento sobre o qual você estava perguntando, em fevereiro de 2015? Houve algum problema com isso?
LegendLength

Respostas:

368

Se você deseja que a mesma imagem seja dimensionada com base no tamanho da janela do navegador:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Não defina largura, altura ou margens.

EDIT: A linha anterior sobre não definir largura, altura ou margem refere-se à pergunta original do OP sobre dimensionar com o tamanho da janela. Em outros casos de uso, convém definir largura / altura / margens, se necessário.

Andrei Volgin
fonte
3
Também é possível redimensionar automaticamente a largura e deixar a altura fixa?
precisa saber é
3
Sim, você pode definir a altura da imagem em pixels e a largura em porcentagens, mas a imagem será distorcida. Não ficará bonito.
Andrei Volgin
2
Você pode usar uma imagem muito menor se você usar um formato do vetor: en.m.wikipedia.org/wiki/Scalable_Vector_Graphics
Andrei Volgin
9
O que? Se não definir a largura, a altura do contêiner não mostrará a imagem.
snow
3
(1) A pergunta original era sobre o dimensionamento com base no tamanho da janela do navegador. (2) Elementos como divobter sua própria altura a partir de seu próprio conteúdo ou ocupar espaço disponível em um modelo flexbox. Dizer que, sem largura / altura explícitas, o contêiner não será exibido está incorreto. Obviamente, se você deseja exibir uma div vazia com uma imagem de fundo, precisará definir a altura e, possivelmente, a largura, mas verá apenas uma parte da imagem, a menos que a proporção seja exatamente igual à de a própria imagem.
Andrei Volgin
69

por esse código, sua imagem de plano de fundo fica no centro e corrige o tamanho, independentemente da alteração do tamanho da sua div, bom para tamanhos pequenos, grandes e normais, o melhor para todos, eu a uso em meus projetos em que meu tamanho ou tamanho da div pode mudar

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
Pnsadeghy
fonte
No tamanho de tela 800x1280px, a imagem é cortada no lado direito pela caixa. Todos os outros tamanhos parecem bons.
Mugé 28/10/16
52

Tente o seguinte:

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
Ashok Dey
fonte
33

CSS:

background-size: 100%;

Isso deve fazer o truque! :)

Timothy Miller
fonte
27
Isso distorcerá totalmente a imagem com base na proporção da janela do navegador. Nunca faça isso.
Andrei Volgin
8
Apenas para referência futura, na verdade não ficará ruim dessa maneira. background-size: 100% 100% seria, mas declarar apenas x como 100% impede que pareça terrível. Caso de teste: codepen.io/howlermiller/pen/syduB
Timothy Miller
1
ele não vai olhar "distorcida", mas ele vai esticar a imagem para além de suas proporções destinadas se for menor do que o recipiente ...
Código Noviciado
1
Assim será a resposta aceita. O OP não perguntou sobre esse problema, apenas se era possível redimensioná-lo adequadamente.
Timothy Miller
1
Esta solução resolveu o meu problema. +1
JPeG 21/03
22

Aqui está sass mixin para imagem de fundo responsivo que eu uso. Funciona para qualquer blockelemento. Claro que o mesmo pode funcionar em CSS simples, você apenas terá que calcular paddingmanualmente.

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

Exemplo http://jsfiddle.net/XbEdW/1/

Lanan
fonte
o código no violino (usa uma estrutura) é diferente do código na resposta.
snow
14

Este é fácil =)

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Dê uma olhada na demonstração do jsFiddle

Omar
fonte
13

Aqui está a melhor maneira que eu tenho.

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

Verifique no w3schools

Mais opções disponíveis

background-size: auto|length|cover|contain|initial|inherit;
Piyush
fonte
9

eu usei

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

que funcionou muito bem.

Azevinho
fonte
Esse é o código que eu precisava! Obrigado :)) Estou tentando fazer paralaxe em 100% da tela, mas com 200px de altura e preciso apenas da parte superior do plano de fundo, mas mantendo as proporções de toda a imagem.
thinklinux
8
#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}
amit bende
fonte
6

Site responsivo adicionando preenchimento à altura / largura da imagem inferior x 100 = preenchimento inferior%:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/


Método mais complicado:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios


Tente redimensionar o fundo eq Firefox Ctrl + M para ver um bom roteiro mágico que eu acho melhor:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

user956584
fonte
4

Você pode usar isso. Eu testei e está funcionando 100% correto:

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

Você pode testar seu site com capacidade de resposta neste simulador de tamanho de tela: http://www.infobyip.com/testwebsiteresolution.php

Limpe seu cache sempre que fizer alterações e eu preferiria usar o Firefox para testá-lo.

Se você deseja usar uma imagem de outro site / URL e não gostar: background-image:url('../images/bg.png'); // Essa estrutura é para usar a imagem do seu próprio servidor hospedado. Então use assim: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Aproveitar :)

JackSparrow
fonte
4

Se você deseja que a imagem inteira seja exibida independentemente da proporção, tente o seguinte:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

Isso mostrará a imagem inteira, independentemente do tamanho da tela.

Mubashar Abbas
fonte
3
    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>
Indranil
fonte
3

Apenas duas linhas de código, funciona.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}
Rajkumar Bansal
fonte
2

Adaptável para proporção quadrada com jQuery

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }
OVNI
fonte
2
background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

ou

background-size:100%;
bsngr
fonte
0

Eu acho que a melhor maneira de fazer isso é:

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

Dessa forma, não há necessidade de fazer mais nada e é bastante simples.

Pelo menos, funciona para mim.

Espero que ajude.

user3487225
fonte
0

Tente usar, background-sizemas usando DOIS ARGUMENTOS Um para a largura e outro para a altura

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;
Runsis
fonte
0
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

a propriedade position pode ser usada para alinhar a parte inferior e o centro da parte superior, conforme sua necessidade, e o tamanho do plano de fundo pode ser usado para o corte central (capa) ou a imagem completa (contém ou 100%)

44kksharma
fonte