Respostas:
Outra solução, talvez ineficiente, seria incluir a imagem em um img
elemento definido como visibility: hidden;
. Em seguida, faça background-image
da div circundante o mesmo que a imagem.
Isso definirá a div circundante para o tamanho da imagem no img
elemento, mas a exibirá como plano de fundo.
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>
img
marcação de qualquer maneira, por que simplesmente não esconder o real <img>
e não se preocupar com um background-image
? Que vantagem há em fazer as coisas dessa maneira?
background-image
é que ele pode usar modos de mesclagem CSS , enquanto img
não pode.
Existe uma maneira muito legal e legal de fazer uma imagem de plano de fundo funcionar como um img
elemento, para que ela se ajuste height
automaticamente. Você precisa conhecer a imagem width
e a height
proporção. Defina o height
contêiner como 0 e defina padding-top
como porcentagem com base na proporção da imagem.
Será semelhante ao seguinte:
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
Você acabou de obter uma imagem de fundo com altura automática, que funcionará como um elemento img. Aqui está um protótipo funcional (você pode redimensionar e verificar a altura da div): http://jsfiddle.net/TPEFn/2/
@mixin div-same-size-as-background-img($url) { background-image: url($url); background-size: contain; background-repeat: no-repeat; width: 100%; height: 0; padding-top: percentage(image-height($url) / image-width($url)); }
position:relative
a div e colocar outro no interior div com position:absolute; top:0; bottom:0; left:0; right:0;
set
Não há como ajustar automaticamente o tamanho da imagem de fundo usando CSS.
Você pode contornar isso medindo a imagem de plano de fundo no servidor e aplicando esses atributos à div, como outros mencionaram.
Você também pode hackear algum javascript para redimensionar a div com base no tamanho da imagem (após o download da imagem) - isso é basicamente a mesma coisa.
Se você precisar que seu div se ajuste automaticamente à imagem, eu poderia perguntar por que você não coloca uma <img>
tag dentro de seu div?
src
de um img
com consultas de mídia, mas pode alterar o arquivo usado como imagem de segundo plano com as consultas de mídia.
Essa resposta é semelhante a outras, mas geralmente é a melhor para a maioria dos aplicativos. Você precisa conhecer o tamanho da imagem antes da mão, o que normalmente faz. Isso permitirá que você adicione texto sobreposto, títulos etc., sem preenchimento negativo ou posicionamento absoluto da imagem. A chave é definir o% de preenchimento para corresponder à proporção da imagem, como visto no exemplo abaixo. Eu usei essa resposta e, essencialmente, apenas adicionei um fundo de imagem.
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
background-size: contain;
background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
margin: 0 auto;
}
.wrapper:after {
padding-top: 75%;
/* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: black;
text-align: center;
margin-top: 5%;
}
<div class="wrapper">
<div class="main">
This is where your overlay content goes, titles, text, buttons, etc.
</div>
</div>
Talvez isso possa ajudar, não é exatamente um pano de fundo, mas você entendeu:
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
<div>Hi there</div>
</div>
float: left;
quebrou o seu posicionamento
Tenho certeza de que isso nunca foi visto até aqui. Mas se o seu problema era o mesmo que o meu, esta foi a minha solução:
.imaged-container{
background-image:url('<%= asset_path("landing-page.png") %> ');
background-repeat: no-repeat;
background-size: 100%;
height: 65vw;
}
Eu queria ter uma div no centro da imagem, e isso me permitirá isso.
Existe uma solução CSS pura que as outras respostas perderam.
A propriedade "content:" é usada principalmente para inserir conteúdo de texto em um elemento, mas também pode ser usada para inserir conteúdo de imagem.
.my-div:before {
content: url("image.png");
}
Isso fará com que a div redimensione sua altura para o tamanho real do pixel da imagem. Para redimensionar a largura também, adicione:
.my-div {
display: inline-block;
}
Você pode fazer isso no lado do servidor: medindo a imagem e, em seguida, configurando o tamanho da div, OU carregando a imagem com JS, leia seus atributos e defina o tamanho do DIV.
E aqui está uma idéia: coloque a mesma imagem dentro da div como uma tag IMG, mas dê visibilidade: oculta + brinque com a posição relativa + dê a esta div a imagem como plano de fundo.
Eu tive esse problema e encontrei a resposta de Hasanavi, mas recebi um pequeno bug ao exibir a imagem de plano de fundo em uma tela ampla - A imagem de plano de fundo não se espalhou por toda a largura da tela.
Então, aqui está minha solução - baseada no código de Hasanavi, mas melhor ... e isso deve funcionar em telas móveis e extragrande.
/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
Como você deve ter notado, a background-size: contain;
propriedade não se encaixa bem em telas extra largas e a background-size: cover;
propriedade não se encaixa bem em telas móveis. Por isso, usei esse @media
atributo para brincar com os tamanhos de tela e corrigir esse problema.
Que tal agora :)
.fixed-centered-covers-entire-page{
margin:auto;
background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
background-repeat: no-repeat;background-size:cover;
background-position: 50%;
background-color: #fff;
left:0;
right:0;
top:0;
bottom:0;
z-index:-1;
position:fixed;
}
<div class="fixed-centered-covers-entire-page"></div>
Demonstração: http://jsfiddle.net/josephmcasey/KhPaF/
Se for uma única imagem de plano de fundo predeterminada e você desejar que a div seja responsiva sem distorcer a proporção da imagem de fundo, você pode primeiro calcular a proporção da imagem e criar uma div que preserva sua proporção, fazendo o seguinte :
Digamos que você queira uma proporção de 4/1 e a largura da div seja 32%:
div {
width: 32%;
padding-bottom: 8%;
}
Isso resulta do fato de que o preenchimento é calculado com base na largura do elemento que o contém.
Pode ser que isso ajude, não é exatamente um pano de fundo, mas você tem a ideia simples
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
<div>Hello</div>
</div>
Se você conhece a proporção da imagem no momento da criação, deseja a altura com base na altura da janela e está bem segmentado para navegadores modernos (IE9 +) , pode usar unidades de janela de exibição para isso:
.width-ratio-of-height {
overflow-x: scroll;
height: 100vh;
width: 500vh; /* width here is 5x height */
background-image: url("http://placehold.it/5000x1000");
background-size: cover;
}
Não é exatamente o que o OP estava perguntando, mas provavelmente era um bom ajuste para muitos dos que visualizavam essa pergunta, por isso, quis dar outra opção aqui.
Fiddle: https://jsfiddle.net/6Lkzdnge/
Eu olhei para algumas das soluções e elas são ótimas, mas acho que achei uma maneira surpreendentemente fácil.
Primeiro, precisamos obter a proporção da imagem de fundo. Simplesmente dividimos uma dimensão por outra. Então temos algo como, por exemplo, 66,4%
Quando temos uma proporção de imagem, podemos simplesmente calcular a altura da div multiplicando a proporção pela largura da janela de visualização:
height: calc(0.664 * 100vw);
Para mim, funciona, define a altura da div corretamente e a altera quando a janela é redimensionada.
Suponha que você tenha algo assim:
<div class="content">
... // inner HTML
</div>
e você deseja adicionar um plano de fundo, mas não conhece a dimensão da imagem.
Eu tive um problema semelhante e resolvi usando a grade:
HTML
<div class="outer">
<div class="content">
... // inner HTML
</div>
<img class="background" />
</div>
CSS
.outer{
display: grid;
grid-template: auto / auto;
// or you can assign a name for this block
}
.content{
grid-area: 1 / 1 / 2 / 2;
z-index: 2;
}
.background{
grid-area: 1 / 1 / 2 / 2;
z-index: 1;
}
z-index
é apenas para colocar a imagem no fundo, é claro que você pode colocar img.background
acima da div.content
.
NOTA : pode causar a div.content
mesma altura da imagem; portanto, se div.content
houver filhos colocados de acordo com a sua altura, convém definir um número que não seja algo como 'automático'.
Teve esse problema com o Umbraco CMS e, nesse cenário, você pode adicionar a imagem à div usando algo parecido com isto para o atributo 'style' da div:
style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"
Estou lidando com esse problema há um tempo e decidi escrever um plugin jquery para resolver esse problema. Este plugin encontrará todos os elementos com a classe "show-bg" (ou você pode passá-lo por seu próprio seletor) e calculará as dimensões da imagem de fundo. tudo o que você precisa fazer é incluir esse código, marcar os elementos desejados com class = "show
Aproveitar!
A melhor solução que posso pensar é especificando sua largura e altura em porcentagem. Isso permitirá que você redimensione sua tela com base no tamanho do seu monitor. é mais layout responsivo ..
Para uma instância. Você tem
<br/>
<div> . //This you set the width percent to %100
<div> //This you set the width percent to any amount . if you put it by 50% , it will be half
</div>
</div>
Esta é a melhor opção se você quiser um layout responsivo, eu não recomendaria o float, em certos casos o float pode ser usado. mas na maioria dos casos, evitamos o uso de flutuação, pois isso afetará várias coisas quando você estiver testando em vários navegadores.
Espero que isto ajude :)
na verdade, é bastante fácil quando você sabe como fazê-lo:
<section data-speed='.618' data-type='background' style='background: url(someUrl)
top center no-repeat fixed; width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>
o truque é apenas definir a div fechada como uma div normal com valores dimensionais iguais aos valores dimensionais de fundo (neste exemplo, 100% e 40vw).
Eu resolvi isso usando jQuery. Até que novas regras CSS permitam esse tipo de comportamento nativamente, acho que é a melhor maneira de fazê-lo.
Configure seus divs
Abaixo, você tem sua div na qual deseja que o plano de fundo apareça ("herói") e, em seguida, o conteúdo / texto interno que deseja sobrepor na parte superior da sua imagem de plano de fundo ("interna"). Você pode (e deve) mover os estilos embutidos para sua classe de herói. Deixei-os aqui, para que seja rápido e fácil ver quais estilos são aplicados a ele.
<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
<div class="inner">overlay content</div>
</div>
Calcular a proporção da imagem
Em seguida, calcule a proporção da imagem dividindo a altura da imagem pela largura. Por exemplo, se a altura da imagem é 660 e a largura é 1280, a proporção é de 0,5156.
Configurar um evento de redimensionamento da janela jQuery para ajustar a altura
Por fim, adicione um ouvinte de evento jQuery para redimensionar janelas e calcule a altura do seu div herói baseado na proporção e atualize-a. Essa solução geralmente deixa um pixel extra na parte inferior devido a cálculos imperfeitos usando a proporção, então adicionamos -1 ao tamanho resultante.
$(window).on("resize", function ()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
Verifique se ele funciona no carregamento da página
Você deve executar a chamada de redimensionamento acima quando a página for carregada para que os tamanhos de imagem sejam calculados desde o início. Caso contrário, a divisão hero não será ajustada até que você redimensione a janela. Eu configurei uma função separada para fazer os ajustes de redimensionamento. Aqui está o código completo que eu uso.
function updateHeroDiv()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
$(document).ready(function()
{
// calls the function on page load
updateHeroDiv();
// calls the function on window resize
$(window).on("resize", function ()
{
updateHeroDiv();
}
});
Se você puder criar uma imagem no Photoshop em que a camada principal tenha uma opacidade igual ou superior a 1 e seja basicamente transparente, coloque esse img na div e faça da imagem real a imagem de fundo. ENTÃO, defina a opacidade do img como 1 e adicione as dimensões de tamanho desejadas.
Essa imagem é feita dessa maneira e você não pode nem arrastar a imagem invisível para fora da página, o que é legal.
basta adicionar a div
style="overflow:hidden;"