0

tengo el siguiente problema, estoy haciendo una pagina web que debe ser editable eso incluye la imagen de fondo de un carrusel, asi es como se debe de ver

Y ese es el codigo que uso en el carrusel

Pero ahora, para que la imagen sea editable uso este codigo

<div class="single-hero-slides bg-img">
            <asp:Repeater ID="Repeater2" runat="server">
                        <ItemTemplate>
                            <img  style="background-image:inherit" src="data:image/jpg;base64,<%# Convert.ToBase64String((byte[]) DataBinder.Eval(Container.DataItem,"Prueba_C_Imagen1") )%>" />
                        </ItemTemplate>
             </asp:Repeater>

Pero asi es como se ve introducir la descripción de la imagen aquí

Se encima la imagen al texto que deberia de mostrar, ya intente meter el codigo anterior como background image pero no funciona y ponerle propiedades transparentes pero no funciona tampoco

Este es el codigo del carrusel completo

 <div class="caviar-hero-slides owl-carousel">
        <!-- Single Slides -->
        <div class="single-hero-slides bg-img">
            <asp:Repeater ID="Repeater2" runat="server">
                        <ItemTemplate>
                            <img  style="background-image:inherit" src="data:image/jpg;base64,<%# Convert.ToBase64String((byte[]) DataBinder.Eval(Container.DataItem,"Prueba_C_Imagen1") )%>" />
                        </ItemTemplate>
             </asp:Repeater>
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-11 col-md-6 col-lg-4">
                        <div class="hero-content">
                            <h2>
                            <asp:Label  runat="server" id="lbl_titulo1_carr" apodo="Titulo del carrusel 1"></asp:Label>
                            </h2>
                            <p>
                                <asp:Label  runat="server" id="lbl_cont1_carr" apodo="Contenido del carrusel 1"></asp:Label>
                            </p>
                            <button type="button" class="btn caviar-btn" data-toggle="modal" data-target="#myModal"> Inscripción </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- Single Slides -->
        <div class="single-hero-slides bg-img" style="background-image: url(../img/car2.jpg);">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-11 col-md-6 col-lg-4">
                        <div class="hero-content">
                            <h2>
                                <asp:Label  runat="server" id="lbl_titulo2_carr" apodo="Titulo del carrusel 2"></asp:Label>
                            </h2>
                            <p>
                                <asp:Label  runat="server" id="lbl_cont2_carr" apodo="Contenido del carrusel 2"></asp:Label>
                            </p>
                            <button type="button" class="btn caviar-btn" data-toggle="modal" data-target="#myModal"> Inscripción </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Espero me puedan ayudar, y gracias de ante mano

2
  • Coloca el código del carrusel por favor (el original), solo lo mencionas pero no lo colocaste. Saludos. Commented el 10 ago. 2020 a las 17:39
  • Ya edite la pregunta añadiendolo, gracias de ante mano Commented el 10 ago. 2020 a las 17:53

1 respuesta 1

1

Probaste con un Z-index ? el z-index es para acomodar los niveles de visualizacion por capa, dale una class a esa imagen, y luego a esa class dale un

.tuclase{
  z-index: -1;
}

por ejemplo:

sino mandame tu codigo en un codepen y lo revisamos.

5
  • Lo voy a pobrar en seguida, muchas gracias Commented el 10 ago. 2020 a las 18:19
  • codepen.io/IAmRamc/pen/gOrpNXp Este es el link, desafortunadamente se sigue encimando la imagen Commented el 10 ago. 2020 a las 18:37
  • ¿? El codigo minimo necesario ya esta ahí Commented el 10 ago. 2020 a las 19:21
  • No lo veo como en tu pantalla al codepen , deberias agregar el css y tambien si usas un plugin de carrousel Commented el 12 ago. 2020 a las 17:50
  • codepen.io/r0binxp/pen/dyMyGqm aca tengo un pen donde utilizo un slider de bootstrap parecido a lo que precisas. por ahi te guias Commented el 12 ago. 2020 a las 17:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.