Hi Leute,
Ich habe mich heute mal ran gemacht und ein wenig rum probiert und da Ich mal auf einer Internetseite ein Fullsize Video als Hintergrund gesehen habe wollte ich es mal selbst versuchen. Das Video selbst hab ich zum laufen bekommen
nur habe ich das Problem das sobald ich ein Bild/Logo einfüge wird dies nicht angezeigt. Ich habe eine HTML Datei und eine CSS Datei das Logo ist im richtigen Ordner. Hackt mir nicht gleich den Kopf ab ich bin noch sehr frisch in der Materie und bin noch in der Lernphase =).
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testdokument</title>
<link rel="stylesheet" href="stylesheet.css">
<img id="Logo" src="img/logo.jpg" alt="test">
</head>
<body>
<section>
<div id="ud_overlay"></div>
<video loop preload="auto" autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>
</section>
</body>
</html>
CSS Code:
@charset "utf-8";
/* CSS Document */
body, html { width:100%; width:100%; margin:0; padding:0;}
section { position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; background:#000; overflow:hidden;}
section video { min-width:100%; min-height:100%; position:absolute; top:0; left:0; bottom:0; right:0;}
#ud_overlay { background:rgba(0,0,0,0.6);position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; z-index:1;}
#Logo {
margin-left:350px;
margin-top:20px;
z-index:10;}
Ich habe mich heute mal ran gemacht und ein wenig rum probiert und da Ich mal auf einer Internetseite ein Fullsize Video als Hintergrund gesehen habe wollte ich es mal selbst versuchen. Das Video selbst hab ich zum laufen bekommen
nur habe ich das Problem das sobald ich ein Bild/Logo einfüge wird dies nicht angezeigt. Ich habe eine HTML Datei und eine CSS Datei das Logo ist im richtigen Ordner. Hackt mir nicht gleich den Kopf ab ich bin noch sehr frisch in der Materie und bin noch in der Lernphase =).
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testdokument</title>
<link rel="stylesheet" href="stylesheet.css">
<img id="Logo" src="img/logo.jpg" alt="test">
</head>
<body>
<section>
<div id="ud_overlay"></div>
<video loop preload="auto" autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>
</section>
</body>
</html>
CSS Code:
@charset "utf-8";
/* CSS Document */
body, html { width:100%; width:100%; margin:0; padding:0;}
section { position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; background:#000; overflow:hidden;}
section video { min-width:100%; min-height:100%; position:absolute; top:0; left:0; bottom:0; right:0;}
#ud_overlay { background:rgba(0,0,0,0.6);position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; z-index:1;}
#Logo {
margin-left:350px;
margin-top:20px;
z-index:10;}
