Imagens de fundo do css sensíveis
Tenho um website (g-floors.eu) e eu quero fazer o fundo (em css eu 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 que eu posso pensar, mas é uma grande solução. Criando várias imagens e, em seguida, usando o tamanho de tela css para mudar as imagens, mas eu quero saber se há uma maneira mais prática, a fim de alcançar isso.
Basicamente, o que eu quero alcançar é que a imagem (com a marca de água 'G') muda automaticamente o tamanho sem Mostrar menos da imagem. Se for possível, claroLigação: 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;
}
17 answers
Se quiser escalar a mesma imagem 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 definir a largura, a altura ou as margens.
Por este código, a sua imagem de fundo vai para o centro e corrige o seu tamanho, seja qual for a sua mudança de tamanho, bom para tamanhos pequenos, grandes, normais, melhor para todos, eu uso-o para os meus projectos onde o meu tamanho de fundo ou tamanho de 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;
Tenta isto:
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
CSS:
background-size: 100%;
Aqui está sass mixin para imagem de fundo sensível que eu uso. Funciona para qualquer elemento block. É claro que o mesmo pode funcionar em CSS simples você só terá que calcular padding manualmente.
@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/
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
Verificar os w3schools
Mais opções disponíveis
background-size: auto|length|cover|contain|initial|inherit;
Esta é 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 no demonstração do jsFiddle
Eu usei
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
O Sítio Web sensível, adicionando estofos à altura/largura da imagem inferior x 100 = estofamento-Fundo%:
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 o script Magic nice eu acho melhor um:
Http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
Se quiser que a imagem inteira apareça independentemente das proporções, então tente isto:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
Isto irá mostrar toda a imagem, independentemente do tamanho do ecrã.
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
Podes usar isto. Eu testei e seu funcionamento 100% correto:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
Pode testar o seu site com a capacidade de resposta neste simulador de tamanho de Ecrã.: http://www.infobyip.com/testwebsiteresolution.php
Esvazie o seu esconderijo cada vez que fizer alterações e eu prefiro usar o Firefox para testá-lo.
Se quiser usar um formulário de Imagem outro site / URL e não gostar:
background-image:url('../images/bg.png');
//Esta estrutura deve usar a imagem do seu próprio servidor hospedado.
Então use como presente:
background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Aprecie:)
<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>
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
Adaptável para a razã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");
}
background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
Ou
background-size:100%;
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}