HTML und CSS - Banner und Hintergrund Positionierung

-1

Ich baue eine einfache Landing-Page, wo der Besucher ein Banner, ein Hintergrundbild darunter und ein paar vertikal nebeneinander angeordnete Schaltflächen sehen würde.HTML und CSS - Banner und Hintergrund Positionierung

Das Problem, das ich erfahre, ist, dass im Moment sowohl das Banner als auch das Hintergrundbild von der gleichen Position (die obere linke Ecke der Webseite) beginnen, so dass ein Teil des Hintergrunds durch das Banner verdeckt wird .

Der Code, den ich zur Zeit habe, ist:

<style> 
    body { 
    background: url("http://url.to/background") no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    padding: 0px; 
    margin: 0px; 
    } 

    #Wrap { 
    position: absolute; 
    } 
</style> 

<body> 
    <div id="Wrap"> 
    <img src="http://url.to/banner" /> 
    </div> 
</body>

Das erwartete Ergebnis ist das Banner Bild nehmen Sie den Anfang der Seite zu haben, während in den Bildschirm passend, ohne dass eine zusätzliche Rolle zu erscheinen. Wichtiger ist, dass der Hintergrund nach dem Banner beginnt.

https://jsfiddle.net/morL1zka/

Jede Hilfe oder Ideen geschätzt werden würde:

Eine Geige könnte unter folgenden URL zu finden.

Quelle

2017-06-08 metaarch

Können Sie eine Geige dafür erstellen? – fruitjs

@fruitjs Vielleicht meinst du einen Screenshot? Bitte entschuldigen Sie Ignoranz. – metaarch

werfen Sie einen Blick auf [jsfiddle] (https://jsfiddle.net/) und Sie werden sehen, was fruitjs fragt ..;) –

Sie können easyli dies mit JavaScript lösen. Die Hintergrundposition wird automatisch unter dem Banner eingestellt, ohne dass dessen Höhe bekannt ist.

var body = document.getElementById('body-margin'); 
 
var banner = document.getElementById('banner'); 
 

 
body.style.backgroundPositionY = banner.offsetHeight + 'px';

body { 
 
    background: url("http://simonakoleva.me/wp-content/themes/hitchcock/images/bg.jpg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#Wrap { 
 
    background-color: #345370; 
 
    text-align:center; 
 
}

<body id="body-margin"> 
 
    <div id="Wrap"> 
 
    <img id="banner" src="http://simonakoleva.me/wp-content/uploads/2017/05/mybanner.jpg" /> 
 
    </div> 
 
</body>

Hier ist auch die aktualisierte Geige: https://jsfiddle.net/morL1zka/2/

Quelle

2017-06-08 11:20:25

Ich habe versucht,

hinzufügen, aber es sieht aus wie dies die Marge des Banners versaut, Positionierung es ein paar Pixel unter dem Anfang der Seite. – metaarch

@metaarch bitte überprüfen Sie meine bearbeitete Antwort. Ich habe eine andere Lösung für dich. ive fügte auch #wrap eine Hintergrundfarbe hinzu, um auf jeder Fenstergröße einen schönen Look zu bieten. –

Sie background-position-y dafür verwenden sollte, und Sie müssen Wert einzustellen, der auf der Höhe der gleich Banner

body { 
 
    background: url("https://www.w3schools.com/css/img_fjords.jpg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-position-y: 100px;/*the value must be the same height as the banner */ 
 
    
 
} 
 

 
#Wrap { 
 

 
    position: absolute; 
 
}

<div id="Wrap"> 
 
    <img src="http://url.to/banner" /> 
 
</div>

Quelle

2017-06-08 11:22:28 Chiller

HTML und CSS - Banner und Hintergrund Positionierung

Antwort

Verwandte Themen