Leccion 1 Fondo de web con imagen

KillKaizer · 21 Jun 2008, 09:22 · Solicitar retirada

Ayuda porfavor lo que pasa es que e llegado hasta este paso de poner una imagen como fondo pero no me aparece al momento de darle en Preview, solo sale el color de fondo pero no la imagen. En el HTML-Kit y pues como sabran soy nuevo en esto.

Deveras agradeceria su respuesta gracias

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Pagina Principal del Ejemplo CCTW</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">

</head>
<body>

Bienvenidos a mi página web. Muy pronto estará lista!</p>

Página creada gracias a CCTW</p>

</body>
</html>

estilos.css

body {background-color:#E6E6FA ; background-image:url(objetos/fondo.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%;}

Deathly Snake · 21 Jun 2008, 15:30 · Solicitar retirada

A ver; debes comprobar un par de cosas :wink:

1) Asegurate de que la imagen que deseas colocar se llame: fondo y que tega la extension png

2) Ten cuidado con el nombre de la imagen ; porque si gaurdaste la imagen con este nombre: fondo.png ; tienes un problemita :wink: ; La imagen ya de por sí tiene la extension asignada (png) por lo que si tu le agregas en el nombre la particula png quedaria así:

fondo.png.png

Lo verde, elñ nombre que le diste :wink:

Lo rojo, la extensión de la imagen

Me explico?

En sintesis, porque no pruebas a poner:

body {background-color:#E6E6FA ; background-image:url(objetos/fondo.png.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%;}

Agregar lo rojo :wink:

3) nAsegurate deque la imagen se encuentre en la carpeta objetos :wink:

Pruebalo y nos cuentas, saludoss :wink:

KillKaizer · 21 Jun 2008, 21:28 · Solicitar retirada

Deathly Snake escribió:A ver; debes comprobar un par de cosas :wink:

1) Asegurate de que la imagen que deseas colocar se llame: fondo y que tega la extension png

2) Ten cuidado con el nombre de la imagen ; porque si gaurdaste la imagen con este nombre: fondo.png ; tienes un problemita :wink: ; La imagen ya de por sí tiene la extension asignada (png) por lo que si tu le agregas en el nombre la particula png quedaria así:

fondo.png.png

Lo verde, elñ nombre que le diste :wink:

Lo rojo, la extensión de la imagen

Me explico?

En sintesis, porque no pruebas a poner:

body {background-color:#E6E6FA ; background-image:url(objetos/fondo.png.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%;}

Agregar lo rojo :wink:

3) nAsegurate deque la imagen se encuentre en la carpeta objetos :wink:

Pruebalo y nos cuentas, saludoss :wink:

Ya revise bien eso e hice lo del doble png y de todas formas sigue sin aparecerme el fondo de imagen

Raulyure · 22 Jun 2008, 05:09 · Solicitar retirada

KillKaizer escribió:
Deathly Snake escribió:A ver; debes comprobar un par de cosas :wink:

1) Asegurate de que la imagen que deseas colocar se llame: fondo y que tega la extension png

2) Ten cuidado con el nombre de la imagen ; porque si gaurdaste la imagen con este nombre: fondo.png ; tienes un problemita :wink: ; La imagen ya de por sí tiene la extension asignada (png) por lo que si tu le agregas en el nombre la particula png quedaria así:

fondo.png.png

Lo verde, elñ nombre que le diste :wink:

Lo rojo, la extensión de la imagen

Me explico?

En sintesis, porque no pruebas a poner:

body {background-color:#E6E6FA ; background-image:url(objetos/fondo.png.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%;}

Agregar lo rojo :wink:

3) nAsegurate deque la imagen se encuentre en la carpeta objetos :wink:

Pruebalo y nos cuentas, saludoss :wink:

Ya revise bien eso e hice lo del doble png y de todas formas sigue sin aparecerme el fondo de imagen

Hola:
Puede hacer lo siguiente, saque su imagen de la carpeta objetos, pongala en una parte de su escritorio , ábrala con algun editor de imagenes (Photoshop o Paint), puede pulsar con el botón derecho del ratón en la imagen para que se le abra el desplegable y en "abrir con" elige con que quiere abrir esa imagen, luego que esté abierta pulse en "archivo" y en "guardar como", en la parte de abajo , en la casilla donde dice "nombre" borre lo que hay allí y escriba el nombre de la imagen (solo el nombre), luego en la casilla de mas abajo, la que dice "tipo" , allí pulsa en la flecha que hay a la derecha y busca la extensión de con que extensión quiere guardarla, (gif o jpg o png), pulsa en dicha extensión elegida y después pulsa en guardar, así sabrá exactamente cual es la extensión de esa imagen, luego ya sabiéndolo puede ponerla nuevamente en su carpeta objetos y ponerle el nombre y la extemsión correcta en la hoja de estilo.
Saludos

daury1992 · 22 Jun 2008, 05:14 · Solicitar retirada

pUede ser..

la ruta o el nombre del archivo..ahy algunos hosting que tienen esa cualida...
que como tienes el nombre del archivo debes ponerlo...
EJmplo

Si tu imagen se llama
ChIfo.Gif .no puedes poner en la ruta chifo.gif------
tienes que ponerlo tal y como esta..ChIfo.Gif

Tambien recuerdo que ahy algunos hosting gratis que aun no soporatan
formato .PNG

KillKaizer · 22 Jun 2008, 05:30 · Solicitar retirada

Raulyure escribió:
KillKaizer escribió:
Deathly Snake escribió:A ver; debes comprobar un par de cosas :wink:

1) Asegurate de que la imagen que deseas colocar se llame: fondo y que tega la extension png

