Cómo Hacer Una Imagen De Fondo En Un Sitio Web

Tabla de contenido:

Cómo Hacer Una Imagen De Fondo En Un Sitio Web
Cómo Hacer Una Imagen De Fondo En Un Sitio Web

Video: Cómo Hacer Una Imagen De Fondo En Un Sitio Web

Video: Cómo Hacer Una Imagen De Fondo En Un Sitio Web
Video: Como Poner una Imagen de Fondo a una Pagina o Sistema Web 2024, Abril
Anonim

Puede aprender los conceptos básicos de la creación de sitios por su cuenta; hay suficiente información sobre este tema en Internet y en libros. Sin embargo, en la etapa inicial, a menudo surgen dificultades en el uso de una u otra etiqueta. De hecho, los componentes más comunes se recuerdan mejor, ya que son esenciales al escribir cualquier sitio web.

Cómo hacer una imagen de fondo en un sitio web
Cómo hacer una imagen de fondo en un sitio web

Instrucciones

Paso 1

Seleccione la imagen que desea utilizar como imagen de fondo. Si tiene la intención de insertar texto sobre la ilustración, entonces, en este caso, es recomendable limitarse a opciones sin una variedad excesiva, en las que se utilizan varios colores que son de naturaleza cercana. En principio, para eliminar las ondas, puede crear un "fondo" para el contenido, y el problema se resolverá con éxito.

Paso 2

Corrija la imagen con Adobe Photoshop. Cuando haya terminado, elija el comando Guardar para Web en el menú Archivo y seleccione la carpeta que desee. Si esta es la primera imagen que se utilizará para el sitio, se creará automáticamente una carpeta "Imágenes".

Paso 3

En la etiqueta, escriba el atributo background = "ruta a la imagen". Ejemplo de registro: o. Al mismo tiempo, tenga en cuenta que la etiqueta debe aparecer solo una vez en el código, no debe multiplicarse.

Paso 4

Guarde los cambios en el bloc de notas, haga clic en el botón "Actualizar" en el navegador. El fondo de pantalla aparecerá en la pantalla. Si las dimensiones de la imagen son menores que los parámetros de la página web, entonces la imagen se duplicará tantas veces como sea necesario para llenar todo el espacio. Hay dos formas de corregir esta deficiencia:

• con el programa Adobe Photoshop, configure los parámetros de imagen requeridos en píxeles ("Imagen" - "Tamaño de imagen");

• establecer las dimensiones requeridas en el código html.

Por ejemplo, si el ancho es de 1250 px y la altura es de 650 px, entonces debes agregar los atributos necesarios para la celda de la tabla en la que se colocará la imagen.

No puede establecer el tamaño en la etiqueta; la imagen siempre se mostrará en tamaño completo.

Paso 5

Análogo de ccs para insertar una imagen de fondo:

imagen de fondo

CUERPO {

imagen de fondo: url (images / bg.jpg);

}

El atributo "background-image: url (images / bg.jpg)" es la ruta a la imagen de fondo.

Recomendado: