[HTML] Moving background

tejdi · Oct 1, 2015

Hello i want to create fog on my background but i don't know how to do it.
My .html code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
    <meta name="Description" content="test" />
    <meta name="Keywords" content="test" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--<link rel="shortcut icon" href="http://1.bp.blogspot.com/-Gq87btW5W4I/U5Yt7HptunI/AAAAAAAAA2c/S2efemoVbQM/s1600/th_favicon.png" />-->
    <title>Test</title>
</head>
<body> 
    <div id="header">
    <image src="images/header.png"/>
    </div>
    <h1>
        test.
    </h1>
    <p>
        test2.
    </p>
</body>
</html>

My .css code:

Code:

* {
margin: 0px;
padding: 0px;
}

p {
    font-size: 14px;
    text-align: center;
    color: white;
}

body, html {
    background-color: #000000;
    color: white;
}

a:link {
    color: red;
}


h1 {
    text-align: center;
}

#header {
width: 100%;
height: 200px;
}

I want to put "images/fog1.png" and "images/fog2.png" above "images/header.png" and make it moving like here:
https://www.reddit.com/r/leagueoflegends

Codex NG · Oct 1, 2015

http://www.w3schools.com/css/css_background.asp

Seems like its an overlay of 4 images in 1 with a animation written in gibberish hehe
Please don't pm, sadly I can't make this for you.

This is what I pulled from the css file that was buried in even more gibberish hopefully its helpful

Code:

html{
   overflow-x:hidden
}
body{
   color:#050505;
   background-image:url("//b.thumbs.redditmedia.com/fY9hIXfRe4fYJAjCGyvMICn78942vhJh-k7uZxhtv5U.png")!important;
   background-repeat:no-repeat;
   background-color:#161616!important;
   background-position:0 18px;
   background-size:100%
}
   html:not(:lang(na)) body::before{content:"";
   width:100%;
   height:400px;
   position:absolute;
   left:0;top:0;
   background-image:url("//a.thumbs.redditmedia.com/ceSPzBWItAkJuD5LNWj3XEmGFplyfkfVU-qDB0mrnz8.png");
   background-size:auto 400px;
   background-position:0 0;
   opacity:0;
   animation:mist 120s linear infinite}html:not(:lang(na)) body.footer-parent::before{content:"";
   width:100%;
   height:200px;
   position:absolute;
   left:0;
   top:0;
   z-index:0;
   background-image:url("//b.thumbs.redditmedia.com/bdg0LAfYMaN3iwvbuReHXdbQIErfzhkXXzigy-HVCTU.png");
   background-size:5760px 250px;
   background-position:0 0;
   opacity:0;
   animation:mist 160s linear infinite}a,.tagline a,html.res-nightmode .res-nightmode a,html.res-nightmode .res-nightmode a.option{color:#0096ff}textarea{border:1px solid #d3d3d3}.link-transition{transition:color 0.15s ease;

Xikini · Oct 1, 2015

I agree. It looks like 2-4 long images of fog that scroll to the left in different speeds

Chris · Oct 1, 2015

https://jsfiddle.net/acr22kfs/

[HTML] Moving background

tejdi

Guest

Chris

Codex NG

Recurrent Flamer

Xikini

I whore myself out for likes

Chris

Inactive

Similar threads