Background-image-height 100%

Ich bin auf der Suche für eine Lösung meines Problems.

Ich bin mit twitter bootstrap für eine mobile Website und das ist mein Ergebnis auf mobile Ansicht:

Background-image-height 100%

<div class="row">
    <div class="span4">
        <div class="visible-phone" style="background-image: url('http://upload.tapcrowd.com/upload/catalogimages/719/[email protected]');></div>
        <p class="metadataTitle metacell">
        <span style="display: inline-block" class="ellipsis">Car Dealers</span>
        <span style="table-row"></span></p>
        </div>  
    </div>
</div>

Dem css der div wo mein Bild ist:

background-size:contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%; 
height: 300px;"

Aber wie Sie sehen können, gibt es einen Abstand zwischen dem Bild und der Inhalt unten, weiß jemand wie ich dies beheben können?

  • Stellen Sie sicher, dass Sie Margin: 0px im CSS auf beide Teile des Inhalts.
InformationsquelleAutor nielsv | 2013-05-31
  1. 1

    Set margin:0; padding:0; um sowohl das Bild und den Inhalt weiter unten. Dies entfernt keine margin. Da die HTML-fügt eine Marge von Standard -, die Sie explizit angeben müssen, HTML zu entfernen Marge.

    InformationsquelleAutor imulsion
  2. 5

    background-size:enthalten;

    https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:

    "enthalten: Dieses Schlüsselwort gibt an, dass das Hintergrundbild skaliert werden soll, um möglichst groß sein, während, um sowohl seine Abmessungen sind kleiner als oder gleich der entsprechenden Abmessungen der hintergrund-Positionierung-Bereich."

    Ihr Bild wurde skaliert, so dass es passt in das element vollständig - Sie scheinen zu wollen, zu verwenden cover statt:

    "cover: Dieses Schlüsselwort gibt an, dass das Hintergrundbild skaliert werden soll, um so klein wie möglich, während Sie sicher, dass beide Ihre Dimensionen sind größer als oder gleich wie die entsprechenden Abmessungen der hintergrund-Positionierung-Bereich."

    InformationsquelleAutor CBroe
Schreibe einen Kommentar