Frage Parallax Effekt in HTML

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

MapHD

Neues Mitglied
23 Dezember 2017
24
0
1
14
HTML:
<html>


    <header><h1 style="color: white;font-family: AR CENA;font-size: 55px;">
        Minecraft</h1></header>
    
    
    <style>
    
html {
    height: 100%;
    overflow: hidden
    
}
body{
    color: #fff;
    margin: 0;
    padding: 0;
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y:scroll;
    overflow-x: hidden;
    font-family: "Luna";
}

header {
    box-sizing: border-box;
    min-height: 100vh;
    padding: 30vw 0 5vw;
    position: relative;
    transform-style: inherit;
    width: 100vw;
}

header h1{
    margin-top: -100px;
}

header, header:before {
    background: 50% 50% / cover;
}

header::before{
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    display:block;
    background-image: url(bgm1.jpg);
    background-size: cover;
    transform-origin: center center 0;
    transform: translateZ(-1px) scale(2);
    z-index: -1;
    min-height: 100vh;
    }
    
header * {
    font-weight: normal;
    letter-spacing: 0.2em;
    text-align: center;
    margin: 0;
    padding 1em 0;
    
}       
        text {
            transform: scale(1);
            border-color: black
        }
    </style>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />


</html>



Wie kann ich unter dem Bild ein Text einfügen.
 

basti1012

Aktives Mitglied
26 November 2017
753
70
28
38
Minden
sebastian1012.bplaced.net
Eigentlich sollte man das alles weg schmeißen und neu machen. Deine Css passt irgendwie nicht alles zusammen.
Du nutzt inline-styls obwohl du auch <style> nutzt. Die ganzen <br> kann man mit margin regeln. <styls> gehöhren in den<head> Bereich und nicht mittenrein.
Wie soll das den aussehen ?
Das bild auf der ganze Seite und einfach dann ein Text dadrunter?
 
Zuletzt bearbeitet:
Werbung: