imagen de fondo

Novato escribió:Hola a todos, a ambos deciros que comprobeis:


:arrow: Que la imagen se llama fondo (en minusculas), es muy común creer que se llame fondo y que luego resulte que por error la hubierais guardado con el nombre de fondo.png y no es así, el nombre ha de ser solo eso: fondo.

Un saludo.

Siiiiii!!! este era mi error!! (habia nombrado mi imagen en la carpeta /objetos "fondo.jpg", en lugar de solo "fondo", por eso no conseguia ver la imagen) Lo consegui!!!!!!!!!! por fin aparece mi imagen!!!!! Mil gracias Novato!!!!!!!

P.D. Es necesario que la imagen de fondo este en formato .png? Yo la tengo en .jpg Que puedo hacer ahora para que las letras se vean bien sobre la imagen? porque el fondo de mi imagen y las letras no se ven bien... :(

A los que teneis los mismos problemillas de novatos que yo, un consejito: animo y no desespereis! Si veis que os estais volviendo locos y que no os salen las cosas, si es necesario, borrarlo todo y empezar otra vez de cero (como he hecho yo), vereis como a la 2ª o a la 3ª os sale todo mucho mejor! :wink:

Saludos

Starbuck

Con musiquilla se trabaja mejor

*Rosa* escribió:

Raulyure escribió: Hola:
Espero no haberme olvidado de lo que vi en sus imagenes que ha puesto, pero creo haber notado que usted tiene en el HTML-KIT la carpeta "web-ejemplo-cctw-local", y debajo de ella el index.html y la hoja de estilos.css, pero no veo la carpeta objetos que también debiera aparecer allí.
Resumo:

Usted en principio creó una carpeta en su escritorio, a la que llamó "mis-paginas-web", dentro de esa carpeta debió crear una carpeta que se llama "web-ejemplo-cctw", y dentro de esa carpeta debió de crear otra que llamaría "objetos", imagino que después de eso usted abrió el programa HTML_KIT y creó por así decirlo en el programa HTML-KIT un acceso directo de esa carpeta que en su escritorio se llama "web-ejemplo-cctw", pero para no confundirse, esa carpeta que en el escritorio se llama "web-ejemplo-cctw", usted en el programa HTML-KIT le llama "web-ejemplo-cctw-local", y para ello se supone que usted fue a la pestaña "workspace" y al pulsar se le abrió un pequeño desplegable donde eligió:
"Añadir carpeta/servidorFTP y en el desplegable siguiente eligió "añadir carpeta LocalRed", con eso usted crea, la carpeta en el programa , y al ser un acceso directo de la que tiene en el escritorio, esa carpeta tendría que llevar dentro a la carpeta objetos.
Es probable (y solo digo probable), que por alguna razón, usted haya creado la carpeta objetos dentro de la carpeta "web-ejemplo-cctw" (la de su escritorio) después de haber creado su copia (por decirlo así) en el programa HTML-KIT, (la carpeta "web-ejemplo-cctw-local", ) y por eso la carpeta objetos no le aparece en el programa cuando abre la carpeta "web-ejemplo-cctw-local", y si no tiene la carpeta objetos en el programa, lógicamente tampoco aparecerá la imagen que se supone tiene dentro de ella.
Le repito que solo me estoy basándo en lo que he visto de las imagenes que usted nos ha puesto.
Quisiera saber si realmente cuando usted hace doble click en la carpeta "web-ejemplo-cctw-local" (la que tiene en el programa) tiene también la carpeta objetos (esta debiera , después de abrir la carpeta "web-ejemplo-cctw-local") aparecer debajo de la carpeta, al igual como le aparece el index y la hoja de estilo, por que si no es así, entonces veríamos la forma de arreglar el problema
Saludos
Como dato:
Usted debe tener en su escritorio una carpeta que se llama "mis-paginas-web", dentro de esa carpeta usted debe tener otra que se llama "web-ejemplo-cctw", y dentro de esa carpeta "web-ejemplo-cctw" debe tener una carpeta llamada "objetos" la pagina index.html y la hoja de estilos.css

Muchas gracias por contestar :wink:

Al abrir el workspace no me aparece la carpeta "objetos" cosa que me extraño en su momento, pero no me di cuenta hasta que no me funcionaba la imagen de fondo.

Voy a rehacer todo de nuevo, espero que esta vez me salga todo correcto.
Gracias una vez mas ;)

________
Edito el mensaje porque me he dado cuenta de algo que hace que no me vaya bien al crear las carpetas.
Como se muestra en el curso yo creé la carpeta "mis-paginas-web" en el escritorio. Dentro de ella otra carpeta llamada "web-ejemplo-cctw" y dentro de ésta la carpeta "objetos". Hasta ahí todo bien, pero mis dudas surgen cuando en este link http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l… me pide que cree el sitio local. Concretamente en el apartado 2 de ese párrafo es donde me quedo atrancada. Dice que en la ventana que se abre pongamos la carpeta "pagina-ejemplo-cctw" y es entonces cuando me hago un lío ya que cuando he creado anteriormente las carpetas no se me ha indicado nada sobre esa carpeta.
Bueno, una vez eso, yo la creo con su título y demás pero el problema está que cuando ya lo tengo creado no me sale el signo "+" para ver las otras carpetas :? De ahí a que ya en un futuro no me saliera la imagen de fondo.

Un saludo y gracias.

Hola
En realidad, el curso le dice mas o menos lo siguiente, se lo explicaré a mi manera:
Cuando usted pulsa en la pestaña "workspace" se abre un pequeño desplegable, usted pone el cursor donde dice "añadir carpeta/servidorFTP", entonces se abre otro pequeño desplegable donde usted debe elegir o pulsar donde dice "añadir carpeta local/red", Allí se abre una ventana, y en la casilla donde dice "Folder path", debiera de aparecer allí la ruta que va a seguir el programa HTML-KIT hasta la carpeta "web-ejemplo-cctw" (la que está en su escritorio), si no aparece la busca con la flecha que está a la derecha hasta que le salga la ruta completa, (Disco:C/Usuario/Escritorio/mis-paginas-web/web-ejemplo-cctw/) en que la ultima debe ser la carpeta "web-ejemplo-cctw" (fíjese como aparece en el ejemplo del curso, cuando en esa casilla ya esté esa ruta, entonces en la casilla de abajo, donde dice "Display name" usted pone o escribe "web-ejemplo-cctw-local", esa carpeta sería una copia de la carpeta "web-ejemplo-cctw", solo que en el programa HTML-KIT se llamará "web-ejemplo-cctw-local". (para diferenciarla de la que tiene en su escritorio)
Le daré un ejemplo:
Si usted tiene una carpeta en su escritorio que se llama mi carpeta y quiere hacer una copia de esa carpeta y que también esté en su escritorio, lógicamente no puede llamarse igual, (porque el ordenador no acepta archivos que tengan el mismo nombre y estén guardados en el mismo lugar), tendrá que cambiarle un poco el nombre, entonces le llamaría mi carpeta copia.
Por eso la carpeta que usted tiene en el escritorio, la que se llama "web-ejemplo-cctw" en el programa HTML-KIT se tiene que llamar "web-ejemplo-cctw-local"
Saludos

lsnto escribió::? buenas necesito ayuda la imagen de fondo no me sale ya e revisado lo de las minusculas y y eso ... y lo de la extencion del archivo pero igual no me sale... ahh tambien al insertar una imagen en la pagina me sale es un cuadro con una X ... aqui les dejo haber si me ayudan ...


index.html:

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


[contenido no disponible]</p>


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


Pagina creada gracias a <a ref="HTTP://www.comocreartuweb.com"target="_blank">CCTW</a></p>
</body>
</html>

estilo.css

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

bueno espero su ayuda y gracias.

Hola:
En principio, le recomiendo que aunque le cueste un poco lea las sugerencias anteriores dadas acá mismo donde usted ha puesto el mensaje, prácticamente están casi todas las variantes del porqué no aparece la imagen que uno quiere poner, como dato le adelantaré:

El color de fondo es diferente a la imagen de fondo, en cierto sentido son diferentes maneras de tratar el problema.
Si en su pagina el color de fondo (background-color) se ve, es que está bien relacionada su página con la hoja de estilo, eso significa que la página puede recibir ordenes desde la hoja de estilo, ¿cómo uno relaciona la pagina con la hoja de estilo?. Pues poniéndo el siguiente código entre el <head> y el </head> de su pagina: <link rel="stylesheet"href="estilos.css"type="text/css"media="all"> sin embargo si es la imagen la que no se ve, pueden ser varias cosas. Una de ellas es que su carpeta donde tiene la imagen se llame objetos ( con o minúscula) y usted en la hoja de estilo la llame Objetos (con O mayúsculas), otra razón puede ser que cuando usted le puso nombre a su imagen, le haya puesto como nombre (fondo.PNG). Cuando uno se baja una imagen de internet o crea una imagen propia en su ordenador, uno suele ir a "Archivo" y elegir "guardar como", entonces abajo de la ventana hay dos casillas una que dice "nombre" y la otra dice "tipo", en la que dice "nombre" uno debe borrar lo que hay allí y poner solo el nombre que quiere que tenga esa imagen (nada mas que el nombre), ahora para elegir la extensión de como quiere uno guardar esa imagen, pues abajo en la casilla "tipo" a la derecha hay una flecha que hay que pulsar para que se abra un desplegable con una variedad de tipos de extensiones, entonces uno, de ese desplegable elige cual extensión quiere para esa imagen y la marca (solo la marca (o hace click en ella), luego arriba (en la parte superior de esa ventana) busca la carpeta en la que quiere guardar esa imagen a la que ya le ha elegido también la extensión, después de elegir en que carpeta guardará esa imagen , uno debe ir a la parte inferior de esa ventana y pulsar en "guardar" y después cierra.
Usted cuando bajó la imagen, seguramente la bajó tal como venía, o sea donde decia "nombre" había allí lo siguiente "fondo.png", y la guardó con ese nombre por lo tanto su imagen se llama fondo.png, no se llama solo fondo. Así que le sugiero que saque su imagen de la carpeta objetos a alguna parte del escritorio y ábrala con el Paint o con el Photoshop, y después vaya a "archivo" "guardar como" y en la ventana que se abre, en la casilla donde dice nombre escriba la palabra fondo1, (solo fondo1), y en la casilla de mas abajo donde dice "tipo", busque con la flecha de la derecha la extensión de como quiere guardar esa imagen, para mas seguridad elija la que dice jpg o JPEG, luego guarde y cierre, vea de guardarla en el escritorio, ahora tendrá dos imagenes en el escritorio, una que se llama fondo.PNG, y la otra que se llama fondo1.jpg, coja la que se llama fondo1.jpg y pongala en su carpeta objetos, luego abra el programa HTML-KIT y abra su hoja de estilo y escriba allí en la parte donde va la directiva de la imagen body{etc. etc. etc.;background-image:url(objetos/fondo1.jpg); etc. etc. etc.;}.
En todo caso le reitero la sugerencia anterior, léase los spot de respuesta que hay acá mismo y verá casi todas las formas de solucionar el problema
Lo mismo ha podido sucederle con la imagen sonrisa.gif, quizás tenga que poner en su página objetos/sonrisa.gif.gif
Saludos

Muchas gracias Raulyure, con todo lo que me ha dicho ya he podido realizar el proceso correctamente y, obviamente ya he podido colocar la imagen de fondo de la página.
Mil gracias. :wink:

*Rosa* escribió:Muchas gracias Raulyure, con todo lo que me ha dicho ya he podido realizar el proceso correctamente y, obviamente ya he podido colocar la imagen de fondo de la página.
Mil gracias. :wink:

Hola:
Me alegro un montón de que haya podido solucionar esos pequeños problemas, ahora ya sabe lo que viene, seguir avanzando, aunque de a poquito, que es lo mejor para ir entendiendo como funcionan estas cosas
Saludos

hola a todos, les comento mi problema:
tal como le ha pasado a muchos usuarios mi tema es con la imagen de fondo (el color de fondo se ve perfectamente) pero la imagen no, ya probé con cambiar la extension, borrarla y copiarla nuevamente, pero nada.
Eso si lo unico que se ve en la "vista previa" es el espacio como si fuera un cuadro y con una "x" en la punta superior izquierda y cuando paso con el mouse por arriba dice la frase del "alt" pero no se deja ver la imagen. Tambien resulta bueno que sepan que para q por lo menos aparezca ese cuadro puse (../objetos/fondo1.PNG) con "../" delante porque sino lo unico que me aparece es el espacio en blanco

Espero su respuesta y les agradezco que hayan hecho esta pagina tan completa!! Saludos desde Argentina Jonathan

john_22_18 escribió:hola a todos, les comento mi problema:
tal como le ha pasado a muchos usuarios mi tema es con la imagen de fondo (el color de fondo se ve perfectamente) pero la imagen no, ya probé con cambiar la extension, borrarla y copiarla nuevamente, pero nada.
Eso si lo unico que se ve en la "vista previa" es el espacio como si fuera un cuadro y con una "x" en la punta superior izquierda y cuando paso con el mouse por arriba dice la frase del "alt" pero no se deja ver la imagen. Tambien resulta bueno que sepan que para q por lo menos aparezca ese cuadro puse (../objetos/fondo1.PNG) con "../" delante porque sino lo unico que me aparece es el espacio en blanco

Espero su respuesta y les agradezco que hayan hecho esta pagina tan completa!! Saludos desde Argentina Jonathan

Hola:
Cuando en una página se ve un cuadro con un aspa roja, es que lo que se ha hecho es definir el lugar y las dimensiones de lo que va a ir allí (en este caso una imagen), pero no significa que por el hecho de definir las dimensiones, tenga que aparecer la imagen en cuestión, ya que esta puede tener la extensión incorrecta o estar en una carpeta en la que no coincida el nombre de la carpeta con la dirección de donde se debe coger esa imagen.
Según el curso usted debe tener en su escritorio una carpeta que se llama "mis-paginas-web", dentro de esa carpeta usted debe tener otra que se llama "web-ejemplo-cctw", y dentro de esa carpeta "web-ejemplo-cctw" usted debiera de tener una carpeta que se llama "objetos" (que es donde guardará sus imagenes).
En esa misma carpeta que se llama "web-ejemplo-cctw", también debe tener la página que se llama index.html y su hoja de estilo correspondiente a esa página, hoja de estilo que se llama estilo.css
Si usted tiene que poner como dice, ../ es porque o la carpeta objetos no la tiene dentro de esa carpeta "web-ejemplo-cctw" o cualquier otra cosa.
Le sugiero que nos diga donde tiene cada cosa, y si en el programa HTML-KIT también está igual que como lo tiene en su escritorio, sin tomar en cuenta la carpeta "mis-paginas-web", ya que esa carpeta "mis-paginas-web" solo sirve para que la otra esté dentro.
Fuera de eso, usted dice que ha modificado la extensión de la imagen, imagino que habrá leído las sugerencias anteriores de como hacerlo, porque puede que la extensión PNG tenga que ser con minúsculas (png).
Díganos como tiene organizada su carpeta "web-ejemplo-cctw" y si coincide con lo que tiene en el programa HTML-KIT
Saludos

Hola, buenas noches. Estoy siguiendo el cursillo de esta web, ya que estaría interesado en hacer una web. Pero me he encontrado con el primer bache en mi camino, al ocurrirme lo mismo citado aquí: No aparece mi imagen.

Tengo puesto lo siguiente:

index.html

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

<html>
<head>
<title>Lo que tiene esto del fútbol...</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>


Pagina web en construcción, ¡muy pronto estará lista!</p>


Gracias a [url="http://www.comocreartuweb.com"]CCTW[/url]</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%;}

La imagen se llama "fondo", con extensión ".png", y se encuentra situada en la carpeta "objetos", dentro de "Lo que tiene esto del fútbol" (La carpeta base)

En la previa, sí me aparece el cambio de color de fondo, por lo que sí está bien redireccionado el "estilos.css" con el "index.html" (Al menos es lo que creo)

Aquí unas capturas:
index.html
estilos.css
Preview

Lo extraño es que dentro de la carpeta "Lo que tiene esto del futbol" (La carpeta base, como ya dije, aparte de la carpeta "objetos" y los ficheros "estilos.css" e "index.html" me aparecen dos archivos más: "TMP2C11.htm" y "TMPAAAD.htm", que no se aprecian en el HTML-Kit.

Al abrir estos ficheros, se me abre una ventana. En el primero ("TMP2C11.htm") me sale una réplica del "estilos.css", y en el segundo ("TMPAAAD.htm") me aparece... ¡La página con la imagen!
Y lo mismo aparece al abrir el "index.html" generado. Pero no en la previa.

Aquí capturas de la carpeta y los archivos anteriormente citados y del "index.html" creado por el HTML-Kit:
Lo que tiene esto del futbol
TMP2C11.htm
TMPAAAD.htm
index.html

Esto último me da a entender que la imagen la tengo bien situada y redireccionada, pero aún quiero saber porqué no puedo verla en la previa del HTML-Kit, y porqué me han salido estos últimos archivos ("TMP2C11.htm" y "TMPAAAD.htm")

Uso Windows Vista (Hasta que recupere el ordenador con XP...) y Mozilla Firefox 2.0 como navegador, algo que habréis podido observar, pero lo dejo por si acaso.

Muchas gracias por vuestra ayuda, he intentado ser lo más claro posible. Si necesitan algún detalle más avisadme, me gustaría aclarar esto. Muchas gacias de nuevo.

Sage

Por cierto, me gustaría añadir que el problema de la previa se solucionó al cerrar y volver a abrir el HTML-Kit. Ahora si puedo ver bien en la previa la imagen (No dejo captura, pero al igual que en la tercera captura anterior, y con la imagen "fondo.png" en el centro).

Al mismo tiempo, desaparecieron instantáneamente los ficheros "TMP2C11.htm" y "TMPAAAD.htm"

El problema lo veo solucionado, de todos modos, me gustaría tener alguna explicación de la aparición momentánea de estos archivos. Muchas gracias otra vez, ¡ahora a seguir!

Sage escribió:Por cierto, me gustaría añadir que el problema de la previa se solucionó al cerrar y volver a abrir el HTML-Kit. Ahora si puedo ver bien en la previa la imagen (No dejo captura, pero al igual que en la tercera captura anterior, y con la imagen "fondo.png" en el centro).

Al mismo tiempo, desaparecieron instantáneamente los ficheros "TMP2C11.htm" y "TMPAAAD.htm"

El problema lo veo solucionado, de todos modos, me gustaría tener alguna explicación de la aparición momentánea de estos archivos. Muchas gracias otra vez, ¡ahora a seguir!

Hola:
Yo no tengo Windows Vista, pero creo (por lógica) que de alguna manera se generaron archivos temporales de lo que usted estaba haciendo en el programa HTML-KIT, y que esos archivos se quedarían allí mientras usted no "actualizara" esos cambios, y la manera de hacerlo en su caso fue cerrándo y abriéndo otra vez el programa HTML-KIT
Saludos

Holaaaaaaaaaaaaa
soy nuevo en el foro
la pagina esta excelente
los felicito!
y mil gracias!!

^^


les cuento que me pasa lo mismo que a todos...

No me carga las imagenes!
ni las imagenes de fondo, ni las imagenes sueltas.. nada

y estan bien todas las extensiones, todas las ubicaciones, y todos los codigos

tengo en el editor de index.html esto:

<!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>
<p class="centrado">Bienvenidos a mi página web. Muy pronto estará lista!</p>


[contenido no disponible]</p>


Página creada gracias a CCTW</p>


[correo eliminado]</p>
</body>
</html>




y en el editor de estilos css esto:


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

img { border-style: none }

.centrado { text-align:center }



no entiendo xq no me carga las imagenes....

por favor ayuuudaa...


desde ya muchas gracias
:)

Hola FELO, comprueba que la carpeta se llama objetos con minusculas y en plural.
Comprueba que la hoja de estilos se llama estilos (en minusculas y en plural) y la extensión es .css (es común poner .ccs).

Comprueba que las imagenes se llaman como dices, en tu caso: sonrisa, buzon y fondo (no han de llamarse de otra manera como fondo.gif o similar, el nombre NO puede tener la extensión, si es necesario renombra las imagenes y llamalas como dices).
Comprueba que las extensiones son las correctas, es decir, que la imagen llamada sonrisa es .gif, que buzon es tambien .gif y que el fondo es .png , recuerda que no es lo mismo .png que .PNG.
Un saludo.

HOLA A TODOS!!

También tuve problema para colocar la imagen de fondo.
El error puede ser los siguientes:

1) Hemos colocado el codigo del CURSO PASO A PASO como sigue:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%; }

