Fondos Para Web

Alguien podria indicarme como podria colocar un fondo a mi web?

Gracias!!
Anes
Para poner una imágne en el fondo la has de crear, (lógico, no??)

y luego definirla en el body.

Si usas la hoja de estilo, la defines así

#body {url(laruta)}

luego verás que se repite.. has de poner background-repeat:no-repeat y por último para darle un efecto bonito, puedes poner esto, background-attachment:fixed, con esto lo que consigues sería que la imágen se quede fija en el fondo mientras el contenido de la web se mueve.

te quedaría esto:

#body {url(laruta);background-repeat:no-repeat;background-attachment:fixed}
Haber... Es que son 4 Diferentes, es decir:
:arrow: Uno para la Cabecera.
:arrow: Dos para el Cuerpo.
:arrow: Uno para el Pie de Pagina.

Entonces... como los consigo poner?
Anes
Para la cabecera:

:arrow: Si haz seguido el curso paso a paso, en la hoja de estilos donde dice: "#curva-superior" vaz a poner

#curva-superior: {background-image: url("ruta de la imagen");......}

Por ejemplo en mi caso:

#curva-superior: {background-image: url("objetos/cabecera"); repeat: "no repeat"; height: "150px" width="800px"}

:arrow: Para el cuerpo, igual en donde dice "#contenido" vas a poner
#contenido: {background-image:url("ruta de la imagen");......

y el pie, igualito donde diga #pie el codigo

#pie {background-image: url("ruta de la imagen");....}

Alguna duda consultalo... El codigo para imagenes de fondo es
background-image: url"(tu imagen");}
Veamos... Yo tengo sta Linea:
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
Aun asi... y sin tocar nada, puedo añadirle lo que estamos hablando? Como?
Anes
Bien, bueno veras, tienes las imagenes curveadas del curso verdad? bueno si es asi tendrias que borrar esta parte:

#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }

y cambiarla por esta

#curva-inferior { background-image: url(ruta de la nueva imagen de fondo) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }

