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 originalbody.custom-background {
/* background-image: url("https://betaniaweb.com/bw/wp-content/uploads/2020/03/Fondo.png"); */
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: white; /*aqui esta blanco ahora */
}
luego añade a la clase en CSS:
Código CSS:
Ver originalbody.responsive #page-wrapper {
max-width: 1080px;
width: auto;
overflow-x: hidden;
-webkit-box-shadow: -1px 3px 16px 7px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 3px 16px 7px rgba(0,0,0,0.75);
box-shadow: -1px 3px 16px 7px rgba(0,0,0,0.75);
}
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