Foros del Web » Creando para Internet » CSS »

marco de fondo

Estas en el tema de marco de fondo en el foro de CSS en Foros del Web. amigos, consulta, quiero poner un borde a los costado delimitadores de mi página, pero nunca hice esto y no sé si es correcto la forma ...
  #1 (permalink)  
Antiguo 19/03/2020, 21:29
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.039
Antigüedad: 14 años, 3 meses
Puntos: 8
De acuerdo marco de fondo

amigos, consulta, quiero poner un borde a los costado delimitadores de mi página, pero nunca hice esto y no sé si es correcto la forma que lo hago, hice una imagen con dos bordes pero no queda perfecto, no sé si exista una mejor manera o debo hacer coincidirlo con la imagen misma?

VER

este es el fondo

Agradezco vuestra ayuda
  #2 (permalink)  
Antiguo 19/03/2020, 21:58
Avatar de petit89  
Fecha de Ingreso: marzo-2011
Mensajes: 1.059
Antigüedad: 9 años, 2 meses
Puntos: 154
Respuesta: marco de fondo

pues mira, esta mas facil de lo que crees:
1- poner un fondo como el que tienes esta mal, aparte que haces mas pesada la web al tener una imagen tan grande, tienes problemas como los actuales y esto tambien será en los diferentes tamaños de pantalla.

2- haz esto:
- quita ese fondo, solo es una sombra a los lados... quita la imagen y coloca un fondo blanco:
Código CSS:
Ver original
  1. body.custom-background {
  2.     /* background-image: url("https://betaniaweb.com/bw/wp-content/uploads/2020/03/Fondo.png"); */
  3.     background-position: left top;
  4.     background-size: cover;
  5.     background-repeat: no-repeat;
  6.     background-attachment: fixed;
  7.     background-color: white; /*aqui esta blanco ahora */
  8. }

luego añade a la clase en CSS:
Código CSS:
Ver original
  1. body.responsive #page-wrapper {
  2.     max-width: 1080px;
  3.     width: auto;
  4.     overflow-x: hidden;
  5.     -webkit-box-shadow: -1px 3px 16px 7px rgba(0,0,0,0.75);
  6.     -moz-box-shadow: -1px 3px 16px 7px rgba(0,0,0,0.75);
  7.     box-shadow: -1px 3px 16px 7px rgba(0,0,0,0.75);
  8. }

y obtendras esto: https://imgur.com/eXNegBM

el efecto de sombra a los lados que buscas con puro CSS y nada de imagenes... consulta la propiedad box-shadow de CSS te servira mucho
__________________
█ WebHosting / Reseller a bajo costo | Uptime Garantizado | Soporte en Español e Ingles
¿Te sirvió la respuesta? Deja un +1 (Triangulo negro al lado derecho)
  #3 (permalink)  
Antiguo 19/03/2020, 22:24
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.039
Antigüedad: 14 años, 3 meses
Puntos: 8
Respuesta: marco de fondo

wuao, muchas gracias amigo, es perfecto.



La zona horaria es GMT -6. Ahora son las 10:02.