07 Imagen de fondo en una section de mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql) FullStack

Duración: 12 min
Módulo: 🎨 Fundamentos e Interfaz Pública (Front-End con Bootstrap) Lección 7 de 14
Anterior
06 FILAS Y COLUMNAS con Bootstrap en el SISTEMA VETERINARIO (PHP y MySql) FullStack
Siguiente
08 Cambiar imagen de fondo segun el tamaño de pantalla en el SISTEMA VETERINARIO(PHP y MySql) FullStack

Descripción

🎬 Lección 07: Imagen de fondo en una SECTION de mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql) FullStack

¡Claro! Aquí tienes la descripción elegante para la lección, enfocada en los toques estéticos con CSS:

Estética Profesional: Fondo de Imagen y Transparencia PNG 🖼️

En esta lección, elevamos el diseño de nuestro sitio web añadiendo un fondo de imagen a la sección de contenido, logrando una presentación más limpia y atractiva. Explorarás cómo las propiedades de CSS se combinan con la estructura de Bootstrap para un resultado sofisticado.

Puntos destacados de la lección:

  • Preparación de Estilos (CSS): Creamos una clase CSS (.info) para la sección y definimos las propiedades de estilo de forma organizada, diferenciando entre el código inline y la mejor práctica de usar un bloque <style> en la cabecera. [02:12]
  • Transparencia PNG: La Clave de la Limpieza ✨: Se explica la importancia de utilizar imágenes en formato PNG con transparencia (previamente editadas en Photoshop) para asegurar que la imagen de fondo se vea claramente detrás del contenido principal sin bordes blancos. [04:38]
  • Implementación del Fondo Dinámico: Añadimos la propiedad background-image: url(...) para cargar una imagen de fondo. Luego, aplicamos las reglas esenciales de CSS para asegurar una visualización correcta:
    • background-size: 100% 100% (para que cubra todo el espacio). [08:15]
    • background-repeat: no-repeat (para evitar la repetición del patrón). [09:05]
  • Ajuste y Próximos Pasos 📱: Al finalizar, el diseño luce profesional. Se identifica un desafío pendiente en la responsividad para móviles, donde la imagen de fondo se distorsiona, lo cual será corregido en la siguiente lección. [10:47]

¡Con esta base, tu sección de "Acerca de Nosotros" ahora cuenta con un impacto visual mucho mayor!

$0.00
Iniciar sesión para inscribirse

Lecciones