2) Ten cuidado con el nombre de la imagen ; porque si gaurdaste la imagen con este nombre: fondo.png ; tienes un problemita :wink: ; La imagen ya de por sí tiene la extension asignada (png) por lo que si tu le agregas en el nombre la particula png quedaria así:

fondo.png.png

Lo verde, elñ nombre que le diste :wink:

Lo rojo, la extensión de la imagen

Me explico?

En sintesis, porque no pruebas a poner:

body {background-color:#E6E6FA ; background-image:url(objetos/fondo.png.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%;}

Agregar lo rojo :wink:

3) nAsegurate deque la imagen se encuentre en la carpeta objetos :wink:

Pruebalo y nos cuentas, saludoss :wink:

Ya revise bien eso e hice lo del doble png y de todas formas sigue sin aparecerme el fondo de imagen
Hola:
Puede hacer lo siguiente, saque su imagen de la carpeta objetos, pongala en una parte de su escritorio , ábrala con algun editor de imagenes (Photoshop o Paint), puede pulsar con el botón derecho del ratón en la imagen para que se le abra el desplegable y en "abrir con" elige con que quiere abrir esa imagen, luego que esté abierta pulse en "archivo" y en "guardar como", en la parte de abajo , en la casilla donde dice "nombre" borre lo que hay allí y escriba el nombre de la imagen (solo el nombre), luego en la casilla de mas abajo, la que dice "tipo" , allí pulsa en la flecha que hay a la derecha y busca la extensión de con que extensión quiere guardarla, (gif o jpg o png), pulsa en dicha extensión elegida y después pulsa en guardar, así sabrá exactamente cual es la extensión de esa imagen, luego ya sabiéndolo puede ponerla nuevamente en su carpeta objetos y ponerle el nombre y la extemsión correcta en la hoja de estilo.
Saludos

Yeah!!! Yeah!!! Gracias mi Hermano eso deveras me funciono.
Mira voy a poner lo que hice por si algun otro tiene la misma duda.
Lo que hice fue cortarla de la carpeta de objetos/pegarla en el escritorio/abrir con Paint/Guardar como fondo.npg y abajo en donde se pone el tipo de archivo seleccionarNPG.(NPG)/ luego volver a abrir con paint la misma imagen/darle guardar otra vez pero ahora en ves de ponerle fondo.npg solo fondo y seleccionar denuevo en tipo de archivo NPG.(NPG) y listo lo guardas y en el escritorio apareceran 2 archivos. El q cortaste de la carpeta objetos lo eliminas ya que no lo ocupas y el otro que a camviado completamente de tipo de archivo a NPG lo pegas en la carpeta de objetos y luego ya esta listo.
Eso lo descubri grax. a Raulyure grax.

Infinity · 24 Jun 2008, 04:05 · Solicitar retirada

Tengo un problema similar con las imagenes, pero en mi caso es que aparece repetida y aunque le indico que no repita y la posicion, insiste en aparecer repetida por toda la pagina. Esta es la orden que le escribi en estilos css:

body {background-color:#E6E6FA;background-image:url(objetos/angel1.png);background-position: center center;background-repeat:no repeat}

Repito que la imagen aparece, lo que no hace es la especificacion de posicion y repeticion.
Gracias anticipadas por la ayuda y este es un excelente curso. Mira que habia buscado hace tiempo hasta que di con ustedes. Mil gracias. Bendiciones. :D

Raulyure · 24 Jun 2008, 04:59 · Solicitar retirada

Infinity escribió:Tengo un problema similar con las imagenes, pero en mi caso es que aparece repetida y aunque le indico que no repita y la posicion, insiste en aparecer repetida por toda la pagina. Esta es la orden que le escribi en estilos css:

body {background-color:#E6E6FA;background-image:url(objetos/angel1.png);background-position: center center;background-repeat:no repeat}

Repito que la imagen aparece, lo que no hace es la especificacion de posicion y repeticion.
Gracias anticipadas por la ayuda y este es un excelente curso. Mira que habia buscado hace tiempo hasta que di con ustedes. Mil gracias. Bendiciones. :D

Hola:
Pruebe poner la frase ..... no repeat...... asi: no-repeat puede que le de resultado.
Saludos

KillKaizer · 24 Jun 2008, 20:45 · Solicitar retirada

Raulyure escribió:
Infinity escribió:Tengo un problema similar con las imagenes, pero en mi caso es que aparece repetida y aunque le indico que no repita y la posicion, insiste en aparecer repetida por toda la pagina. Esta es la orden que le escribi en estilos css:

body {background-color:#E6E6FA;background-image:url(objetos/angel1.png);background-position: center center;background-repeat:no repeat}

Repito que la imagen aparece, lo que no hace es la especificacion de posicion y repeticion.
Gracias anticipadas por la ayuda y este es un excelente curso. Mira que habia buscado hace tiempo hasta que di con ustedes. Mil gracias. Bendiciones. :D
Hola:
Pruebe poner la frase ..... no repeat...... asi: no-repeat puede que le de resultado.
Saludos

Tambien podrias poner espacios como por ejemplo:

body { background-color: #E6E6FA ; background-image:url(objetos/angel1.png);background-position: center center ; background-repeat: no repeat }

Intentalo aver si te sirve
Salu2

Infinity · 27 Jun 2008, 02:11 · Solicitar retirada

Lo de los espacios no me funciono, al principio lo tenia. Pero lo de el dash en no repeat si. Muchas gracias por su ayuda. Es bueno saber que cuento con un apoyo tan excelente. Dios les bendiga mucho! Ya puedo continuar a la proxima leccion.