Imagem De Fundo Jumbotron De Arranque Sensível

Question

Imagem De Fundo Jumbotron De Arranque Sensível

Estou a usar o jumbotron de inicialização, e incluindo uma imagem de fundo. Redimensionar o ecrã faz com que a peça da imagem e repita, ao passo que eu quero que a imagem seja dimensionada de forma responsável.

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

Como faria a imagem reagir? O site está aqui. Obrigado pelas suas ideias!

23

css twitter-bootstrap responsive-design css3

Author: Jack Bonneman, 2014-02-25

Source

7 answers

score 37 · Answer 1

A maneira mais simples é definir o tamanho de fundo para"cobrir"

.jumbotron {
background-image: url("../img/jumbotron_bg.jpg");
background-size: cover;}

Steve

score 6 · Answer 2

Isto foi o que eu fiz.
Primeiro, cancela a aula de jumbotron e faz o seguinte. :

.jumbotron{
    background: url("bg.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

Então, agora tens um jumbotron com fundo sensível no lugar. No entanto, como Irvin Zhan já respondeu, a altura do fundo ainda não está mostrando corretamente.

Uma coisa que podes fazer é encher o teu div com alguns espaços como este:

<div class="jumbotron">
    <div class="container">
        About
        <br><br><br> <!--keep filling br until the height is to your liking-->
    </div>
</div>

Ou, mais elegantemente, pode definir a altura do recipiente. Você pode querer adicionar outra classe para que você não sobrepor a classe de contêineres de inicialização.

<div class="jumbotron">
    <div class="container push-spaces">
        About
    </div>
</div>

.push-spaces
{
    height: 100px;
}

score 5 · Answer 3

Descobri que isto funcionou perfeitamente para mim.

.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}

Você pode redimensionar o seu ecrã e ele irá sempre ocupar 100% da janela.

score 3 · Answer 4

TLDR: utilizar background-size: 100% 100%;.

background-size: cover; pode cortar algumas partes da imagem produzindo maus resultados.

Usando {[1] } Você força a imagem a tomar 100% do elemento-mãe para ambos height e width.

Ver W3Schools para mais informações sobre este assunto.

Aqui está uma imagem de fundo funcional e sensível jumbotron:

<div class="jumbotron"  style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
    <h1>Welcome</h1>
    <p class="lead">Your message here</p>
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

score 3 · Answer 5

É assim que eu faço:

<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
  <h1>Hello</h1>
</div>

score 2 · Answer 6

Infelizmente, não há maneira de fazer a altura do div responder ao tamanho de fundo . A solução mais fácil que eu usei é adicionar uma tag img dentro de seu jumbotron que contém essa imagem de fundo.

score 0 · Answer 7

O código abaixo funciona para todos os ecrãs:

.jumbotron {
   background: url('backgroundimage.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}

A propriedade da capa irá redimensionar a imagem de fundo para cobrir todo o contentor, mesmo que tenha de esticar a imagem ou cortar um pouco de uma das bordas.