Cómo establecer un fondo dentro de un div

Resultado Final de la imagen de fondo que necesito:

Cómo establecer un fondo dentro de un div

Imagen de fondo que he utilizado:

Cómo establecer un fondo dentro de un div

Pero tengo este El violín

::Resumen de Violín::

HTML…

<div id="top-part">
<div id="topmost">
    <div id="top-most" class="wrapper">

    </div>
</div>
<div id="topmenu" class="wrapper">

</div>

CSS…

.wrapper{
      position: relative;
      width: 943px;
      margin: 0 auto;
}
#top-part{
      background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
      background: #900;
      opacity: 0.8;
}
#top-most{
      height: 139px;
}
#topmenu{
      background: #900;
      opacity: 0.8;
      height: 51px;
      border-radius: 0 0 20px 20px;
}
La pregunta es?
Posibles duplicados: Imagen de Fondo de un <div> el elemento
Reseteando la imagen de fondo en el interior de la parte superior-la parte superior e topmenu)
Hey! esto no es un duplicado como su enlace
Ver a mis actualizado pregunta que puede permitir que usted entiende.

OriginalEl autor | 

3 Kommentare

  1. 4

    Usted podría hacer como este violín

    html…

    <div id="top-part">
      <div id="topmost">
      </div>
    </div>
    <div id="top-menu" class="wrapper">
      <div id="topmenu">
      </div>
    </div>

    css…

    .wrapper{
        position: relative; 
        width: 943px; 
        margin: 0 auto;
    }
    
    #top-part{
       background: url(img/bg-header-effects.png) no-repeat top center;
    }
    #topmost{
       background: #900; 
       opacity: 0.8; 
       height: 139px;
    }
    #top-menu{
       background: url(img/bg-header-effects.png) no-repeat 50% 45%; 
       border-radius: 0 0 20px 20px;
    }
    #topmenu{
       background: #900; 
       opacity: 0.8; 
       height: 51px; 
       border-radius: 0 0 20px 20px;
    }
    bueno! pero, ¿cómo 50% 45% funciona?
    Ver en este enlace xhtml.com/en/css/reference/background-position

    OriginalEl autor

  2. 11

    Actualización – para cubrir su reciente edición

    #header{
    
        background: #f00 url('http://i.stack.imgur.com/GWVfL.jpg');
        opacity: .6;
        width: 100%;
        height: 189px;
    }

    Trabajo De Violín


    Usted podría tratar de usar el background propiedad en CSS:

    div{
        background: url('path_to_your_image.jpg') no-repeat;
    }

    Aprender más sobre el uso de la imagen de fondo propiedad aquí

    Nota:

    Hay una diferencia entre background y background-image. En esta respuesta he usado el background propiedad que básicamente toma todas las opciones posibles para una imagen de fondo en CSS y les permite ser utilizado en una sola llamada.

    Por ejemplo, usted podría dividir la anterior en dos selectores:

    div{
        background-image: url('path_to_your_image.jpg') no-repeat; 
        background-repeat: no-repeat;
    }
    Desde w3schools es obsoleta en tanto, aquí hay otro enlace que sería mejor: developer.mozilla.org/en-US/docs/CSS/background-image
    Voy a actualizar mi post con el enlace, buena llamada.
    Que no me deja publicar que el enlace de ninguna idea por qué?
    Porque se ha perdido la https:// parte 🙂 hecho por usted.
    5 upvotes y no aceptar @user2253835 ?

    OriginalEl autor What have you tried

  3. 0

    El enfoque sencillo que estoy pensando es tener una imagen dentro de divs que cubre toda la página. El código va a ser muy simple, pero el único inconveniente es que la imagen puede ser deformado o puede hacer clic en a menos que tenga este.

    HTML:

    <div id="backgroundcolor">
                <div id="backgroundimage">
                    </div>
            </div>

    CSS:

    #backgroundcolor {
        background-color: #000;
        z-index: 1;
    }
    #backgroundimage {
        background: ("http://cdn.theatlantic.com/static/infocus/election110712/s_e01_37923312.jpg");
        resize: none;
        object-position: center;
        object-fit: initial;
    }
    Yo no podía entender su respuesta. Por favor, ¿podrías mostrarme una demo.

    OriginalEl autor

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea