Fit Div Größe auf Hintergrund Bild

Ich versuche, meine div Größe die Größe meines Hintergrundbildes zu machen. Wenn ich ein Hintergrundbild einstelle, wird es abgeschnitten (siehe Bild unten). Ich habe versucht, Hintergrundgröße auf 100% Breite und Höhe einzustellen.Fit Div Größe auf Hintergrund Bild

Mein Code unten

.centerimage { 
 
     display: block 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     width: 100%; 
 
    } 
 
    .Internet{ 
 
     background-image: url("content/happylaptoplady.png"); 
 
     margin-top: 100px; 
 
     width: 250px; 
 
     float: left; 
 
     margin-right: 30px; 
 
     margin-left: 130px; 
 
     text-align: center; 
 
    } 
 
    .Phone{ 
 
     margin-top: 100px; 
 
     float: left; 
 
     width: 250px; 
 
     margin-right: 30px; 
 
     text-align: center; 
 
    } 
 
    .Television{ 
 
     margin-top: 100px; 
 
     float: left; 
 
     width: 250px; 
 
     margin-right: 30px; 
 
     text-align: center; 
 
    } 
 
    .Service { 
 
     text-align: center; 
 
     font-weight: 600; 
 
    } 
 
    .Dollar { 
 
     font-size: 20px; 
 
    } 
 
    .Benefits { 
 
     float: left; 
 
    }

<img src="content/severroom.png" class="centerimage" /> 
 
    
 
    <div class="Internet"> 
 
     <h3>INTERNET</h3> 
 
     <h7>CABLE, DSL & RURAL WIRELESS</h7> 
 
     <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4> 
 
     <ul class="Benefits"> 
 
     <li class="Benefits">UNLIMITED PLANS AVAILABLE</li> 
 
     <li class="Benefits">NOW WITH LOWER PRICES</li> 
 
     <li class="Benefits">FASTER SPEEDS - UP TO 60 MBPS!</li> 
 
     </ul> 
 
    </div> 
 
    <div class="Phone"> 
 
     <h3>PHONE</h3> 
 
     <h7>RESIDENTIAL & COMMERCIAL</h7> 
 
    </div> 
 
    <div class="Television"> 
 
     <h3>TELEVISION</h3> 
 
     <h7>SHAW DIRECT/INTERNET TV</h7> 
 
    </div>

Quelle

2016-09-22 Thomas Hutton

Mögliche Duplikat (http [Wie div Höhe zu bekommen Auto-Adjust auf Hintergrund Größe?]: // Stackoverflow .com/questions/600743/how-to-get-div-height-auf-auto-adjust-to-background-size) –

Es wird sehr hilfreich sein, wenn Sie jsfiddle.net machen! –

Fügen Sie den folgenden CSS zur Klasse

.Internet{ 
     background-image: url("http://datadrivendetroit.org/wp-content/uploads/2015/03/Jobs-Graphic.jpg"); 
      background-repeat: no-repeat; 
     background-size: 100% 100%; 

     margin-top: 100px; 
     width: 250px; 
     float: left; 
     margin-right: 30px; 
     margin-left: 130px; 
     text-align: center; 
    }

.centerimage { 
 
    display: block 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 100%; 
 
} 
 
.Internet{ 
 
    background-image: url("http://datadrivendetroit.org/wp-content/uploads/2015/03/Jobs-Graphic.jpg"); 
 
     background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 

 
    margin-top: 100px; 
 
    width: 250px; 
 
    float: left; 
 
    margin-right: 30px; 
 
    margin-left: 130px; 
 
    text-align: center; 
 
} 
 
.Phone{ 
 
    margin-top: 100px; 
 
    float: left; 
 
    width: 250px; 
 
    margin-right: 30px; 
 
    text-align: center; 
 
} 
 
.Television{ 
 
    margin-top: 100px; 
 
    float: left; 
 
    width: 250px; 
 
    margin-right: 30px; 
 
    text-align: center; 
 
} 
 
.Service { 
 
    text-align: center; 
 
    font-weight: 600; 
 
} 
 
.Dollar { 
 
    font-size: 20px; 
 
} 
 
.Benefits { 
 
    float: left; 
 
}

<img class="centerimage" /> 
 

 
<div class="Internet"> 
 
    <h3>INTERNET</h3> 
 
    <h7>CABLE, DSL RURAL WIRELESS</h7> 
 
    <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4> 
 
    <ul class="Benefits"> 
 
    <li class="Benefits">UNLIMITED PLANS AVAILABLE</li> 
 
    <li class="Benefits">NOW WITH LOWER PRICES</li> 
 
    <li class="Benefits">FASTER SPEEDS - UP TO 60 MBPS!</li> 
 
    </ul> 
 
</div> 
 
<div class="Phone"> 
 
    <h3>PHONE</h3> 
 
    <h7>RESIDENTIAL COMMERCIAL</h7> 
 
</div> 
 
<div class="Television"> 
 
    <h3>TELEVISION</h3> 
 
    <h7>SHAW DIRECT/INTERNET TV</h7>

Quelle

2016-09-22 03:50:36 Gowtham

Sie sollten einen Wrapper erstellen alle Ihre Text zu wickeln und die Umhüllung sollte Hintergrundbild haben. Ich habe Ihren HTML/CSS geändert. Überprüfen Sie bitte das. https://jsfiddle.net/2n4fy3bc

.wrapper { 
 
    background: url('http://i.imgur.com/HLSuhdi.png') no-repeat; 
 
    width: 288px; 
 
    height: 257px; 
 
    border: 2px solid orange; 
 
} 
 
.Internet { 
 
    text-align: center; 
 
} 
 
.Phone { 
 
    width: 250px; 
 
    margin-right: 30px; 
 
    text-align: center; 
 
} 
 
.Television { 
 
    text-align: center; 
 
} 
 
.Television h3 { 
 
    margin: 0; 
 
} 
 
.Service { 
 
    text-align: center; 
 
    font-weight: 600; 
 
} 
 
.Dollar { 
 
    font-size: 20px; 
 
} 
 
.Benefits { 
 
    list-style: none; 
 
    margin: 4px 0; 
 
} 
 
.Benefits li { 
 
    margin: 2px 0; 
 
} 
 
h3, 
 
h4 { 
 
    margin: 5px 0; 
 
}

<div class="wrapper"> 
 
    <div class="Internet"> 
 
    <h3>INTERNET</h3> 
 
    <h7>CABLE, DSL & RURAL WIRELESS</h7> 
 
    <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4> 
 
    <ul class="Benefits"> 
 
     <li class="Benefits">UNLIMITED PLANS AVAILABLE</li> 
 
     <li class="Benefits">NOW WITH LOWER PRICES</li> 
 
     <li class="Benefits">FASTER SPEEDS - UP TO 60 MBPS!</li> 
 
    </ul> 
 
    </div> 
 
    <div class="Phone"> 
 
    <h3>PHONE</h3> 
 
    <h7>RESIDENTIAL & COMMERCIAL</h7> 
 
    </div> 
 
    <div class="Television"> 
 
    <h3>TELEVISION</h3> 
 
    <h7>SHAW DIRECT/INTERNET TV</h7> 
 
    </div> 
 
</div>

Deinetwegen Hintergrundbild verwendet, Bild feste Breite und Höhe für das beste Anzeigeergebnis werden soll (nicht vergrößern oder strecken ...). Deshalb müssen Sie wissen, wie viel Platz der Text hat. Wenn du das div verwendest, erhöht es automatisch die Höhe basierend auf deinem inneren Inhalt.

Quelle

2016-09-22 03:20:11

Fit Div Größe auf Hintergrund Bild

Antwort

Verwandte Themen