con eso lo que hacemos es quitar la esquina curveada, y poner otra imagen puede ser mas grande para que abarque mas espacio, solo que tendrias que configurar heigth y width que son ancho y alto
Pues asi, lo unico que me ha exo la plantillas es borrarme la linea de la parte superior.
No se ve ninguna Imagen.
:(
Puede ser por que aparezca un Logotipo?
Anes
Anes escribió:Haber... Es que son 4 Diferentes, es decir:
:arrow: Uno para la Cabecera.
:arrow: Dos para el Cuerpo.
:arrow: Uno para el Pie de Pagina.

Entonces... como los consigo poner?
Hola:
Para poner una imagen de fondo debe ponerlas en la hoja de estilo donde tenga definida la capa
Para poner una imagen de fondo en la capa cabecera debiera de hacerlo así #cabecera{etc.etc.etc.;background-image:url( objetos/nombredeimagen.gif);background-repeat:no-repeat:background-position:center center}
Si la imagen mide lo que mide la cabecera, este código le servirá y ocupará todo lo que mide la cabecera, puede poner la imagen con extensión png, gif, o jpg, la que usted elija.
Para la capa pie de página , en la hoja de estilo puede hacer lo mismo que en la capa cabecera
#pie{etc.etc.etc.;background-image:url(objetos/nombredeimagen.jpg);background-position:center center;background-repeat:no-repeat;}
si la capa pie mide 800 de ancho por 65px de alto , puede poner una imagen de esa medida, o que tenga dos pixel menos de ancho por si la capa pie tiene bordes, debe probar
Lo mismo puede hacer para la capa contenido.
La imagen curva, tanto la de arriba como la de abajo, esas están ubicadas, una en la parte superior de la capa cabecera pero a la vez es una capa mas, y la otra debajo de la capa pie, que a la vez es una capa mas
Realmente uno tiene la capa global, que es la que contiene a todas las otras capas y la primera capa de arriba es la capa curva superior, después viene la capa cabecera, despues la capa navegacion, despues la capa contenido, luego la capapie y por ultimo la capa curva inferior realmente si saca la cuenta , dentro de la capa global de forma directa hay seis capas, la curva superior es una capa que mide 800px de ancho por 12px de alto así también son las medidas de la capa curva inferior. En la capa contenido puede poner una imagen pequeña que se repita (repeat:repeat;) o puede poner una imagen del ancho de la capa, si pone una pequeña , en el curso se le explica como ponerla que se repita horizontalmente o solo verticalmente, bueno allí se le explica las formas diferentes de ponerla.
Recuerde, la capa curva superior es independiente de la capa cabecera, lo mismo la capa curva inferior de la capa pie.
saludos
Agradecido de los que aprenden enseñando
Es que nose Explicarme... :oops:
Veamos...
Me Descargue un Template, en el hay una Carpeta llamada "Images", que son como Trocitos que componen el Fondo.
Pues eso es lo que quiero colocar.
Nose si lo pillas...

:roll:
Anes
Has de definir cada uno de esos "trocitos".

Creo que por lo que has dicho en post anteriores tan solo son tres.

pues lo que has de hacer es definir en el #body las rutas de esas imágenes.

No se muy bien como has de hacer para que quede una arriba otra en medio y otra por abajo, pero supongo que con el float es suficiente.

De esto último no estoy muy seguro.

Saludos.
Eso es Sayan. Muchas Gracias, pero necesito algo mas de Informacion.
Alguien mas me puede Ayudar?

:roll:
Anes
suponiendo que las imágenes ocupen la totalidad de la pantalla, es decir, todo el ancho, prueva a poner float:left.

Aunque yo lo que haría seria unirlas con el photoshop, y luego definir tan solo una imágen, que te parece???

Yo lo hago mucho, buscar otras soluciones, que siempre las hay.....jejee
Ay, ay, que creo que es esto lo que estoy buscando.... :lol: :lol:

Entiendo por lo que leo que si tengo una imagen de esas chiquititas que aparecen en internet como fondos para web, y la quiero poner que salga una sola vez, ¿se puede? :shock: :shock:

Es que he intentado hacer esto un montón de veces, con un montón de combinaciones y nunca lo he conseguido. Lo había dado por perdido... porque incluso en el Curso Paso a Paso pone que no se puede hacer...

Bueno, que me estoy emocionando... y a ver si es que lo he entendido mal :lol:

Os cuento mi caso. Tengo esta imagen (ahora os la pongo) y lo que quiero es que aparezca como fondo de la web (www.amigosyamigasdelcanal7.com) ¡¡¡¡ porque es el fondo perfecto :D !!!pero no lo consigo. Lo máximo que he conseguido ha sido que salga varias veces y no queda bonito.

Decirme que se puede hacer... je, je.


[contenido no disponible]
Tienes que introducir esta opcion background-repeat:no-repeat.

Y luego editarla con el phtoshop para que tenga el tamaño que quieras.

creo que es esto lo que pides, no??
muy facil, en donde pusiste tu imagen de fondo, en la hoja de estilos debes poner repeat: no-repeat... ejemplo


mi fondo se llama fondoweb.jpg ahora lo que voy a hacer es en mi hoja de estilos poner:

body {background-image: url("objetos/fondoweb.jpg") ; repeat: no-repeat;}

creo que eso es lo que quieres que no se repita la imagen :wink:

disculpa sayan, no vi que ya habias posteado esta respuesta, pero ps ya la publiq para q borrarla xD
Hola,

Muchas gracias SaYaN y linkgl.

He seguido vuestras indicaciones y... funciona :lol: pero... la imagen es demasiada pequeña y cuando la retoco el tamaño en el Photoshop se distorsiona :cry:

Estoy pensando en "destripar" una de la emisoras de radio y hacer una foto al circuito, ¿me podéis decir, por favor, si esta imagen la podría poner como fondo?. Os lo pregunto antes de probarlo porque si me decís que no, evito pasar ese mal rato a la pobrecita... Aunque ella no se iba a enterar, yo sí me iba a enterar quitando y poniendo tanto tornillo :lol:

Si me decís que se puede, me tiro a por el destornillador (je, je)

Muchas gracias por vuestras respuestas. :wink:
Yo escribió:Hola,

Muchas gracias SaYaN y linkgl.

He seguido vuestras indicaciones y... funciona :lol: pero... la imagen es demasiada pequeña y cuando la retoco el tamaño en el Photoshop se distorsiona :cry:

Estoy pensando en "destripar" una de la emisoras de radio y hacer una foto al circuito, ¿me podéis decir, por favor, si esta imagen la podría poner como fondo?. Os lo pregunto antes de probarlo porque si me decís que no, evito pasar ese mal rato a la pobrecita... Aunque ella no se iba a enterar, yo sí me iba a enterar quitando y poniendo tanto tornillo :lol:

Si me decís que se puede, me tiro a por el destornillador (je, je)

Muchas gracias por vuestras respuestas. :wink:
Hola,
Por lo visto lo que usted desea es poner una imagen de fondo que ocupe toda una capa o algo así, lo que le sucede es que ya usted tiene una imagen, pero demasiado pequeña.
Yo no soy ningún especialista en lo que concierne a las imagenes ni a PhotoShop, de hecho, siempre me lío con lo de las capas, los filtros y demases..
Por ejemplo, yo me bajé una imagen de internet que me ha gustado, esa imagen mide 194 de ancho por 155 de alto, muy pequeña para que ocupe todo el ancho y alto de la capa (que mide 600px ancho por 400px de alto) en la que la quiero poner (a menos claro que la repita, lo cual no me quedaría bien para mi gusto).
Pues bien yo hago click derecho en la imagen y elijo abrirla con PhotoShop, cuando ya está abierta con el programa voy abajo a la paleta capa y como la imagen por defecto está bloqueada lo que hago es darle doble click donde está el candado que aparece a la derecha, así la imagen se me desbloquea y se me queda en una capa que será la capa 0.
Después de todo eso, voy a la barra de herramientas y pulso en "seleccion" y en el desplegable elijo "Todo", así se selecciona toda la imagen, luego en la misma barra de herramientas voy a "Edicion" y elijo "Copiar", Ahora siempre en la barra de herramientas voy a "Archivo" y elijo "Nuevo" así se me abre una ventana en que salen las mismas propiedades que tiene la imagen que quiero copiar en ese archivo nuevo, pero claro, a mi no me interesa una copia de esa imagen con las mismas medidas, pero en vez de agrandar las medidas para ese archivo nuevo lo que haré será, donde dice "Resolución" ponerle en vez de 72 que será lo que tiene puesto , pues le pongo 300 y pulso en OK, aparece la nueva ventana y voy a la barra de herramientas y pulso "Edicion" "Pegar".
Ahora me aparecen dos imagenes, una con la resolucion anterior (72px) y la nueva con resolucion (300px).
Ahora cierro la imagen anterior (la de 72px), me pregunta si quiero guardar los cambios, le digo que no, (me interesa tener la original).
Así entonces en el programa solo me queda abierta la imagen nueva (la de 300px x pulgada), como esa imagen sigue midiendo 194px por 155px, es ahora cuando la voy a agrandar, así que voy a la barra de herramientas y pulso en "imagen" y en el desplegable pulso en "tamaño de imagen", se abre la ventana con la anchura y la altura en pixeles (que es la misma que la de la original), por tanto voy abajo en esa ventana y en la casilla que dice "remuestrear imagen", la marco, también a la derecha busco con una flecha y elijo "Bicubica", marco también la casilla que dice "Restringir proporciones", y marco la que dice "Escalar estilos".
Ahora , arriba en la ventana donde dice "Anchura", borro esos 194 y pongo 600, la altura no la tengo que definir porque ya se hace sola, seguramente se quedará de altura unos 479 pixeles. Y pulso OK
Ahora la imagen mide 600px de ancho por 479px de alto.
La imagen no se ha deformado pero si que no está muy nítida, y es lógico, ya que al agrandarla , el PhotoShop ha tenido que rellenar con píxeles todo lo que faltaba para que estuviese lo mejor posible.
Puedo ir a la barra de herramientas y en la pestaña "filtro" elegir en el desplegable "Enfocar" y ver como queda, si necesita mas enfoque voy otra vez a "filtro y elijo "Enfocar mas".
Luego de todo eso, voy a "Archivo" y elijo "Guardar para web", allí se abre una ventana con la imagen repetida, la de la derecha muestra como quedará . Allí en la derecha hay unas opciones donde puedo elegir el formato de extensión y la calidad (media, baja, alta, etc.). en la imagen de la derecha se van viendo los cambios a medida que elijo las opciones, luego de ver como queda mejor pulso en "guardar" y elijo en la ventana que se abre la carpeta donde quiero guardarla.
Luego cuando cierre se volverá a PhotoShop a la imagen nueva y al cerrarla pedirá si la guarda con los cambios (eso es para guardarla en el formato psd que es el formato con el que trabaja PhotoShop), si le dice que si, la guardará en ese formato para futuras ocasiones y lógicamente le tiene que poner nombre . (la que guardó para la web, esa ya está guardada).
Por tanto ahora la imagen que usted guardó para la web tiene 600px de ancho por 479 px de alto y con una resolución de 72px, que es lo que usan los monitores.
Utilizándo mas propiedades del PhotoShop, seguramente la imagen quedaría mucho mejor, pero para eso hay que estudiar un poco, yo solo le he dado un pequeño esbozo de como se puede hacer algo.
Recuerde como le dije antes, no se manejar muy bien el PhotoShop

Si quiere puede sacar una foto de las tripas de su radio y escanearla como mínimo a 300píxeles, y luego con el PhotoShop darle las propiedades necesarias, ya que así su imagen original tendría 300 píxeles por pulgada y se pueden modificar sin perder tanta calidad, y no 72px como las que tienen las que uno se baja de internet
Saludos
Agradecido de los que aprenden enseñando
Gracias Raulyure.

La cosa ha funcionado, pero en internet no se ve el fondo :cry: La verdad es que hay muchas veces (demasiadas; ahora es una de ellas) en que me dan ganas de dejar la web. ¿Sabe alguien, por favor, por qué puede ser?. Tengo que decir que todas las carpetas (index, estilos, objetos... están exactamente igual en los dos sitios.

Gracias.

Apago el ordenador hasta mañana.
Noooooo, no digas eso. prueba mirarle la extension de la imágen, yo he probado con algunas extensiones distintas a .gif y algunas de ellas no se ven.

Y por otro lado, si usas el html-kit, intenta hacerlo con el dreamweaver, puede que te lleve un par de dias acostumbrarte a el pero es muuuuy intuitivo....xDDD.

Saludos, y esa web tiene que prosperar...jeje
SaYaN escribió:
Y por otro lado, si usas el html-kit, intenta hacerlo con el dreamweaver, puede que te lleve un par de dias acostumbrarte a el pero es muuuuy intuitivo....xDDD.


Cualquier programa es bueno, yo utilizo el bloq de notas y me va todo perfecto... :wink: hablando del tema si copiaste y pegaste los codigos... eso puede ser la falla, ya que al pegar los codigos hay veces que no se leen bien es mejor pasarlos manualmente o volver a intentar el copiar y pegar :wink: :wink:
Claro que cualquier programa es bueno, jejeje, pero yo lo he intentado con el html-kit, y con el dream, y me resulta mucho mas sencillo usar el dreamweaver.

Eso por no decir la vista previa del html-kit, que a veces te engaña, con el dream,puedes ver tu página en todos los operadores que tengas instalados. No digo que con otro no se pueda pero tienes que ir a la carpeta, boton derecho abrir con,...

Creo que a veces esto soluciona muchos problemas.xDDD.

Por otro lado, si le cambias el nombre a algun archivo el dream corrige los enlaces. Estas son algunas de las ventajas que le veo, pero sabemos todos que cada programa es bueno o malo según quien lo utilice y si te gusta o no, xDDD.

Por cierto si haces todotodoytodo con el bloq eres un fenómeno, xDD.

Lo digo porque te resulta algo mas difícil, no??
jaja bueno no es mas dificil cuando te acostumbras, esque un dia se me descompuso la compu y fui al ciber pero no dejaban bajar programas y empeze a hacer unas webs con el bloq de notas y vi que era lo mismito solo sin colores aunque aveces te confundes un poco xD