elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Poner imagen de fondo en página web html
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Poner imagen de fondo en página web html  (Leído 19,335 veces)
zairillo

Desconectado Desconectado

Mensajes: 32


Ver Perfil
Poner imagen de fondo en página web html
« en: 14 Marzo 2012, 18:41 pm »

Hola a todos!

Soy novato en esto de programación web. Estoy realizando una web en html y para la persona que me la ha pedido quiere que sea sencilla y que pueda ser modificada por ella, de modo que me pidió que lo hiciera en Dreamweaver.
Pues bien, he estado investigando cómo empezar y parece ser que está todo un poco antiguo de la manera que me han pedido que lo haga. De todas formas, tengo que hacerlo así.
He creado una página nueva de html en la que he insertado marcos, uno superior, uno en la parte de la izquierda y otro en marco principal que estará en el centro.
Pues bien, en el css donde defino las características de los parámetros, he puesto de fondo una imagen, no es más que un color gris que se va difuminando desde arriba hacia abajo de la página hasta hacerse blanco.
Mi problema es que no sé cómo hacer que esa imagen sea para toda la web, ya que o bien tengo que ponerla en cada marco (por lo que queda muy feo ya que el difuminado no es uniforme) o si o quito del marco de la izquierda por ejemplo, se me pone el fondo blanco. He intentado ponerlo transparente para los marcos distintos del marco superior, pero no hay forma.
Agradecería un poco de ayuda.

Saludos!


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.613



Ver Perfil WWW
Re: Poner imagen de fondo en página web html
« Respuesta #1 en: 14 Marzo 2012, 19:39 pm »

En tu archivo css o en las reglas que tengas establecidas, debes tener una llamada "body" o "html".

En ella debes definir el background-image o en su default, background.

Ejemplo

Código
  1. <style type="text/css">
  2. body {background:url("ruta/image.png");}
  3. </style>

O,

Código
  1. <style type="text/css">
  2. html {background:url("ruta/image.png");}
  3. </style>

Puedes utilizar mas parametros como repeat-x que hara que el fondo se repita solo horizontalmente.

Estas etiquetas aplican el cambio a <body></body> o <html></html> en el archivo html. Por tanto se aplicaran al fondo entero.

Saludos


En línea

zairillo

Desconectado Desconectado

Mensajes: 32


Ver Perfil
Re: Poner imagen de fondo en página web html
« Respuesta #2 en: 16 Marzo 2012, 13:48 pm »

Creo que no lo entiendo bien.

Este es el código que tiene la página en la que he definido los marcos, y como se puede ver, incluyo un marco superior (Menu.html), un marco a la izquierda (MarcoIzquierda.html) y un marco inferior (MarcoAbajo.html). Cada uno de estos marcos tiene el mismo archivo css que les da forma.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
  <frameset rows="124,*" frameborder="no" border="0" framespacing="0">
    <frame src="Menu.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
    <frameset cols="400,*" frameborder="no" border="0" framespacing="0">
      <frame src="MarcoIzquierda.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
      <frame src="Untitled-3.html" name="mainFrame" id="mainFrame" title="Arriba" />
    </frameset>
  </frameset>
  <frame src="MarcoAbajo.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="Abajo" allowtransparency="true"/>
</frameset>
<noframes>
<style type="text/css">
body {background:url("images/img01.jpg") repeat-x left top;}
</style>
<body>
</body></noframes>
</html>

Mi idea es crear esta página con los marcos e ir variando únicamente el "mainframe" según tenga que ser variado. Entonces, como me has dicho, he incluido el código que me dijiste abajo, pero no hace nada. Además, en el body de cada archivo css de cada marco, he puesto
Código:
background-color:transparent;

¿Cuál es el problema?

Saludos y gracias!
En línea

Pablo Videla


Desconectado Desconectado

Mensajes: 2.275



Ver Perfil WWW
Re: Poner imagen de fondo en página web html
« Respuesta #3 en: 16 Marzo 2012, 13:50 pm »

Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style type="text/css">
  5. body {background:url("images/img01.jpg") repeat-x left top;}
  6. </style>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title>Documento sin título</title>
  9. </head>
  10. <body>
  11. <frameset rows="*,80" frameborder="no" border="0" framespacing="0">
  12.  <frameset rows="124,*" frameborder="no" border="0" framespacing="0">
  13.    <frame src="Menu.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  14.    <frameset cols="400,*" frameborder="no" border="0" framespacing="0">
  15.      <frame src="MarcoIzquierda.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
  16.      <frame src="Untitled-3.html" name="mainFrame" id="mainFrame" title="Arriba" />
  17.    </frameset>
  18.  </frameset>
  19.  <frame src="MarcoAbajo.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="Abajo" allowtransparency="true"/>
  20. </frameset>
  21. <noframes>
  22.  
  23.  
  24. </noframes></body>
  25. </html>
  26.  

Intenta con mi corrección. El problema es que el body debe abarcar todo el codigo, no estar en la nada xD
« Última modificación: 16 Marzo 2012, 13:53 pm por DonVidela » En línea

zairillo

Desconectado Desconectado

Mensajes: 32


Ver Perfil
Re: Poner imagen de fondo en página web html
« Respuesta #4 en: 16 Marzo 2012, 14:01 pm »

He hecho lo que dices y lo que pasa ahora es que sale el fondo como yo quería, pero los marcos que tenía hechos no salen...como si fuesen machacados por la imagen...
En línea

Pablo Videla


Desconectado Desconectado

Mensajes: 2.275



Ver Perfil WWW
Re: Poner imagen de fondo en página web html
« Respuesta #5 en: 16 Marzo 2012, 14:07 pm »

He hecho lo que dices y lo que pasa ahora es que sale el fondo como yo quería, pero los marcos que tenía hechos no salen...como si fuesen machacados por la imagen...

Lee sobre esto

http://htmlhelp.com/es/reference/css/color-background/#background-position

tienes que modificar el CSS
En línea

Spider-Net


Desconectado Desconectado

Mensajes: 1.165


Un gran poder conlleva una gran responsabilidad


Ver Perfil WWW
Re: Poner imagen de fondo en página web html
« Respuesta #6 en: 17 Marzo 2012, 05:05 am »

No sé si estás aprendiendo HTML ahora, pero te doy un consejo: olvídate de los marcos. Antiguamente se usaban, pero actualmente están completamente en desuso. Lo más que puedes ver es el marco flotante y en casos muy concretos. Por lo general el marco ya es una herramienta en HTML que se puede obviar. Desde la llegada de AJAX no tienen mucho sentido. De hecho te habrás dado cuenta que ya apenas existen webs con marcos. Así que no te compliques la vida con ellos, mejor maqueta con divs, y cambia el contenido con AJAX.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines