Foros del Web » Creando para Internet » CSS »

¿Cómo colocar una imagen de fondo utilizando CSS?

Estas en el tema de ¿Cómo colocar una imagen de fondo utilizando CSS? en el foro de CSS en Foros del Web. Mi idea es colocar los botones del menú como fondo, es decir, las imagenes de los botones como fondo y encima las letras, a continuación ...
  #1 (permalink)  
Antiguo 31/05/2011, 20:53
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
¿Cómo colocar una imagen de fondo utilizando CSS?

Mi idea es colocar los botones del menú como fondo, es decir, las imagenes de los botones como fondo y encima las letras, a continuación les comparto mi diseño:



También quiero que cada uno de los botones sean tratados como una casilla o algo así. Es que sé que se puede hacer con Tablas y Celdas, pero nose quiero probar el CSS creo
que sería más elegante :)
  #2 (permalink)  
Antiguo 31/05/2011, 22:30
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 952
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

los menús no se deben de hacer con tablas eso es algo precario.

crea el menú usando listas <ul> y para colocar una imagen de fondo en el menú se hace como en cualquier otro elemento

si no sabes como es porque en definitiva debes empezar a documentarte sobre CSS, te recomiendo librosweb.es en especial esta sección que es la que aplica a tu pregunta -> clic aquí
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 01/06/2011, 10:01
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

Muchas gracias Ag666 seguí tu consejo y he estudiado un poco acerca de la CSS.

Ahora te comparto esta URL, donde logré lo que quería hacer:


http://extremegamex1.gofreeserve.com/aprendiendocss/index_1.2.3.html


Ahora bien, ya logré colocar el botón de fondo, sin embargo quiero que el otro botón esté al lado del de arriba, y no debajo de él, tal y como la imagen de ejemplo que postulé al iniciar el tema.

Te comparto el .CSS que he logrado hasta ahora.

Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. p { color: black; font-family: Verdana; }
  5. .destacado { color: white; }
  6. div {
  7.   width: 120px;
  8.   height: 60px;
  9.   padding-left:  20px;
  10.   padding-right: 20px;
  11.   padding-top:  3px;
  12.   padding-bottom: 1px;
  13.   margin-left:   10px;
  14.   margin-right:  10px;
  15.   margin-top: 10px;
  16.   margin-bottom: 0px;
  17.   border: 0px solid black;
  18.   background-image: url("http://extremegamex1.gofreeserve.com/images/boton_menu_1.png");
  19.   background-repeat: no-repeat;
  20.   background-position: 3.5px 12px;
  21. }

Espero que me ayudes y me des algunos consejos para mejorarlo.

Muchas gracias de antemano.
  #4 (permalink)  
Antiguo 01/06/2011, 10:25
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 7 años
Puntos: 13
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

Mhmm... dale un class o id al div que contenga la imagen o al navegador para poder diferenciar.

Para que te salga el menu en linea tienes que poner la propiedad display: inline; en el li.

Un ejemplo
Código CSS:
Ver original
  1. ul#nav li {
  2.     display: inline;
  3.     padding: 0px 15px 0px 20px; //Esto es para las separaciones laterales
  4. }
  #5 (permalink)  
Antiguo 01/06/2011, 11:29
(Desactivado)
 
Fecha de Ingreso: mayo-2005
Ubicación: España
Mensajes: 471
Antigüedad: 12 años, 6 meses
Puntos: 45
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

Dios! Cómo se te ocurre mezclar ese menú con el contenido!!

Te recomendaría hacer un menú de color blanco o negro con texto de menor tamaño.

Es una lástima que arruines un diseño tan bonito con ese menú.
  #6 (permalink)  
Antiguo 01/06/2011, 12:25
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

Gracias: Rolldi y Ventru3, por su pronta respuesta.

La pregunta mia ahora es,

Rolldi ¿Qué diseño de menú me aconsejarías para el diseño que tengo?. Te comparto algunos de los botones que me llamaron la atención:

http://www.psdgraphics.com/buttons/p...d-web-buttons/

Ahora bien, Dices que:

Cita:
Cómo se te ocurre mezclar ese menú con el contenido!!
¿Cómo puedo corregir eso?, ¿Qué solución me recomendarías?.

Ventru3

¿Cómo agrego un "ID" o un "Class" al DIV, es decir, sería otro DIV diferente del contenido globar?, ¿Puedo darle el nombre de:

Código CSS:
Ver original
  1. div=id {
  2.   width: 120px;
  3.   height: 60px;
  4.   margin-left:   10px;
  5.   margin-right:  10px;
  6.   margin-top: 10px;
  7.   margin-bottom: 0px;
  8.   border: 0px solid black;
  9.   background-image: url("http://extremegamex1.gofreeserve.com/images/boton_menu_1.png");
  10.   background-repeat: no-repeat;
  11.   background-position: 3.5px 12px;
  12.   display: inline;
  13.   padding: 0px 15px 0px 20px;
  14. }

Otra pregunta:

Esto:

Código CSS:
Ver original
  1. padding: 0px 15px 0px 20px;

Reemplaza esto?:

Código CSS:
Ver original
  1. padding-left:  20px;
  2.   padding-right: 20px;
  3.   padding-top:  3px;
  4.   padding-bottom: 1px;

Gracias por una pronta respuesta.
  #7 (permalink)  
Antiguo 01/06/2011, 15:25
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 952
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

1.- como ya te menciono el compañero @Ventru3 solo es aplicar display inline
- acabo de ver tu pagina de muestra y veo creaste los botones utilizando div y párrafos, esto pinta muy mal y te da poca flexibilidad
intenta algo como

Código HTML:
Ver original
  1. <ul>
  2.     <li>Item 1</li>
  3.     <li>Item 2</li>
  4.     <li>Item 3</li>
  5. </ul>
mira el código fuente de este menú básico, la estructura y css te puede servir como base para armar el tuyo
-> clic aquí

2.- el como este tu diseño y como se vea con ese menú es mera apreciación del visitante, puede ser muy bonito o muy feo pero recuerda que siempre lo principal que has de buscar es la usabilidad antes de la estética.
al compañero @rolldi no le gustaron, para mi son solamente un tanto burdos y exagerados al intentar decorarlos pero al final no están tan mal si consideras que estas aprendiendo ya con el tiempo veras mejores opciones, trata de utilizar algo mas simple y menos adornado... y que te den la flexibilidad de agregar mas o menos texto sin que se vean mal.

3.- padding: 0px 15px 0px 20px; es equivalente y forma abreviada de:

Código CSS:
Ver original
  1. padding-top:0;
  2. padding-right:15px;
  3. padding-bottom:0;
  4. padding-left:20px;

aunque te aconsejo usar el método abreviado siempre que te sea posible
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #8 (permalink)  
Antiguo 01/06/2011, 16:01
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

Muchas gracias: Ag666 por tu pronta respuesta.

Ahora te comparto mis avances:

http://extremegamex1.gofreeserve.com...dex_1.2.4.html

He avanzado un poco, sin embargo aún no logro colocarlos los dos en forma vertical.

Les dejo el código .CSS:

Código CSS:
Ver original
  1. <style type="text/css">
  2. p { color: black; font-family: Verdana; }
  3. .destacado { color: white; }
  4. ul {
  5.     list-style: none;
  6.     margin: 0;
  7.     padding: 0;
  8.     background-image: url("http://extremegamex1.gofreeserve.com/images/boton_menu_1.png");
  9.   background-repeat: no-repeat;
  10.   background-position: 3.5px 12px;
  11.   font-family: Verdana;
  12.   padding-left:  20px;
  13.   padding-right: 20px;
  14.   padding-top:  3px;
  15.   padding-bottom: 1px;
  16.   margin-top: 5px;
  17.   margin-bottom: 0px;
  18.     }
  19.  
  20. #menu1 {
  21.   clear: both;
  22.   float: left;
  23.   width: 100%;
  24.   list-style: none;
  25.   margin: 0;
  26.   padding: 0;
  27.   }
  28.    
  29. #menu1 li a {
  30.     height: 32px;
  31.     voice-family: "\"}\"";
  32.     voice-family: inherit;
  33.     height: 60px;
  34.     text-decoration: none;
  35.     display: inline;
  36.     }  
  37.    
  38. #menu1 li a:link, #menu1 li a:visited {
  39.     color: #FFF;
  40.     display: block;
  41.     padding: 15px 0 0 0px;
  42.     }  
  43.   </style>

y el HTML por si acaso:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Free CSS Vertical Menu Designs at exploding-boy.com</title>
  5.   <style type="text/css">
  6. p { color: black; font-family: Verdana; }
  7. .destacado { color: white; }
  8. ul {
  9.     list-style: none;
  10.     margin: 0;
  11.     padding: 0;
  12.     background-image: url("http://extremegamex1.gofreeserve.com/images/boton_menu_1.png");
  13.   background-repeat: no-repeat;
  14.   background-position: 3.5px 12px;
  15.   font-family: Verdana;
  16.   padding-left:  20px;
  17.   padding-right: 20px;
  18.   padding-top:  3px;
  19.   padding-bottom: 1px;
  20.   margin-top: 5px;
  21.   margin-bottom: 0px;
  22.     }
  23.  
  24. #menu1 {
  25.   clear: both;
  26.   float: left;
  27.   width: 100%;
  28.   list-style: none;
  29.   margin: 0;
  30.   padding: 0;
  31.   }
  32.    
  33. #menu1 li a {
  34.     height: 32px;
  35.     voice-family: "\"}\"";
  36.     voice-family: inherit;
  37.     height: 60px;
  38.     text-decoration: none;
  39.     display: inline;
  40.     }  
  41.    
  42. #menu1 li a:link, #menu1 li a:visited {
  43.     color: #FFF;
  44.     display: block;
  45.     padding: 15px 0 0 0px;
  46.     }  
  47.   </style>
  48. </head>
  49.  
  50.  
  51. <div id="menu1">
  52.         <ul>
  53.             <li><a href="Descripción" title="Descripción">Descripción</a></li>
  54.         </ul>
  55. </div>
  56. <div id="menu1">
  57.         <ul>
  58.             <li><a href="#2" title="Link 2">Requisitos</a></li>
  59.         </ul>
  60. </div>
  61. </body>
  62. </html>

Espero una pronta respuesta.
  #9 (permalink)  
Antiguo 01/06/2011, 16:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 952
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

hay amigo jeje no viste el link al menú de ejemplo que te deje?

1.- las id son únicas y no se pueden repetir en una mis pagina html
2.- utiliza solo una lista para todos los enlaces no una lista por cada enlace, de echo ese es tu problema y por eso no se muestran en una linea como tu los deseas.
Código HTML:
Ver original
  1. <ul>
  2.         <li>boton 1</li>
  3.         <li>boton 2</li>
  4.         <li>boton 3</li>
  5.     </ul>

3.- cuando tu estas participando en un tema y alguien responde se te notifica vía email quien ha respondido y que respondió... no es necesario que este usuario te mande un mensaje privado para que tu te des cuenta.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 01/06/2011, 18:16
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

Hola amigo: Ag666, si ví el ejemplo que me diste, y me llamó la atención. Sin embargo, lo que yo quiero es algo similar a eso, pero con la diferencia de que con la imagen:



se ponga de fondo en cada uno de las secciones: Descripción, Imagenes, Requisitos, Videos, Desgargar.

Supongo que se podría hacer dandole un "Repeat-x" al bacground, pero tendría que calcular las distancias modificar la imagen, nose, ¿Podrías recomendarme y ayudarme cómo hacer lo que quiero?.

