Recentemente, em um projeto, houve a necessidade de fazer com que o plano de fundo do site (uma foto ou série de fotos, nesse caso) ocupasse toda a tela, não importando a resolução.
Sempre fui fã do site da agência August, um dos sites pioneiros a utilizarem fotos grandes como fundo. Porém, nesse site foi utilizado Flash para o efeito de preenchimento de tela (originalmente; agora percebi que já trocaram para HTML/CSS). Hoje, com o avanço das bibliotecas JavaScript, procurei encontrar uma forma de fazer isso apenas com jQuery e um pouco de CSS (é claro que isso também pode ser feito com JavaScript "puro"). Neste tutorial mostrarei a solução que desenvolvi para um cliente.
HTML e CSS Básico
Antes de mais nada, temos que pensar como esta técnica funciona (mesmo que de forma mais simples) sem JavaScript. Não há uma forma confiável de fazer o efeito desejado apenas com HTML e CSS2, mas conseguimos uma funcionalidade básica. Não há muita flexibilidade com a utilização da propriedade CSS background, a não ser que seja utilizado CSS3 (ver o pós-escrito), portanto iremos utilizar uma tag img e manipular seus atributos com CSS e JavaScript.
Primeiramente, vamos analisar o HTML deste exemplo:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Imagem de Fundo Preenchendo Toda a Tela</title>
<style>
/* Estilos (em um site real colocar em arquivo externo) */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// JavaScript (em um site real colocar em arquivo externo)
</script>
</head>
<body>
<div id="fundo-externo">
<div id="fundo">
<img src="http://flickholdr.com/1600/1200/sunset" alt="" />
</div>
</div>
<div id="site">
<h1>Site Exemplo</h1>
<p>
Lorem ipsum...
</p>
</div>
</body>
</html>
Estou colocando os estilos e o JavaScript dentro do documento, mas é recomendável em um projeto real utilizar arquivos externos. Quanto ao HTML, nada muito diferente do normal, apenas a questão de haver duas divs, uma chamada #fundo-externo, para criar um contexto de posicionamento e outra chamada #fundo que será o nosso container para as imagens que irão preencher a tela. A razão de utilizar uma div é que podemos colocar várias imagens dentro dela e até criar um slideshow (como foi o caso no projeto do meu cliente).
A ideia de ter uma div com a imagem antes do site é poder posicionar o fundo e o site de forma absoluta, para que possamos sobrepor os dois. Vejamos o CSS:
/* reset de margens */
* {
margin: 0;
padding:0;
}
/* para garantir que estes elementos ocuparão toda a tela */
body, html {
width: 100%;
height: 100%;
font-family: Arial, Tahoma, sans-serif;
}
#fundo-externo {
overflow: hidden; /* para que não tenha rolagem se a imagem de fundo for maior que a tela */
width: 100%;
height: 100%;
position: relative; /* criamos um contexto para posicionamento */
}
#fundo {
position: fixed; /* posição fixa para que a possível rolagem da tela não revele espaços em branco */
width: 100%;
height: 100%;
}
#fundo img {
width: 100%; /* com isso imagem ocupará toda a largura da tela. Se colocarmos height: 100% também, a imagem irá distorcer */
position: absolute;
}
#site {
position: absolute;
top: 40px;
left: 50%;
width: 560px;
padding: 20px;
margin-left: -300px; /* por causa do posicionamento absoluto temos que usar margem negativa para centralizar o site */
background: #FFF; /* fundo branco para navegadores que não suportam rgba */
background: rgba(255,255,255,0.8); /* fundo branco com um pouco de transparência */
}
p {
margin-bottom: 1.5em;
}
Com isso, você verá que a imagem de fundo ocupará toda a largura da tela. Uma das desvantagens desta técnica já fica aparente logo de cara: por causa do posicionamento absoluto do site, temos algumas limitações quanto ao posicionamento da div#site. Neste caso, utilizei margens negativas para centralizar o container no layout. Porém, se a tela for muito estreita, haverá corte do conteúdo do site. Também podemos trabalhar com o site alinhado à esquerda ou à direita.
Você também perceberá que, apesar da imagem de fundo ocupar toda a tela, dependendo da forma como a janela do navegador é redimensionada, fica um espaço branco na parte de baixo do site. Isso acontece porque o redimensionamento automático está apenas acontecendo de acordo com a largura da janela. Quanto menor a largura da janela, menor a largura da imagem. Dependendo das proporções da janela ou tela, a imagem ficará menor do que o espaço a ser ocupado, o que não é o que queremos aqui. Queremos que a imagem ocupe toda a tela, não importando o seu tamanho ou proporção.
Para isso, iremos utilizar um pouco de JavaScript:
// Função adaptImage()
// Parâmetros: targetimg (objeto jquery com elementos selecionados)
function adaptImage(targetimg) {
var wheight = $(window).height(); // altura da janela do navegador
var wwidth = $(window).width(); // largura da janela do navegador
// removemos os atributos de largura e altura da imagem
targetimg.removeAttr("width")
.removeAttr("height")
.css({ width: "", height: "" }); // removemos possíveis regras css também
var imgwidth = targetimg.width(); // largura da imagem
var imgheight = targetimg.height(); // altura da imagem
var destwidth = wwidth; // largura que a imagem deve ter
var destheight = wheight; // altura que a imagem deve ter
// aqui vamos determinar o tamanho final da imagem
if(imgheight < wheight) {
// se a altura da imagem for menor que a altura da tela, fazemos um cálculo
// para redefinir a largura da imagem para bater com a altura que queremos
destwidth = (imgwidth * wheight)/imgheight;
$('#fundo img').height(destheight);
$('#fundo img').width(destwidth);
}
// aqui utilizamos um cálculo simples para determinar o posicionamento da imagem
// para que a mesma fique no meio da tela
// posição = dimensão da imagem/2 - dimensão da tela/2
destheight = $('#fundo img').height();
var posy = (destheight/2 - wheight/2);
var posx = (destwidth/2 - wwidth/2);
//se o cálculo das posições der resultado positivo, trocamos para negativo
if(posy > 0) {
posy *= -1;
}
if(posx > 0) {
posx *= -1;
}
// colocamos através da função css() do jquery o posicionamento da imagem
$('#fundo').css({'top': posy + 'px', 'left': posx + 'px'});
}
//quando a janela for redimensionada, adaptamos a imagem
$(window).resize(function() {
adaptImage($('#fundo img'));
});
//quando a página carregar, fazemos o mesmo
$(window).load(function() {
$(window).resize();
});
No código acima utilizei um pouco de jQuery (apenas para os seletores e eventos), mas não é algo necessário. Isso pode ser feito com JavaScript puro sem problemas.
Com esta técnica deixamos o CSS cuidar do redimensionamento da largura da imagem. Caso a largura fique muito pequena e a altura da imagem acabe ficando menor do que a altura da janela do navegador, a script atua para redimensionar a imagem de acordo com sua altura. Assim a imagem sempre ocupa toda a tela do navegador, não importando o tamanho ou proporção da mesma.
Esta técnica foi útil para você? Opine nos comentários!
Postscript: Uma Técnica com CSS3
Para conseguir um efeito semelhante com CSS3 sem utilizar JavaScript e utilizando menos HTML, podemos nos utilizar da nova propriedade background-size. O código CSS é bem simples:
body {
background: url(http://flickholdr.com/1600/1200/sunset) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Redimensione a janela do seu navegador para ver o efeito em ação. Neste caso, podemos apagar as divs #fundo-externo e #fundo, pois não são mais necessárias.
Atenção: por utilzar CSS3, esta técnica possui suporte limitado por parte dos navegadores. Principalmente Internet Explorer 8 e mais antigos não suportam background-size.
Muito bom suas explicações. Gostei muito. Sou novo aqui.
Tentei colocar uma imagem como fundo de uma div usando o mesmo fundamento, mas não estou conseguindo. Tentei mas a imagem não cobre o horizontal todo. Estou usando o bootstrap, se eu colocar uma largura fixa, tá deixando de ser responsivo.
tem algum tutorial que pode me ajudar???
Olá Marcus,
Verifique onde a imagem está sendo aplicada, a div em questão precisa estar ocupando 100% da largura e altura da tela, caso você queira que a imagem ocupe esta área. Veja meu outro post sobre o assunto, lá você pode encontrar mais informações.
Olá, tenho uma dúvida. Estou tentando fazer, mas com imagens do meu próprio PC e não to tendo sucesso da mesma forma que com outras imagens da internet. A dúvida é: só funciona com imagens da internet?
Olá Igor, verifique o caminho (src) da imagem. Recomendo usar caminhos relativos, principalmente se você está trabalhando localmente. Quanto à técnica em si, não há diferença, mas com arquivos locais você precisa verificar se o JavaScript está rodando. Alguns navegadores não deixam código JavaScript rodar quando utilizamos arquivos locais.
Bom dia Guilherme, peço sua orientação.
Fiz estes procedimentos em um site que estou desenvolvendo, porém, como consta nessa página (http://vitalpublicidade.com.br/conceito-site/residencial.html), está aparecendo uma barra de rolagem horizontal na página. Você poderia me ajudar fazendo essa barra de rolagem sumir? No aguardo. Obrigada.
tenho um blog no mywapblog e queria mudar o a cor de fundo do meu blog e de post por uma foto que eu tenho já o link, o que eu devo fazer? mudar para o wordpress ou mudar algo nesse css que eu não sei rsrsrs
também queria mudar o cabeçalho
de cada post. esse css do mywapblog é mais complicado do que o normal, mas seu post está legal demais!
Olá Roni, o editor que uso é o Sublime Text (www.sublimetext.com). Recomendo também o Atom, que é gratuito. Em ambos você pode facilmente mudar o tema do editor, o que muda todas as cores de fundo e da fonte.
Boa noite Guilherme! Mano, eu fiz o seguinte, coloquei o código de bg direto no css e tirei do html... pq eu citava uma função do css pelo html, aí parece que estava restringindo o tamanho... !!! Vlw parceiro. Agora estou com algumas outras dúvidas que vou lendo e descobrindo! Mas, caso vc queira me passar o Skype ficarei grato também ! Obrigado.
Minha Background ficou boa! Ela está "fixed" e "cover", porém ela não está pegando a página completa, tem uma lista em cima e do lado esquerdo, além disso, está ativando o Scroll tanto de cima para baixo quanto da esquerda para direita. Já tentei de tudo!
Coloquei o fundo branco pra dar pra ver melhor!
Fica um pouco complicado ter uma ideia do que está acontecendo apenas pelo screenshot e pelo código. O Blogger pode estar afetando o CSS de alguma forma também. Recomendo que você use o inspetor do seu navegador (F12) para tentar descobrir o problema. Caso tenha interesse, é possível marcar uma conversa via Skype também.
Boa tarde,
Gostei do artigo, realmente informativo.
Estava tentando colocar que as imagens do fundo alterassem quando a pessoa clicá-se no sinal de > que estará ao lado.
Olá Rebeca,
Há várias maneiras de fazer isso. Uma delas é usando um sistema de slideshow como o jQuery Cycle2. É necessário entender como o plugin funciona e fazer a sua configuração. Outra maneira é criar a própria script para passar as imagens. Eu ofereço cursos via Skype nessa área, se houver interesse envie um e-mail e podemos marcar uma conversa inicial.
Antes de qualquer coisa parabens ! Muito bacana da sua parte compartilhar suas dicas. Serão sempre bem-vindas. Também fiquei impressionado com o fato de ter conteúdo em dois idiomas. Muito bom ! Só para você ter idéia cheguei no seu site através de uma busca em inglês. Depois de alguns momentos que percebi que era brasileiro. Excelente ! Terceiro ponto , sua iniciativa em buscar parceiros! Bom saber que existem outras pessoas que compartilham da filosofia do NÓS e nao do somente eu.
Obrigado.
Olá Leandro, obrigado pelo comentário! Certamente, ter bons parceiros de negócios é um dos aspectos mais importantes para que se possa oferecer um trabalho de qualidade. Sobre o conteúdo em inglês e em português, estou tentando gerar cada vez mais conteúdo, principalmente na área de cursos, para este site. Porém, o tempo é curto e o foco por enquanto está no trabalho para o SitePoint Premium. Mas, até o final do ano, início do ano que vem, aguarde novidades neste site! Abraço
Se eu quiser fazer algo como este site: http://www.grancursos.com.br/
Tem uma imagem fixa no fundo e mais "3 imagens" que apontam para outros sites...
Eu preciso fazer algo com uma estrutura parecida, no entanto não precisa desse efeito... Tem como colocar 3 imagens em cima do fundo e manter o posicionamento delas e linkar cada uma para um site ou pasta diferente?
Alguém pode me ajudar?
Olá Anderson. Sim, certamente há como fazer isso. Há várias formas de fazê-lo. Uma delas é analisar o próprio método que o desenvolvedor usou, usando as ferramentas de inspeção do seu navegador. Para entender o que foi feito, no entanto, é necessário primeiro você conhecer as técnicas básicas utilizadas para layout de websites. Caso tenha interesse, eu cubro este material neste curso aqui: http://guilhermemuller.com.br/pt/cursos/detalhes/8/aulas-skype-tecnicas-layout-html-css
Eu quero saber como eu Fasso para fazer uma foto tipo para quando auguem cklik nella ai aparesser outra foto no lugar dela
Qual o nome do APP e como si usa ele ,equipe eu quero trolar meus amigos
Antes de mais nada, parabéns pelo post!
Minha pergunta é:
"Tenho um site em construção onde o usuário se cadastra com seus dados e escolhe uma foto para carregar (upload) que envia para uma pasta e fica lá armazenado junto com outras fotos de OUTROS USUÁRIOS.
Como faço para conseguir carregar a foto exata deste usuário no expandindo no fundo da tela por inteiro? Quero fazer igual este site: (http://mecasei.com/mariefe)? Saberia algum código em CSS ou PHP para conseguir isto?
Sobre a sua pergunta, na verdade não tem a ver com CSS e sim com SQL. Para você pegar a foto correta, você precisa ter uma estrutura de banco que atenda as suas necessidades. Com isso, com a consulta certa no banco você consegue retirar a informação que precisa. Não tem problema que as imagens estejam na mesma pasta.
Guilherme boa tarde.
estou fazendo um site com o template como uma unica imagem.
Usei o codigo para que essa imagem ajuste ao tamanho da tela.
Mas o menu eu fiz separado, o menu é um drop down, aparece certinho, mas quando passo o mouse pro dropdown descer, a imagem que está o seu código ela fica por cima do dropdown.
Sabe como arrumar isso para que o dropdown sobrescreva a imagem com o css ?
Neste caso, basta utilizar a propriedade CSS "z-index". Coloque na imagem o z-index de 1, por exemplo, e no menu coloque 100. Aí o dropdown deve ficar por cima.
Olá novamente Guilherme! Desculpe a falha com a mensagem anterior, nem reparei que o código seria cortado rsrs Não sei como responder o seu comentário sem criar um novo, então ecreverei por aqui.
A página que estou criando: http://smlab.com.br/new.html
Nela apliquei o que aprendi com você nesse site.
Fiz o que me explicou na resposta e deu certo para uma imagem de fundo, mas como identifico mais de uma para mudar quando entrar na página novamente?
É só aplicar mais tags? O código que mencionei no outro comentário está nessa página aqui: http://smlab.com.br/teste.html (é aleatório, atualize algumas vezes que começa a mudar)
Vou continuar tentando aqui, e amigo, muito obrigado mesmo pela ajuda!
Por diversas vezes encontrei conteúdos no seu site e nem sequer sabia que você ainda respondia perguntas aqui rsrs
Então, o código de colocar imagens aleatórias que você está usando está colocando as imagens como background diretamente na tag body. Há maneiras muito melhores de fazer isso, já que o código javascript não teve ser tão intrusivo na página. Você pode mudar o background da tag body selecionando-o por id ou classe e aí acessando a propriedade "element.style.backgroundImage", por exemplo. Link: http://www.w3schools.com/jsref/prop_style_backgroundimage.asp. Tendo o background aleatório, com background-size: cover você preenche toda a tela.
Já o código javascript que mostro no post só pode ser usado com tags img, o que aí já muda um pouco a técnica. Se quiser mais informações, podemos agendar uma aula via skype.
Perfeito para o que eu precisava. Funcionou direitinho!
Agora, a dúvida: como utilizo o mesmo código (sem o CSS3) com fundo aleatório? Tenho esse código aqui abaixo, mas não consigo mesclá-los. =/
Espero que você ainda dê algum suporte aqui Guilherme rsrs
Seu site tem ajudado muito ultimamente!
<head>
[removed]
var randon = Math.random();
var num = 4;
var rand1 = Math.round(randon * (num-1)) + 1;
images = new Array
images[1] = "imagens/fundo1.jpg"
images[2] = "imagens/fundo2.jpg"
images[3] = "imagens/fundo3.jpg"
images[4] = "imagens/fundo4.jpg"
var image = images[rand1]
[removed]
</head>
O código veio um pouco comprometido por causa dos mecanismos de segurança, mas deu para entender. Você não precisa por scripts no meio do documento para substituir a imagem de fundo. Há outras maneiras menos intrusivas de fazer isso (sem mexer no HTML).
Por exemplo, se você tem uma tag <img id="teste"> no documento, no javascript você pode fazer isso (após a página carregar e etc):
var img = document.getElementById('teste');
img.src = "endereco/para/imagem";
Agora se você tem um background aplicado à tag body, identifique a tag com uma id (vamos supor "teste") e aí pode ser feito dessa forma:
var body = document.getElementById('teste');
body.style.backgroundImage = "url(endereco/para/imagem)";
Olá Cristiane,
HTML tem a função apenas de estruturar o conteúdo de uma página semanticamente (o que é um título, o que é um bloco de conteúdo, etc). A linguagem não tem nenhuma função visual. Por isso, para mexer com imagens desta forma, as opções são CSS e/ou Javascript.
Se você está trabalhando com um sistema de blog fechado ou algo assim, você pode tentar carregar as scripts no final do documento (antes da tag </body>); apenas lembre de executá-las quanto o documento estiver carregado. Já quanto ao CSS, geralmente há alguma forma de editá-lo neste tipo de sistema. Apenas não recomendo que você carregue arquivos CSS via tags <link> ou <style> fora da tag <head>, pois isso não é HTML válido (ainda).
Olá Zezinho,
Não mexo muito com Wordpress, mas acredito que você deva incluir a script no include header.php do tema (ou no footer.php, se você carrega scripts no final da página) e fazer o uso da função javascript de acordo. Também confira o post atualizado que está neste site, lá há uma script um pouco mais eficiente.
Não conheço um curso específico deste assunto tratado aqui no post mas, se tiver interesse, posso dar um curso por Skype personalizado com os assuntos que você deseja desenvolver. Qualquer coisa, entre em contato.
Verifique seu código CSS. Alguma parte do código deve ter alterado a cor da fonte. Você pode usar uma ferramenta como o Firebug ou o conjunto de ferramentas para desenvolvedor que vêm com o seu navegador para auxiliá-lo nisso.
Olá Guilherme,
Aqui vc utilizou a div site com 560px e esta centralizou legal.
No meu caso, precisaria deste container com tamanho em 980px. como faria para centraliza-la nesta técnica?
Há duas técnicas principais para centralizar na horizontal desta forma. A mais simples é colocar apenas margin: 0 auto; (margem automática na horizontal). Desde que o elemento esteja com uma largura definida, deve funcionar.
Porém, no exemplo deste post onde usei javascript, precisei posicionar a div de forma absoluta na tela (position: absolute). Portanto, coloquei o valor left como 50% e aí uma margem negativa, margin-left, igual à metade da largura da minha div. Esta é uma outra técnica, usada para centralizar um elemento que está posicionado absolutamente.
Olá Guilherme, primeiramente parabéns, tbm vi o vídeo no youtube e com sua explicação fica mais fácil ainda.
Porém tenho uma dúvida remanescente: eu creio que a imagem deve ter uma dimensão máxima a fim de "cobrir" todas as resoluções de tela possíveis de usuários, certo? Explico: se a imagem que eu coloco no fundo for menor que uma resoluçao de tela, obviamente ela nao vai preencher a tela inteira ou talvez ficará numa qualidade ruim. Portanto minha dúvida é em qual dimensão devo colocar essa imagem para que ela fique certa em todas as resoluções. Digo, existe uma dimensão padrão para que a imagem assegure uma vizualizaçao correta nas diversas resoluções que existem?
Isso nos leva a uma questão mais profunda: a programação CSS sabe qual é a resolução do usuário e faz a adaptação automaticamente?
bom, é isso. Nao sei se é uma dúvida primária mas como sou iniciante gostaria de saber.
Muito obrigado!
Tanto a técnica Javascript quanto a técnica CSS3 que apresento aqui e no vídeo adaptam qualquer imagem a qualquer resolução. Sim, se a imagem for menor que a tela, haverá perda de qualidade. Além disso, se a imagem é muito grande e você abre o site em um celular, por exemplo, você está gastando à toa largura de banda do celular do usuário para fazer o download de uma imagem grande. Esse é o desafio dos desenvolvedores hoje. Há técnicas surgindo para que consiga-se servir a imagem correta para cada tipo de dispositivo, seja usando media queries e/ou javascript. O negócio é pesquisar e usar o que for melhor para o seu projeto. Hoje também temos os dispositivos com maior densidade de pixels (como os "retina" da Apple) que adicionam ainda mais uma variável nesse cenário.
Não existe tamanho padrão, como temos muita variação de resolução nos dispositivos hoje, o ideal é ter uma abordagem "responsive" (veja Responsive Web Design) e pesquisar as técnicas mais recentes. Além do Curso de HTML e CSS que lancei agora, estou criando outro nesta área, aguarde!
Maravilha Guilherme, obrigado pela rápida resposta.
Há alguns dias já estou pesquisando sobre design responsivo e de fato trata-se de um recurso que será cada vez mais necessário.
Mais uma vez parabéns pelo ótimo trabalho.
Abraços!
Marco Aurélio Schneider Loureiro
Primeiro gostaria de lhe dar os parabéns, muito bem explicado e didático. Desculpe pela dúvida que tenho, é que estou aprendendo a fazer sites e estou com uma dúvida bem idiota, mas que não consegui resolver ainda. Estou fazendo um site com um background simples, no entanto, quero deixar 2 faixas horizontais em cima (parecido com o do site www.supersomacessorios.com.br), como faço isso? Teria que criar um background dessa forma ou existe algum comando direto?
Muito obrigado pela ajuda.
Obrigado Marco! Quanto a sua dúvida, é geralmente simples fazer algo assim. Basta ter uma imagem das duas faixas e colocá-la como background repetindo indefinidamente no eixo x (background-repeat: repeat-x;) da tag body, por exemplo. Como tudo em desenvolvimento de frontend, há várias formas de se resolver um problema. Você pode também instalar o Firebug e ver como o efeito foi criado no site de referência.
O site indicado por você, possui uma imagem de fundo em forma de logomarca (http://css-tricks.com/perfect-full-page-background-image/)
O processo desse tipo de fundo é igual ou diferente daquele que você ensinou?
É difícil dizer porque o dono do site acabou de mudar o layout... Seria do novo ou do antigo? Mesmo assim, acho que deve ser outra técnica. Inspecionando com uma ferramenta como o Firebug você consegue descobrir. Uma técnica que sei que é usada no site são as Media Queries, para que o site se adapte para diferentes tamanhos de tela (farei um post sobre isso no futuro).
Nossa quanta gente que se deparou com esse mesmo problema, gostei muito do tópico. Eu estou tentando desenvolver em HTML5 e CSS3, no entanto há muito a aprender ainda. Esse post foi muito útil,
se compartilharmos as técnicas que vem surgindo com a implementação do HTML5 e o CSS3, tenho certeza que nossas vidas ficaram cada vez mais fácil.
fiquei fã cara! parabens, vou sempre vir aki agora, e quero pedir um efeito, do site estar funcionando normal, e em uma seção tem um slide show, como fazer para quando chegar nessa seção, somente as fotos do slide ir para a pagina inteira
Guilherme, será que vc poderia me ajudar com uma questão de CSS3? Se, sim, é o seguinte:
quero usar a propriedade background-size para fazer com que um a imagem aplicada ao body se adapte a qualquer resoloução de tela, conforme vc apresentou aqui no seu post:
body {
background: url(img/imagem.jpg) no-repeat center top;
O probleam começa quando eu coloco a div container com posionamento relativo para que possa trabalhar com as demais div com posionamento absoluto. Parece que esta ação impede o funcionamento do background size, porque a partir da determinação do posicionamento absoluto das divs , ele para de funcionar... Seria isso?
A propriedade background-size está aplicada a body. Portanto, não influi nem tem influência sobre o que é determinado sobre outras divs. A questão neste caso deve ser outra.
Valeu, Guilherme, pela resposta. Mas realmente o problema está acontecendo e deixa de acontecer quando eu mudo o tipo de posicionamento da div container. De qualquer forma, obrigada.
Olá eu utilizo um template que modifiquei para meu site, porém gostaria de colocar uma imagem no plano de fundo do site que ocupasse toda a janela do navegador, já procurei muitos posts no google mas como não entendo quase nada fico bem perdida. Você poderia me ajudar? Onde devo colocar a imagem e onde coloco os códigos?
Desde já agradeço.
Sim, esta é uma maneira, como também foi apresentado no final do post. Vendo o seu comentário, vi que tinha esquecido do "no-repeat"! Agora já foi corrigido.
Aliás, parabéns pelo seu trabalho!
Guilherme suas dicas são incríveis cara, estou utilizando muita coisa que aprendi aqui no seu site.
Bom só que estou com um desafio aqui para poder aprender mas não estou conseguindo, peguei um site de um cliente para renovar o design dele, só que o design que estou criando trabalha com uma div que vai ficar seguindo a imagem principal no topo. Um exemplo bom que posso lhe dar é o topo de seu site. Se eu redimensionar meu navegador tanto diminuindo como aumentando, percebe-se que essa container branca fica posicionada sempre no mesmo local da imagem do topo :-). ou seja, essa container vai seguindo o topo sem deslocar-se da mesma posição da imagem.
Cara estou com essa parte para desenvolver que é urgente pois o layout desenvolvido necessita disso. Se possível você criar uma aula ensinando a posicionar o topo desta forma eu ficaria muito grato. Mais do que já estou pelas aulas disponíveis :p
Um forte abraço. Sucesso!!! Estou no aguardo de uma possivel resposta :p
Olá Giovanni,
Fico contente de saber que você aprendeu novas técnicas aqui no site. Sobre a sua dúvida, na verdade é bem simples: utiliza-se divs com 100% da largura do site, como a imagem no topo que estou usando nesta versão do layout. Para elementos que você deseja ter largura fixa, como a área de conteúdo neste site, basta usar uma div com largura fixa (ou max-width, como usei aqui) e margin: 0 auto; para que ela fique centralizada na horizontal. É só isso.
Just a quick note to thank you for your kind comments about our website.
You might be interested to know that we have commenced plans to 'retire' our this website. As we say in Australia, it has had a 'good innings' - nearly five years.
We can only hope that our next attempt is as well received.
Hi Daniel,
Thank you for your comment! Certainly, your website has served as reference for many webdesigners throughout these years, 'good innings' indeed.
Looking forward to the next then!
O Sr. explicou tão direitinho.. desde 2008 tento colocar uma rosa no fundo do meu blog mas pelo que vi, seus ensinamentos servem só para sites =/ Se o Sr. souber de uma pessoa que possa me ajudar e a outras centenas de leigos, encarecidamente, nos ajude tb. Blogger nem tem CSS, é tudo no html, tem um "campo" aonde inserir CSS mas não sei em que parte inserir esses códigos.. enfim, cheguei perto.
Espero voltar tão feliz qto essas pessoas que te agradeceram.
Sucesso
Olá Cristina,
Trabalhar com Blogger é um pouco mais complicado pois ele é um sistema mais fechado e, mesmo sendo disponibilizada a edição do HTML e CSS, acredito que ficaria mais complicado fazer uma script como essa funcionar. Por isso a minha sugestão seria trabalhar com outras técnicas de imagem de fundo (por exemplo um padrão repetindo no fundo da tela).
Parabéns cara, passei por vários sites de sobre o assunto acima e muitos são prolixos.
Vi seu Portfólio, um dia se Deus permitir chego onde suas abilitades se encontram rs, vou criar meus sites de maneira fácil e rápida.
Parabéns amigão!
Da mesma forma que a div com conteúdo foi colocada por cima: trabalhando com position: absolute. A técnica tem limitações mas basta saber trabalhar com elas.
Amigo, eu consegui fazer aqui. Mas dá uma olhada, verifique um bug.
http://www.rodrigoantinarelli.com/aureum/index.html
Quando eu abro o site, tudo bem, funciona certinho. Mas a partir da segunda imagem, se eu aperto ctrl - perde o script de fit q vc fez.
Se tiver como dar um help, valeu! :D
Olá Rodrigo,
Pelo que vi, está funcionando certinho... A questão do ctrl - vai depender muito do navegador. Como é uma funcionalidade do navegador em si, fica difícil prever o comportamento da script. Além disso, enquanto a imagem está carregando, a script não aplica (apenas após o carregamento completo). Portanto algo que pode ajudar seria utilizar imagens mais leves e menos imagens no slideshow para acelerar o carregamento e minimizar os problemas.
Valeu Guilherme ajudou demais!
Só preciso de uma ajudinha, se possível.
Quero fazer uma transição semelhante ao site que você mostrou de exemplo.
Seria de grande ajuda se puder me dizer como faz a transição com mais imagens :D
Abs.
Olá Rodrigo,
Para isso, peço para que veja o código fonte do site da Berlim (referenciado no começo do tutorial). Usamos a div #imagens justamente para poder colocar mais imagens dentro. O plugin é o jquery.cycle.
Afff não vai.
coloca igual o que você colocou para inserir a imagem:
img id="bg" src="http://flickholdr.com/1600/1200/sunset" alt=""
só que bota uma id="bg" e o restp é o css ai em cima.
Olá Harrisson,
Perceba que, assim como o outro comentário que foi postado aqui, apresenta uma solução diferente. Primeiramente, este código que você passou já está no CSS como fallback. Segundo, ele não apresenta o mesmo comportamento que a script apresentada. Redimensione a janela para comparar. Na solução que apresento, tanto a Javascript quanto a CSS3, a imagem sempre se adapta à tela, tomando a largura ou a altura como referência, assim sempre mostrando o máximo da imagem possível. Utilizando apenas largura 100% e altura 100%, isso não acontece, podendo haver cortes maiores na imagem. Isso era especialmente indesejável no site do cliente onde precisei aplicar esta técnica. Então as "voltas", acredito, são justificadas.
Parabéns pelo artigo. Descobri o seu site pesquisando no Google, exatamente quando estava precisando fazer algo assim. Vou agora por em prática seus ensinamentos e ver o que consigo fazer. Obrigado.
Estou usando este recurso no site de um cliente, mas não quero que a imagem fique no centro da tela.
Preciso da imagem alinhada no topo/esquerda.
Ainda, meu menu será superior, tem como a imagem começar abaixo do menu?
Para isso você terá que trabalhar com as áreas ocupadas pelo menu e pela imagem para conseguir que eles não se sobreponham. E para mudar o alinhamento, basta verificar a parte específica da script que lida com isso e trabalhar com ela.
Tudo bem. O blog ainda está na configuração inicial e ainda não tive muito tempo para ver isso. Acho que as tags realmente não sairão no comentário. Mas acho que dá para ter uma ideia (por enquanto usemos a imaginação).
Boa tarde guilherme, eu nao tenho conhecimento em css, mas estou tentando. Meu problema e o seguinte:
Nao estou conseguindo fixar um arquivo flash para que ele fique no meio da tela na raiz site da div, a resolucao do mesmo e de 1000 x 600, mas quando adiciono o mesmo fica para o lado direito da tela. Sera que pode me ajudar passando o codigo do mesmo.
Obrigado e parabens pelo tutorial.
Teria que realmente ver o código do site que você está fazendo e também como você está inserindo o arquivo flash na página. De qualquer forma, há vários tutoriais na internet (nenhum aqui no blog por enquanto) que explicam como se centraliza um elemento no documento. Eu, pessoalmente, uso position: absolute; quando isso realmente é necessário, mas esta técnica também tem seus problemas.
Mas continue estudando CSS, pois é uma linguagem muito interessante e essencial para construir websites!
Blz. Guilherme consegui fazer aqui ficou lindo hehe. Percebi que a barra de rolagem não aparece mesmo redimencionando a janela do navegador, neste caso, tenho que fazer com que meu conteúdo sempre caiba na janela. Ou seja, não poderei utilizar textos grandes que necessitem de rolagem.
Fazer um site que sempre fique inteiro na tela apresenta vários desafios. Você pode navegar no site da Berlim para ver como que eu resolvi o problema de texto. O site acessa bem até em telas bem menores, apenas para celulares que teria que fazer alguns ajustes. Você consegue trabalhar com uma quantidade de conteúdo maior desde que saiba como resolver os problemas das resoluções menores e maiores (os extremos).
Olá Guilherme. Cara não estou conseguindo rotacionar as imagens. Acredito que esteja faltando algum plugin para a jQuery. Quando direciono para o endereço do plugin do site da Berlim que você fez por exemplo, dá certo. Onde encontro esse plugin para salvar na pasta local?
Parabéns pela iniciativa Guilherme. Todos pela democratização do conhecimento. Perfeito.
Me tira só uma dúvida. Qual o tamanho padrão das imagens que você usou, pois acho que se a imagem for muito pequena irá distorcer quando visualizada em um monitor com resolução muito alta. E vice-versa.
Neste exemplo não lembro que tamanho de imagem que utilizei, pois usei um serviço para servir a imagem.
Mas o que eu sugiro é utilizar um tamanho que ofereça suficiente qualidade, pois os navegadores hoje lidam bem com a redução e espansão de imagens.
Sim, se for muito pequena, vai distorcer em telas maiores. Se a imagem for muito grande, não acho que vai distorcer tanto em telas menores, mas estas pessoas terão que baixar uma imagem enorme para vê-la "pequena". Ainda não existe solução definitiva para isso, mas existem serviços que servem a imagem de acordo com o tamanho da tela, para economizar largura de banda. Se você pesquisar encontra (não lembro agora o nome dos sites).
Não estou conseguindo deixar a div em 100% da tela alguem pode me ajudar
HTML
conteudo
CSS
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%; background:#966;}
#main {padding-bottom: 40px; background:#F00;} /* deve ser a mesma altura do rodapé */
#footer {
width:100%;
background:#333;
position: relative;
margin-top: -40px; /* A mesma altura do rodapé, o valor deve ser negativo */
height: 40px;
clear:both
}
Opa, obrigado pelo belo post.
Estava procurando algo assim pra um site meu mesmo que quero implantar aqui.
Nao manjo nada de html nem javascript nem css, mas comecei estudar tudo isso e espero logo estar sabendo algo sobre.
Uma duvida no dreamwaver quando clico em ver a compatibilidade do browser ele diz que nao é compativel com alguns browsers, posso ter problemas com isso ?
Sendo que só testei no I.E 8, Chrome, e Firefox 9.
Que bom que o post foi útil para você.
Quanto a compatibilidade, não sei sobre a confiabilidade do Dreamweaver em relação a isso. Portanto é mais importante testar nos próprios navegadores e, se possível, em outros computadores também e com outros usuários.
Obrigado pela dica Azziz! Não tinha pensado nisso.
O funcionamento deste código pode ser satisfatório para alguns casos, mas não é igual à técnica que estou passando. Com a técnica javascript (ou CSS3), perceba que o redimensionamento da imagem funciona de forma diferente. Mesmo assim, obirgado pelo ponto de vista alternativo.
Quer uma forma muuuiito mais facil?
aqui vai:
mude essa linha:
#fundoFoto img {min-width: 100%;min-height: 100%;position: absolute;}
e remova todo javascript que voce fez pois com isso o navegador ja faz tudo sozinho e nem precisa de css3 !
testado no IE 7,8,9 FF e Chrome, só não testei no IE6
Cara, independente de ter mais alternativas que funcione ou não, você esta de parabéns, realmente funciona, mas o que eu gostaria muito de comentar, é que muita gente acha que sabe tudo e fica escondendo o peixe (informação), mas você é dos meus, informação gratuita para todos, muito bom mesmo!
Obrigado Cleber,
O que eu puder colocar de informação útil aqui certamente o farei. Fique atento também para o curso básico de HTML e CSS que estarei lançando em breve!
Adorei o artigo, mas estou tendo problemas no IE 9. No final do site ele está aparecendo uma barra branca, como se o fundo da imagem terminasse ali e ele complementasse sem a imagem, fica sem fundo.
A imagem não está sendo aplicada no browser todo, vc sabe o porque disso, estou tentando catar aqui no código, mas não consigo achar nada.
Que bom que gostou do artigo.
Problemas como esse precisam de bastante análise, pois inconsistências de HTML ou CSS são parte do nosso trabalho. Eu teria que ver um exemplo para tentar diagnosticar o que está acontecendo. Tente fazer modificações no código (salve uma cópia antes) pois esta é a única maneira para se chegar a uma solução.
Olá, Guilherme
Qual foi recurso q vc usou para fazer o slideshow do bg?
Teria mostrar a aplicação dele no código?
Estou com um projeto q precisa ter algo parecido.
Para fazer um slideshow, basta adaptar um pouco a técnica. No site da Berlim Ambientes (veja no meu portfolio) utilizei várias imagens dentro da mesma div e o plugin cycle para jquery. Pode ver o código do site do cliente para ter uma ideia.
olá eu utilizei exatamente como esta ai, porem quando altero o tamanho de width: alinha tudo para a direita. estou usando width:900px;
Se puder me ajudar eu agradeço e agradeceria mais ainda se pudesse me enviar um E-mail.
Obrigado.
Olá Gunner,
Esta técnica foi desenvolvida para ser utilizada na área da tela inteira. Caso você queira trabalhar com uma largura fixa, talvez nem precise de tudo isso. Depende de cada caso, pode até ser mais fácil de fazer.
Qualquer coisa me mande um e-mail que eu posso dar uma olhada. Apenas peço desculpas se eu demorar para responder pois estou com bastante projetos no momento.
Olá amigo tem como fazer isso com um backgroud-color, por exemplo no css defino pra ele ter 100% da tela, mais quando fecho o navegador ao ponto de surgi uma barra de rolagem horizontal, o mesmo rodapé não preenche de cor o 100%.
Cara vc tá de parabens, tou começando agora na area de web e tava precisando justamente fazer esse esquema no site do criente, valeu pelo post, muito bom mesmo...
Caramba Parabéns, achei seu site pesquisando na web e tive que comentar, PQP que artigo animal velho vc está de parabéns vou acompanhar seu site, já adicionei nos favoritos rsrs!!! Posso manter contato e dar dicas para posts?
Valeu Thiago! Infelizmente tenho pouco tempo para atualizar o blog atualmente, mas estarei atualizando-o pouco a pouco. Obrigado pelo apoio e se tiver alguma dica envie um e-mail.
