Cover gesamte Div mit Bild

für meine Joomla 3.x Website verwende ich eine Vorlage auf der Grundlage der EF4-Framework. Ich habe Breite "5" zugewiesen, um top2-1 zu positionieren, und "7", um top2-2 zu positionieren. Ich wollte ein benutzerdefiniertes HTML-Modul für die Homepage (http://francescaleso.com/it/) in Position top2-1 erstellen, um ein Hintergrundbild anzuzeigen, das es vollständig ausfüllt. Ich habe versucht, wie auf dieser Seite empfohlen, dies zu tun:Cover gesamte Div mit Bild

.homeimg { 
    overflow: hidden; 
    background-size: cover; 
    background-position: center; 
    background-image: url(/images/headers/home-image.jpg); 
}

Und das Modul nur

<div class="homeimg"></div>

Der Pfad des Bildes korrekt ist, weil, wenn ich „offen in neuem Tab“ versuchen Es wird korrekt angezeigt, es wird jedoch nicht auf meiner Homepage angezeigt.

Quelle

2017-07-02 94a94

Wenn ich richtig verstehe, möchten Sie das vollständige Bild in das Div, das 'class =" span5 "' hat. Um das zu erreichen, habe ich einfach Ihre '

' ''

'geändert und funktioniert. Ich hoffe, das löst dein Problem! Hier ist ein Screenshot, wie es aussieht: [Imgur] (http://imgur.com/vQjGA5y) –

Wenn das so ist, bekomme ich das: http://francescaleso.com/it/ Und wie Sie es sehen können deckt den Bereich nicht vollständig ab. Wenn Sie sich das Beispiel im Kommentar unten ansehen, werden Sie sehen, was ich erreichen möchte. Plus, ich möchte es 100% Höhe (und so füllen Sie die Seite vertikal, wenn nicht gescrollt), aber nicht horizontal – 94a94

Nehmen Sie diese Änderungen in der CSS vor.

.homeimg { 
    background-size: cover; 
    background-position: center; 
    background-image: url(/images/headers/home-image.jpg); 

    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
}

Quelle

2017-07-02 16:33:06

Doing so nicht helfen, da das Bild wird die gesamte Seite über alles zu decken der andere Inhalt, während ich es brauche, um nur den oberen linken Teil davon abzudecken. Hier ist ein Beispiel von dem, was ich ** verzweifelt ** versuche zu erreichen: http://www.joomla.it/template/8718-ohio-template-only-v1-0.html Ich ehrlich gesagt nicht ' Ich habe einen Hinweis. – 94a94

---- bearbeiten --- wenn ich ein wenig mit absoluten und relativen Positionen spielen, bekomme ich diese: das Problem ist, dass das Bild nicht die volle Höhe des unscrolled Raumes ist, und auch hat eine unerwünschte Polsterung oder etwas auf der linken Seite ...

Quelle

2017-07-02 18:53:55 94a94

Cover gesamte Div mit Bild

Antwort

Verwandte Themen