Como inserir uma figura como background numa página ASP.NET? A figura tem que ficar por baixo dos DIV(s). É possível?

Tenho um arquivo de Stylo que me permite centralizar a página do web site. Entretanto se coloco uma figura esta não fica centralizada. Experimenta o CSS do template do VS2010. Acontece a mesma coisa. Como fazer para que a figura comporte-se como um texto por exemplo que colocamos num CONTROL "cabecalho". Ao inserir o CONTROL o cabeçalho fica centralizado. Entretanto se coloco uma imagem essa não centraliza.

 

Exibições: 444

Respostas a este tópico

Boa noite Paulo

 

Obrigado por responder. Fiz conforme sua orientação e a imagem ficou como queria. Com relação a centralizar a imagem já consegui faze-lo. Após o <DIV> tenho que colocar o <h1> com stylo centralizado. A imagem ficou como eu queria. O <h1> esta no CSS que copiei do template do VS 2010. Inclusive já consegui fazer a imagem de fundo estilo xadrez com uma pequena diferença na tonalidade para colocar outros componentes em cada quadro. Rpeti no eixo "x". Fazer alterações nesse CSS é um problema. Faz parte do aprendizado do CSS pois já tenho um livro e estou estudando bastante. Para as imagens estou usando o GUIMP que é gratuito e muito bom.

Um abraço 

João Paulo Grassi disse:

Ola João Castro.

Pelo que entendi você quer que a imagem fique de plano de fundo e que todo o conteúdo fique sobre o fundo seria isso?

Se sim, acredito que basta definir a imagem como background da página via CSS, dessa forma:

 

body{
  margin:0;
  padding:0;
  background:url("imagens/background.jpg");
  }

 

Você também pode usar o repeat-x ou repeat-y para a imagem se repetir nesse eixos.

Agora a parte da imagem ficar centralizada não entendi muito bem, se tivesse como mostrar um exemplo seria mais fácil de entender.

 

Abraço.

Olá João,

Para que o background fique centralizado, você deve declarara o 'background-position'. Então, completando o que o João Paulo disse, ficaria assim:

 

body{
  margin:0;
  padding:0;
  background:url("imagens/background.jpg");

  background-position: center;

  }

Se preferir você poderá colocar de uma forma abrevida, ficando assim:

   background: url(image/background.jpg) no-repeat top center;

 

Abraço,

RSS

© 2017   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço