Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marcos Aurélio - GTI

[Resolvido] Estender Background

Por , em Desenvolvimento frontend

Recommended Posts

Marcos Aurélio - GTI    0

Marcos Aurélio - GTI
Postado

Olá amigos!

 

Sabe quando a gente abre as propriedades de vídeo do Windows e altera o plano de fundo e, você coloca em centralizado, lado a lado ou estendido?

Pois é, o assunto é sobre este Estendido mesmo!

 

Pessoal como faço para estender o background de uma página, tipo assim:

Tenho uma imagem de 1024 x 768 pixels e, quero que ao abrir a página em um monitor Widscreen ela se alargue se estendendo em toda área disponível ao uso do browser.

 

Pra mim não importa se a imagem perder qualidade, só quero que fique igual àquela opção das propriedades de vídeo do Windows.

 

Então! Há algum código HTML para o <body> ou um <style type="tex/css"> que resolva meu problema?

Lembrando que qualquer código serve, Script PHP, CSS3, javascript, jQuery ...

 

Aguardo resposta falowww!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunosk2    0

brunosk2
Postado

Cara, tem como você postar uma imagem do resultado que você quer obter?

Talvez tenha uma maneira melhor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Bom dia,

 

Você pode fazer da seguinte forma:

 

CSS

* {
   margin:0;
   padding:0;
 }

#background{
   position:absolute; 
   width:100%; 
   height:100%;
 }

 

XHTML

<img src="img/suaImagem.jpg" width="1024" height="768" alt="background" id="background" />

 

FONTE: Clique aqui

 

Espero que ajude.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Aurélio - GTI    0

Marcos Aurélio - GTI
Postado

As informações que angelorubin me passou funcionou, mas, tive que adicionar uma <div id="box">Conteúdo</div> pra por o conteúdo, veja como ficou:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

#background{
position:absolute; 
width:100%; 
height:100%;
}
#box {
position:absolute;
margin:0 100px auto;
}
</style>
</head>

<body>
<img src="bg.jpg" width="1024" height="768" alt="background" id="background" />
<div id="box">
aaa
</div>
</body>
</html>

 

Vou adaptar aqui no meu projeto OK, valeu aí amigos do Forum, este problema foi resolvido :clap: :joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito