Bootstrap-Banner ändert sich nicht, wenn Sie zum Handy gehen

Ich habe eine Bootrap-Website und das ist das Top-Banner auf meiner Website. Grundsätzlich haben Sie ein Hintergrundbild, das 100% über den Bildschirm geht. Ich habe Text und einen Knopf auf der linken Seite. - Es sieht auf dem Desktop in Ordnung, aber wenn ich nach unten zu Tablette gehen gehen die Worte über die Personen, die auf der rechten Seite des Bildes Gesicht - Auf mobiles es nicht den PersonenBootstrap-Banner ändert sich nicht, wenn Sie zum Handy gehen

Das Hintergrundbild isn Gesicht nicht zeigen‘ t Skalierung. Wie kann ich das machen?

Tablet Screenshot: http://www.onvia.com/sites/default/files/tabelts-banner.jpg

Mobil Screenshot: http://www.onvia.com/sites/default/files/mobile-banner.jpg

Bootply: http://www.bootply.com/JeOg9KYYnY

HTML:

<div class="intro-header"> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-7"> 
       <div class="intro-message"> 
        <h1>Adobe Exchange</h1><br> 
        <p class="subtitle">Search the most comprehensive online library of video tutorials, code samples to help you quickly learn how to create the web.</p> 
        <p class="intro-divider"></p> 
        <a href="#register" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></a> 

       </div> 
      </div> 
     </div> 

    </div> 
    <!-- /.container --> 

</div> 
<!-- /.intro-header -->

CSS:

.intro-header { 
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ 
    padding-bottom: 50px; 
    text-align: left; 
    color: #f8f8f8; 
    background: url(http://www.onvia.com/sites/default/files/example-bg.jpg) no-repeat center center; 
    background-size: cover; 
}

Quelle

2016-05-23 user3075987

Das Problem hier ist das Hintergrundbild ist zentriert, so auf Mobile, nur die Mitte des Bildes ist sichtbar.

Eine Möglichkeit, dies zu tun, ist eine Medienabfrage für mobile/Tablette Bildschirmgrößen zu schreiben, und die Eigenschaften Hintergrund

ändern

.intro-header { 
    background: url(URL-HERE) no-repeat center right; 
}

Dies wird das Hintergrundbild rechts ausrichten.

Wenn Sie eine endliche Kontrolle der Positionierung wünschen, müssen Sie wahrscheinlich von der Hintergrundeigenschaft wegkommen und einige andere Tricks anwenden. Sehen Sie sich diesen CSS-Tricks-Artikel zu verschiedenen Methoden zum Platzieren von Hintergrundbildern an. Der Artikel konzentriert sich auf ganzseitige Hintergründe, aber Sie sollten in der Lage sein, die für Ihren Fall verwendeten Methoden anzuwenden.

https://css-tricks.com/perfect-full-page-background-image/

Quelle

2016-05-23 19:52:55

Versuchen Sie es zu ändern:

background-size:100% auto;

gemäß Twitter Bootstrap Responsive Background-Image inside Div

Quelle

2016-05-23 19:53:32 manchakowski

Es ist das Bild kleiner und fit im mobilen Bildschirm machen, aber es ist nicht groß genug, und der Text geht aus der Banner – user3075987

Ja, die Proportionen der vollständigen Banner-Skalierung werden das Design abwerfen, wenn Sie den Rest der Site nicht skalieren. Sie können Medienabfragen (google bootstrap media queries) verwenden, um alles passend zu machen, aber Sie müssen wahrscheinlich ein anderes Bild (oder das Bild, das abgeschnitten wurde) verwenden, wenn Sie möchten, dass dieses genau so funktioniert, wie Sie es darstellen. – manchakowski

Wie würden Sie es dann reparieren? – user3075987

Bootstrap-Banner ändert sich nicht, wenn Sie zum Handy gehen

Antwort

Verwandte Themen