CSS and HTML

Hi,
Is it possible to implement an animated background (found a CSS code for that) into the HTML Head of a website?

You can do it. But you would need a jquery plugin to do it.

Hi,
This seems pretty simple ...
Just play with absolue / relative positioning and z-index

edit : sample here to get an idea, no js needed https://codepen.io/jordanlachance/pen/QNMwBg

jQuery is already active by default in my web hosting service. This is what I want to implement: https://codepen.io/MarcoGuglielmelli/pen/lLCxy I am just not able to implement this stuff in the HTML head (no experience with CSS etc...)

supermex said:

jQuery is already active by default in my web hosting service. This is what I want to implement: https://codepen.io/MarcoGuglielmelli/pen/lLCxy I am just not able to implement this stuff in the HTML head (no experience with CSS etc...)

Click to expand...

you can download a working source from here : https://tympanus.net/codrops/2014/09/23/animated-background-headers/

amandine said:

you can download a working source from here : https://tympanus.net/codrops/2014/09/23/animated-background-headers/

Click to expand...

Thanks, I already saw that. But what exactly do I need to put in the HTML Head now?

In your html simply put this

<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title">Connect <span class="thin">Three</span></h1>
</div>
In your css file :
/* Header */
.large-header {
position: relative;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
background-image: url('../img/demo-1-bg.jpg');
}

.main-title {
position: absolute;
margin: 0;
padding: 0;
color: #f9f1e9;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}

.main-title {
text-transform: uppercase;
font-size: 4.2em;
letter-spacing: 0.1em;
}


.main-title .thin {
font-weight: 200;
}

@media only screen and (max-width : 768px) {
.main-title
{
font-size: 3em;
}
}
and eventually include normalize css file for compatibility

And as in the demo include js files :

<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>

PM me OP. I'll insert that animated background on your website's header section for free.

SpoonFeeder said:

PM me OP. I'll insert that animated background on your website's header section for free.

Click to expand...

pm sent