Poner imagen de fondo en página web html

zairillo · 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!

#!drvy · 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 (css) [Seleccionar]

<style type="text/css">
body {background:url("ruta/image.png");}
</style>

O,

Código (css) [Seleccionar]

<style type="text/css">
html {background:url("ruta/image.png");}
</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

zairillo · 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 [Seleccionar]


<!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 [Seleccionar]

background-color:transparent;

¿Cuál es el problema?

Saludos y gracias!

Pablo Videla · 16 Marzo 2012, 13:50 PM

Código (html) [Seleccionar]


<!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>
<style type="text/css">
body {background:url("images/img01.jpg") repeat-x left top;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<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>


</noframes></body>
</html>

Intenta con mi corrección. El problema es que el body debe abarcar todo el codigo, no estar en la nada xD

zairillo · 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...

Pablo Videla · 16 Marzo 2012, 14:07 PM

Cita de: zairillo 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...

Lee sobre esto

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

tienes que modificar el CSS

Spider-Net · 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.