Imagen de Fondo que no se repite |
||
Seguro que a muchas personas les apetece crear un logotipo para su empresa que no se repita por toda la página. O una marca de agua, o simplemente una imagen que quede centrada en el fondo de su página y no se mueva. Bueno, pues este tutorial os ayudará a saber cómo. Utilizaremos una clase de estilos en cascada. |
||
| Y he aquí el tutorial: | ||
En primer lugar, abrimos Dreamweaver, por supuesto. Crearemos para este ejercicio un documento nuevo, html normal, tal y como hemos hecho en otros tutoriales. O podemos abrir el documento del tutorial de capas, ya que nos va a servir bien.También necesitaremos crear la imagen o tenerla preparada. Por ejemplo estaría bien usar una imagen que mida 400 x 300 píxeles, por ejemplo para ver cómo queda centradita y no se mueve. Yo os proporciono la del tutorial. Descárgala pinchando con el botón derecho en este enlace y después guardar como. |
||
Primero guardaremos el documento, esto es muy recomendable siempre que trabajemos en cualquier programa porque podemos quedarnos sin nada¡¡¡ Después vamos al menú TEXTO>Estilos CSS, Nuevo Estilo. |
|
Y ahora , en la siguiente ventana, elegimos la opción Redefinir etiqueta HTML y en el menú emergente de la parte superior, buscamos la etiqueta body y aceptamos. |
Después, nos saldrá una ventana donde tendremos que guardar la hoja de estilos, que estará en nuestro sitio (que siempre tenemos que crear para todos los sitios web que realicemos).Y la llamaremos miestilo por ejemplo. Después se nos abrirá la ventana típica de las categorías de los estilos en cascada. Y buscamos la categoría fondo. |
||
En la categoría fondo, vamos a elegir estas características: En Imagen de fondo, le damos a Examinar y buscamos la imagen que queremos que sea de fondo. En la categoría Repetir, elegimos No repetir, aunque tenemos las opciones de repetir, repetir X y repetir Y. |
|
El campo de Anexo, si ponemos fijo, haremos que no se mueva aunque el contenido sea mayor. Y después la posición, que podemos poner centrada o superior, inferior, etc. |
Así quedará la página final: |
![]() |
Como se puede ver, la imagen queda en el centro de la página. Hay muchas posibilidades para este estilo en cascada. Sólo hay que pensar en ello¡¡¡ Puedes ver la página pinchando en este enlace. |
|
||