Es que estoy seguro que con una tabla y sus celdas lo podría hacer, porque así lo hacía antes, pero esta vez quiero probar con el estilo .css que sé que es mucho más elegante.

Espero una pronta respuesta, Amigo
  #11 (permalink)  
Antiguo 01/06/2011, 18:31
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 952
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

no nada de repeat por el tipo de imagen que deseas utilizar no tienes la flexibilidad de tamaño, necesitas colocar la imagen en cada <li> por ejemplo:

Código CSS:
Ver original
  1. #Menu li{display:block;float:left;width:123px;height:38px;font:13px arial;line-height:38px;text-align:center;background:#03f url(imagen.png) no-repeat;}
Código HTML:
Ver original
  1. <ul id="Menu">
  2.     <li>Boton 1</li>
  3.     <li>Boton 2</li>
  4.     <li>Boton 3</li>
  5. </ul>

Nota: para mostrar los elementos en linea yo use display:block y float:left para poderles dar el alto y ancho del botón requeridos... hay otros casos donde se puede usar y/o ser mas conveniente usar display:inline pero ambos son validos

te recomiendo pases a http://librosweb.es y le des una repasada a los 3 libros de la parte inferior sobre html y css
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #12 (permalink)  
Antiguo 01/06/2011, 19:38
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

Hola de nuevo Ag666 te agradesco grandemente, me has ayudado mucho, mira cómo quedó al final:

http://extremegamex1.gofreeserve.com...dex_1.2.6.html

Ahora sólo hace falta el resto XD:



Pero bueno es un avance :D.
  #13 (permalink)  
Antiguo 01/06/2011, 19:48
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

Amigo quisiera preguntarte, ¿Es posible colocar este fondo:



Debajo del menú que he creado?:

http://extremegamex1.gofreeserve.com...dex_1.2.6.html

Espero una pronta respuesta.
  #14 (permalink)  
Antiguo 01/06/2011, 20:02
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 9 años
Puntos: 66
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

lo puedes hacer exactamente como pusiste el fondo a los elementos de la lista, al div que ya tienes envolviendo la lista colocale una clase y con css le das el tamaño que necesitas y le pones el fondo que mostraste.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #15 (permalink)  
Antiguo 01/06/2011, 21:16
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

Hola quiero mostrar mis progresos, gracias a todos:

http://extremegamex1.gofreeserve.com...dex_1.2.8.html



Ahora mi duda es que: Cuando cambio el tamaño de la ventana de mi navegador: Firefox 4.0.1, se destruye todo XD. El menú, todo, se cambian de posición como que se adapta al tamaño de la ventana, y lo que yo quiero es que se queden como estan sin importar el hecho de que yo modifique la ventana de mi navegador. Porque con el IE abro la ventana totalmente y es lo mismo.

¿Cómo corrijo ese error?,

Tengo la leve ilusión de que es con un comando llamado Static, o algo así.

Espero una pronta respuesta.
  #16 (permalink)  
Antiguo 01/06/2011, 22:54
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 9 años
Puntos: 66
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

no le pusiste ancho al div que tiene el fondo, ponselo y no tendras problemas con eso
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #17 (permalink)  
Antiguo 02/06/2011, 09:00
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?

Gracias tredio, he logrado configuar todo de forma que no se modifique con el tamaño de la ventana del navegador :)

http://extremegamex1.gofreeserve.com...dex_1.2.9.html

Ahora bien, quisiera saber:

¿Cómo alineo el menú que he hecho con el bacground?, Si te fijas detalladamente el menú está ligeramente corrido hacia la izquierda y no es equitativa la distribuición.

¿Es posible alinearlo?, y ¿Es posible también alienar el DIV que contiene a todos estos datos: El menú la imagen, con el centro de la pantalla?

Espero una pronta respuesta.

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:31.