OJO: despues de 100% y antes de la ultima ¨}¨ llave, hay un (punto y coma) ERROR!! Recuerde que el punto y coma es para separar comando u ordenes, pero con height:100% YA se terminan las ordenes.

2) Como han comentado anterior mente, los archivos .PNG a veces no funcionan para fondo (aparentemente). Yo lo que hago es que busco o grabo un archivo .JPEG (le puse como nombre: fondo) para usar como imagen de fondo y en mi código de ESTILO.CSS escribo lo siguiente:

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


NOTA:
-Miren que he quitado ; antes de la llave final.
-Noten que escribo que mi archivo es ( fondo.jpg ) (NO JPEG) OK??


COMO LOGRAR UN ARCHIVO JPEG??
Dos comentario arriba Raulyure les explica cómo, con guardar como, etc.


ASI NUNCA ME FALLA!!

ESPERO LES SEA UTIL, AMIGOS!!

Hola,
lo primero gracias de verdad, esta todo muy bien explicado
Anqu tengo un problemilla, yo he conseguido poner la imagen del fondo lo que pasa es que quiero ponersolo repeticiones en vertical y centrada y no soy capaz os dejo aqui lo que tengo puesto para ver si me podeis ayudar

en index

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

y en css

body {background-color: #EED2EE ; background-image: url(objetos/FETOBOY.JPG) ; background-repeat: y ; background-position: center }

Bueno gracias por la pagina en serio hasta ahora lo he ido haciendo todo muy bien solo que aqui me he atascado, me hace mucha ilusión ser capaz de hacerlo asi que gracias

intentalo asi


body {text-align: center; background-color: #EED2EE ; background-image: url(objetos/FETOBOY.JPG) ; background-repeat: repeat-y;}

saludos

gracias , ya pude con lo del fondo gracias

Raulyure escribió:Hola:
Si el color de fondo (background-color) se ve es que está bien relacionada su página con la hoja de estilo, eso significa que la página puede recibir ordenes desde la hoja de estilo, sin embargo si es la imagen la que no se ve, pueden ser varias cosas. Una de ellas es que su carpeta donde tiene la imagen se llame objetos ( con o minúscula) y usted en la hoja de estilo la llame Objetos (con O myúsculas), otra razón puede ser que cuando usted le puso nombre a su imagen, le haya puesto como nombre (fondo2.PNG). Cuando uno se baja una imagen de internet o crea una imagen propia en su ordenador, uno suele ir a "Archivo" y elegir "guardar como", entonces abajo de la ventana hay dos casillas una que dice "nombre" y la otra dice "tipo", en la que dice "nombre" uno debe poner solo el nombre que quiere que tenga esa imagen (nada mas que el nombre), ahora para elegir la extensión de como quiere uno guardar esa imagen, pues abajo en la casilla "tipo" a la derecha hay una flecha que hay que pulsar para que se abra un desplegable con una variedad de tipos de extensiones, uno, de ese desplegable elige cual extensión quiere para esa imagen y la marca (solo la marca (o hace click en ella), luego arriba (en la parte superior de esa ventana) busca la carpeta en la que quiere guardar esa imagen a la que ya le ha elegido también la extensión, después de elegir en que carpeta guardará esa imagen , uno debe ir a la parte inferior de esa ventana y pulsar en "guardar", por ejemplo:
Si yo tengo una imagen en mi ordenador que se llama gatocolorado, y tiene la extensión jpg, entonces me aparecerá como gatocolorado.jpg, pero si yo quiero cambiar el nombre de esa imagen, haré click derecho en la imagen, y en el desplegable que se abre elegiré "abrir con", si solo tengo el programa Paint, pues en ese desplegable elegiré Paint, y se me abrirá la imagen con Paint, ahora como quería cambiar el nombre de la imagen entonces con la imagen abierta en Paint, iré arriba en la ventana y en "archivo" elegiré "guardar como", y en la ventana que se abre, aparecerán las dos casillas, una que se llama "nombre" y la otra "tipo", pues en la que dice "nombre" allí pondré el nombre que quiero para esa imagen (solo el nombre), por ejemplo gatonegro, y en la casilla que se llama "tipo", pulsaré en la flecha que está a la derecha para que se abra un desplegable con los tipos de extensión que puedo elegir para guardar esa imagen y elegiré jpg, luego iré arriba (en esa misma ventana) y buscaré la carpeta donde yo quiero guardar la imagen, después que la haya encontrado y marcado iré abajo y pulsaré en "guardar", luego cerraré la ventana, y cuando vaya a la carpeta donde guardé la imagen esta ya se llamará gatonegro, y tendrá la extensión jpg o sea gatonegro.jpg.
Lo importante cuando uno baja una imagen y le quiere poner nombre , en la casilla donde dice "nombre" solo debe poner el nombre, y en la casilla "tipo", allí es donde uno elige con que extensión quiere guardar esa imagen, lo mismo vale con una imagen que haya sido creada por uno, así que le sugiero que saque su imagen fondo2.PNG de su carpeta objetos (la que tiene en el escritorio) y ponga esa imagen en el escritorio
y ábrala haciéndo click derecho en ella y en "archivo" elija "abrir con" y ábrala con el Paint luego de tenerla abierta vaya otra vez a "archivo" y elija "guardar como" y en la ventana que se abre, allí donde dice "nombre" escriba fondo3 (solo escriba fondo3) y mas abajo donde dice "tipo" púlse la flecha de la derecha para elegir la extensión que quiere que tenga, puede elegir png, o jpg, luego de hacer eso asegúrese que se guarde en su escritorio y luego abajo pulse en "guardar" y cierre todo.
Ahora tendrá dos imagenes en su escritorio, la primera que se llama fondo2.PNG, y la segunda que se llama fondo3.png o jpg , coja la que dice fondo3.jpg o png, y pongala en su carpeta objetos.
Luego vaya a su hoja de estilo y donde tiene las directivas para el body escriba: (borre todo primero)
body{background-color:#FFFF00;background-image:url(objetos/fondo3.jpg);background-position:center center;background-repeat:repeat;height:100%;}.
Si la ha guardado con la extensión jpg, debe poner esa extensión, si la ha guardado con la extensión png, debe poner esa extensión.
Saludos


Hola:
Cuando usted elige en "tipo" la extensión de como quiere guardar su imagen, allí le suelen salir en mayúsculas, cuando usted ponga en su hoja de estilo objetos/fondo3.PNG pruebe poniéndola en mayúsculas y si cuando haga vista previa no se ve, entonces pruebe poniéndola con minúsculas o sea objetos/fondo.png
Si usted cuando va a guardar la imagen y en "tipo" elige JPG, suele salir allí en "tipo" en mayúsculas, cuando la pone en la hoja de estilo puede probar poniéndola en mayúsculas y después hacer la vista previa, si no se ve, entonces escríbala poniéndola en minúsculas o sea jpg, y recuerde que su carpeta objetos debe tenerla dentro de la carpeta "web-ejemplo-cctw", la que está en su escritorio, en la misma carpeta donde tiene la página y la hoja de estilo.
También es importante que usted cuando abre una capa, en este caso el body (que también sería una capa, debe cerrarlo, al igual que la <a href con una </a>, al igual que la

con una </p>
Por ejemplo si usted se fija bien:





Bueno, por lo visto esto da un poco de guerra, así que vamos hacerlo de una manera práctica y radical.

Cree una carpeta en su escritorio, póngale por nombre "mi-web",(exactamente así, solo que sin las comillas) luego de tenerla creada, dentro de ella cree una que se llame "objetos", luego busque cualquier imagen pequeña (200px x 200px, 100x100, 300x 300) en su ordenador y póngala en esa carpeta objetos, imaginemos que la imagen se llama gato y tiene una extensión jpg por tanto esa imagen es gato.jpg después vaya a "Inicio" (en la parte inferior de su pantalla), pulse , y ponga el cursor en "todos los programas" y en el desplegable que se abre elija "Accesorios" o ponga el cursor en "Accesorios" y en el desplegable que se abre pulse en "bloc de notas", cuando se abra la ventana del "bloc de notas" escriba allí lo siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>mi pagina</title>
<link rel="stylesheet"href="estilos.css" type="text/css" media="all">
</head>
<body>
bienvenidos a la pagina esta en costruccion
</body>
</html>
(Escriba exactamente lo que le digo)

Luego en esa misma ventana vaya arriba donde dice "Archivo" , pulse y en el desplegable que se abre elija "guardar como", cuando se abra la ventana del guardar como, en la parte de abajo donde dice "Nombre", borre lo que está en esa casilla y escriba index.html, luego elija donde la guardará, con la flecha de la derecha de esa ventana en la parte de arriba, hágalo en la carpeta recién creada en su escritorio, la que se llama "mi-web", y cierre.

Ahora repetiremos el proceso anterior para crear la hoja de estilo.

Después que haya hecho eso, vuelva a ir a "Inicio" (abajo de su pantalla a la izquierda) luego ponga el cursor en "todos los programas" y en el desplegable elija "Accesorios", luego en el desplegable que se abre elija o abra "bloc de notas", se le abrirá la ventana para escribir, y escriba :

body{background-color:#E6E6FA;background-image:url(objetos/gato.jpg);background-position:center center;background-repeat:repeat;}
Escriba exactamente lo que le digo

Luego después de escribir eso vaya a la esquina superior izquierda y en "Archivo" pulse para que elija "guardar como", cuando se abra la ventana del guardar como, vaya abajo y donde dice "Nombre" borre lo que hay allí y escriba estilos.css luego elija la carpeta donde la va a guardar, (la misma donde ha puesto ese index.html que creó anteriormente, en la carpeta mi-web) y pulse en guardar y cierre.

(Lo que ha hecho hasta ahora es haber creado una página web con su correspondiente hoja de estilo por medio del bloc de notas).

Ahora que ya tiene todo cerrado vaya a esa carpeta "mi-web" ,ábrala y dele doble click al index.html, seguramente le saldrá un mensaje de que el archivo no se puede encontrar, usted no le haga caso y cierre ese mensaje, que allí mismo le mostrará la página index.html.
Allí verá si está esa página bien relacionada con la hoja de estilo. (Como en la hoja de estilo usted le había dado unas directivas al body, la página debiera de aparecer con el color de fondo y con la imagen de fondo)
Si usted quiere abrir la página index.html en la vista código (esa que acaba de crear) para escribir en ella, debe hacer clic derecho en la página y en el desplegable que se abre elegir "abrir con" y elige "bloc de notas",(escribe un párrafo entre las etiquetas <body> y </body> por ejemplo : <body>

Acá escribo un párrafo</p></body> Y para guardar lo que escribió ya no necesita hacerlo con el guardar como si no solo guardar y cerrar.

Para la hoja de estilo solo hace falta para abrirla, hacer doble clic en ella, para poner mas directivas y guardar y cerrar.

Cuando antes no existían todos esos programas que lo hacen casi todo por uno, las páginas se hacían solo con el bloc de notas, que al fin de cuentas es la base en que se basan todos esos programas que hay ahora.
Le recomiendo que no haga copiar y pegar, escriba lo que tenga que poner tanto en su página como en la hoja de estilo, porque muchos programas no reconocen o no toman en cuenta el copiar y pegar.

Usted haga todo esto y nos comenta si ahora se ve la imagen que ha puesto, (la que se llama gato.jpg). Si se ve entonces le indicaré como reemplazar lo que tiene en su carpeta web-ejemplo-cctw por los archivos recién creados.
Saludos

Muuuuuuuchas gracias, no sabes lo que me costó encontrar una respuesta así
¡¡¡¡Los mejores!!!!. ¡¡¡LOs de este foro!!! ¡¡¡Gracias!!!

Hey! que tal? yo soy nueva en esto de hacer webs y la verdad que este sitio me esta siento muy muy útil.
También estoy teniendo mis inconvenientes para insertar la imagen de fondo, asi que espero que leyendo en el foro se me aclaren algunas dudas.

Muchas gracias a todos!

si no lo consigues
muestranos una captura de pantalla con el workspace
y la carpeta objetos abierta

saludos

Hola que tal no puedo ver la imagen en html-Kit
ahi te va el index i estilos:


INDEX

<!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 CCTW</p>


</body>
</html>



ESTILOS:



body {background-color: #CD1076 ; background-imagen: url(objetos/fondo1.png) ;
backgound-repeat: no-repeat ; background-position: center center ;
height:100%;}

Aguardo una respuesta :)

GRACIAS!

bueno en primer lugar, quisiera dar un agradecimiento a jorgens. por la guia esta copada.

Mi duda es esta ¿la etiqueta en css body "{background-image:url "ruta/imagen"}" solo aceptan extensiones .png o .PNG?.

A mi criterio intente probar con otras extensiones y no funciona, podria estar equivocado o ¿habra que agregar algo mas de codigo para que funcione con otras extensiones?.

De antemano un agradecimiento por contestar. :wink: