Frage Parallax Effekt in HTML

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

MapHD

Neues Mitglied
23 Dezember 2017
10
0
1
14
#1
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
690
62
28
37
Minden
chat.sebastian1012.bplaced.net
#2
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: