An die WebEntwickler/Designer: Reponsive Background Image (Bootstrap)

On3byT

Active Member
5 Apr 2015
610
130
#1
Moin, wie der Titel bereits verrät hab ich Stress mit dem Background Image.
Es skaliert sich zwar aber scheiße. Aufm Mobile Device ist kaum ist der schriftzug komplett verschoben.

Ich benutze Bootstrap und hab schon den ganzen Standard Kram durch:

CSS:
  background-image: url("../assets/img/bg.png");
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-repeat: no-repeat;
        }
Habe versucht das Ganze noch mit deinem Div zu wrappen aber kein Erfolg. Auch habe ich mit den Bootstrap Images gearbeitet auch keinen Erfolg gehabt. Natürlich habe ich bereits bei HTML und BODY auch die Height auf 100% gestellt.
Hat jemand da einen Plan von wie man das sauber macht?

Dass man eine schöne Landing Page hat auf der das Bild immer voll aufm Screen zu sehn ist? Wie z.B hier:

https://bootstrapmade.com/demo/Regna/

Kann es vielleicht daran liegen, dass das Bild einfach zu groß ist ? (3840x2260) Was hat man denn normalerweise für ein Format für ein solches Background Image?


Grüße
 

aequabit

Security Research Pigeon
8 Jan 2016
569
2,309
#2
du brauchst media queries

CSS:
.my-container {
    // Extra small devices (portrait phones, less than 576px)
    // No media query since this is the default in Bootstrap
    
    // background ...

    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) {
        // background ...
    }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) {
        // background ...
    }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) {
        // background ...
    }

    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) {
        // background ...
    }
}
sollte selbsterklärend sein, bei fragen fragen

lg taube