🎨 Fundamentos e Interfaz Pública (Front-End con Bootstrap)
Lección 1. 01 BIENVENIDA AL CURSO SISTEMA VETERINARIO (PHP y MySql) FullStack 6 min
Lección 2. 02 Hola Mundo SISTEMA VETERINARIO (PHP y MySql) FullStack 11 min
Lección 3. 03 Instalando BOOTSTRAP en el SISTEMA VETERINARIO (PHP y MySql) FullStack 19 min
Lección 4. 04 Menú de navegación NAVBAR con Bootstrap en el SISTEMA VETERINARIO (PHP y MySql) FullStack 16 min
Lección 5. 05 CAROUSEL SLIDE con Bootstrap en el SISTEMA VETERINARIO (PHP y MySql) FullStack 14 min
Lección 6. 06 FILAS Y COLUMNAS con Bootstrap en el SISTEMA VETERINARIO (PHP y MySql) FullStack 20 min
Lección 7. 07 Imagen de fondo en una section de mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql) FullStack 12 min
Lección 8. 08 Cambiar imagen de fondo segun el tamaño de pantalla en el SISTEMA VETERINARIO(PHP y MySql) FullStack 9 min
Lección 9. 09 CARDS con BOOTSTRAP en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 22 min
Lección 10. 10 Galeria de imágenes en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 16 min
Lección 11. 11 Sección de testimonio de clientes en el SISTEMA VETERINARIO (PHP y MySql) FullStack 8 min
Lección 12. 12 Como poner UBICACIÓN en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql) FullStack 6 min
Lección 13. 13 Como hacer FORMULARIO en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 17 min
Lección 14. 14 Como hacer el FOOTER en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 21 min
🔐 Autenticación, Sesiones y Base de Datos (Back-End Core)
Lección 1. 15 Instalando ADMINLTE para el login de PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 12 min
Lección 2. 16 LOGIN FORMULARIO en PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 19 min
Lección 3. 17 Como crear BASE DE DATOS y la tabla USUARIO en el SISTEMA VETERINARIO (PHP y MySql)FullStack 18 min
Lección 4. 18 Conexión a la BASE DE DATOS en el SISTEMA VETERINARIO (PHP y MySql)FullStack 12 min
Lección 5. 19 Pasar variables del FORMULARIO al controlador en el SISTEMA VETERINARIO (PHP y MySql) FullStack 15 min
Lección 6. 20 Consulta SQL para lectura de USUARIOS en el SISTEMA VETERINARIO (PHP y MySql)FullStack 13 min
Lección 7. 21 Maneras de ENCRYPTAR contraseñas de los USUARIOS en el SISTEMA VETERINARIO (PHP y MySql)FullStack 10 min
Lección 8. 22 VERIFICAR contraseñas ENCRYPTADAS de los USUARIOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 9 min
Lección 9. 23 DASBOARD principal en el SISTEMA VETERINARIO(PHP y MySql)FullStack 20 min
Lección 10. 24 SESIÓN de USUARIOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 10 min
Lección 11. 25 DESTRUIR SESION de los USUARIOS y reducir codigo en el SISTEMA VETERINARIO(PHP y MySql)FullStack 14 min
👤 CRUD Completo de Usuarios (Gestión de Datos)
Lección 1. 26 LISTADO de los USUARIOS desde la BASE DE DATOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 18 min
Lección 2. 27 FORMULARIO para el REGISTRO de USUARIOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 19 min
Lección 3. 28 CRUD - CREATE para el REGISTRO de USUARIOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 25 min
Lección 4. 29 ZONA HORARIA para registro de datos en el SISTEMA VETERINARIO(PHP y MySql)FullStack 26 min
Lección 5. 30 Mandar RESPUESTA del CONTROLADOR a la VISTA en el SISTEMA VETERINARIO(PHP y MySql)FullStack 16 min
Lección 6. 31 Como INSTALAR mensajes con SWEETALERT2 en el SISTEMA VETERINARIO(PHP y MySql)FullStack 15 min
Lección 7. 32 Como INSTALAR DATATABLES sin morir en el INTENTO en el SISTEMA VETERINARIO(PHP y MySql)FullStack 15 min
Lección 8. 33 DATATABLES en ESPAÑOL MÁS REPORTES Y PAGINACIÓN en el SISTEMA VETERINARIO(PHP y MySql)FullStack 16 min
Lección 9. 34 LECTURA de datos de un usuario especifico en el SISTEMA VETERINARIO(PHP y MySql)FullStack 17 min
Lección 10. 35 CRUD - UPDATE de datos de un usuario especifico en el SISTEMA VETERINARIO(PHP y MySql)FullStack 17 min
Lección 11. 36 CRUD - UPDATE de datos de un usuario especifico en el SISTEMA VETERINARIO(PHP y MySql)FullStack 16 min
Lección 12. 37 CRUD - DELETE de datos de un usuario especifico en el SISTEMA VETERINARIO(PHP y MySql)FullStack 15 min
📦 CRUD Completo de Productos y Relaciones de Tablas
Lección 1. 38 MÓDULO PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 11 min
Lección 2. 39 Tabla PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 11 min
Lección 3. 40 CRUD - READ de PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 14 min
Lección 4. 41 Formulario de PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 16 min
Lección 5. 42 Controlador CREATE PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 12 min
Lección 6. 43 GENERADOR de CÓDIGO FUENTE en el SISTEMA VETERINARIO(PHP y MySql)FullStack 11 min
Lección 7. 44 Cargar imagen del PRODUCTO al PROYECTO en el SISTEMA VETERINARIO(PHP y MySql)FullStack 15 min
Lección 8. 45 Mostrar datos del PRODUCTO en el SISTEMA VETERINARIO(PHP y MySql) FullStack 12 min
Lección 9. 46 CONSULTA SQL CON RELACIÓN DE TABLAS en el SISTEMA VETERINARIO(PHP y MySql) FullStack 12 min
Lección 10. 47 LECTURA de datos del PRODUCTO en el SISTEMA VETERINARIO(PHP y MySql) FullStack 12 min
Lección 11. 48 CONTROLADOR para ACTUALIZAR el producto en el SISTEMA VETERINARIO(PHP y MySql) FullStack 11 min
Lección 12. 49 CONTROLADOR para ACTUALIZAR la IMAGEN el producto en el SISTEMA VETERINARIO(PHP y MySql)FullStack 11 min
Lección 13. 50 CONTROLADOR para DELETE el producto en el SISTEMA VETERINARIO(PHP y MySql)FullStack 9 min
🌟 Mejora de la Experiencia y Visualización de Productos
Lección 1. 51 CÓDIGO FUENTE GRATIS del curso de SISTEMA VETERINARIO(PHP y MySql) FullStack 4 min
Lección 2. 52 Mejorando el DASHBOARD principal del curso de SISTEMA VETERINARIO(PHP y MySql)FullStack 10 min
Lección 3. 53 Cargar productos en la página principal del curso de SISTEMA VETERINARIO(PHP y MySql)FullStack 10 min
Lección 4. 54 Cargar productos en la página principal del curso de SISTEMA VETERINARIO (PHP y MySql) FullStack 8 min
📅 Desarrollo del Módulo de Reservas con FullCalendar
Lección 1. 55 Como INSTALAR FULLCALENDAR sin morir en el intento en el SISTEMA VETERINARIO(PHPyMySql) FullStack 11 min
Lección 2. 56 Configurar FULLCALENDAR sin morir en el intento en el SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
Lección 3. 57 Tabla en la base de datos para guardar FULLCALENDAR en el SISTEMA VETERINARIO(PHPyMySql)FullStack 15 min
Lección 4. 58 De MySQL a JSON para cargar en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack 10 min
Lección 5. 59 Mostrar datos de cada evento y día con FULLCALENDAR en el SISTEMA VETERINARIO(PHPyMySql)FullStack 12 min
Lección 6. 60 MODAL de Bootstratp en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack 12 min
Lección 7. 61 Definir los HORARIOS de reservas en FULLCALENDAR en el SISTEMA VETERINARIO(PHPyMySql)FullStack 11 min
Lección 8. 62 Formulario de reservas en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack 10 min
Lección 9. 63 Formulario de reserva con FECHAS Y HORA en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
🔄 Lógica de Registro, Login y Reservas (Back-End Avanzado)
Lección 1. 64 LOGIN, INICIO DE SESIÓN Y REGISTRO en FULLCALENDAR enSISTEMA VETERINARIO (PHP y MySql) FullStack 10 min
Lección 2. 65 Sesión en la página principal en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
Lección 3. 66 Sesión en RESERVA de CITAS en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
Lección 4. 67 Formulario de REGISTRO en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 10 min
Lección 5. 68 CONTROLLER de REGISTRO en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
Lección 6. 69 CONTROLLER de REGISTRO Y LOGIN en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
Lección 7. 70 CARGAR DATOS del usuario en el FORMULARIO de RESERVAS en SISTEMA VETERINARIO (PHPyMySql)FullStack 9 min
Lección 8. 71 Preparando DATOS para registrar reservas con FULLCALENDAR en SISTEMA (PHP y MySql) FullStack 12 min
Lección 9. 72 GENERAR CÓDIGO para guardar reservas con FULLCALENDAR en SISTEMA (PHP y MySql) FullStack 11 min
Lección 10. 73 INCORPORAR AJAX para verificar horarios en FULLCALENDAR en SISTEMA (PHP y MySql) FullStack 9 min
Lección 11. 74 CONTROLLER para verificar horarios en la base de datos FULLCALENDAR en SISTEMA (PHP y MySql) FullStack 9 min
Lección 12. 75 CONTROLLER para verificar horarios en la base de datos FULLCALENDAR en SISTEMA (PHP y MySql) FullStack 12 min
🛡️ Seguridad, Administración de Citas y Cierre
Lección 1. 76 Ajustando el FULLCALENDAR para ESCOGER FECHAS de reservas en SISTEMA (PHP y MySql) FullStack 9 min
Lección 2. 77 Evitar reservas de citas de días anteriores en FULLCALENDAR en el SISTEMA (PHP y MySql) FullStack 12 min
Lección 3. 78 VALIDAR según el CARGO del USUARIO en el SISTEMA (PHP y MySql) FullStack 8 min
Lección 4. 79 MÓDULO RESERVAS en el SISTEMA del panel administrativo (PHP y MySql) FullStack 10 min
Lección 5. 80 CARGAR DATOS completos de las RESERVAS en el SISTEMA (PHP y MySql) FullStack 10 min
Lección 6. 81 Fin del curso Sistema de reserva de CITAS con (PHP y MySql) FullStack 8 min

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso