First of all I want to give thanks for this social group known stackoverflow. I have been searching and I dont find nothing similar to resolve my problem. I want to change the backgraoundcolor(degrade) in the header and footer each time that I recharge the page. I have three files. index. html inside header and footer a div known = backgraound styles.css where I call the backgradound backgraound. js where i try to do the logic to work all of this.
I dont know as to do to work this I have try to do the next
HTML
<body>
<header>
<div id="background">
<div class="container " align="center">
<h1>My web</h1>
</div>
</div>
</header>
<footer>
<div class="container" align="center">
<h4>Lorem ipsun</h4>
</div>
</footer>
<script src="js/background.js"></script>
</body>
CSS
#backgroundmorado{
background: #258dc8; /* Old browsers */
background: -moz-linear-gradient(-45deg, #258dc8 0%, #8e2def 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #258dc8 0%,#8e2def 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #258dc8 0%,#8e2def 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#8e2def',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
height: 400px;
}
#backgroundazuloscuro{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(45deg, #1e5799 0%, #207cca 34%, #207cca 34%, #2989d8 50%, #d97be5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #1e5799 0%,#207cca 34%,#207cca 34%,#2989d8 50%,#d97be5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #1e5799 0%,#207cca 34%,#207cca 34%,#2989d8 50%,#d97be5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#d97be5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
height: 400px;
}
Javascript
function ran_col() { //function name
var color = document.getElementById('background').style.background = random;
var random = Math.floor(Math.random() * color)];
var arraybackground = ["backgroundmorado", "backgroundazul","backgroundazuloscuro"];
for (var i = 0; i <= arraybackground.length; i++) {
document.getElementById(arraybackground[i]).style.background = color;
}
}
Can I help me somebody? thanks
Aucun commentaire:
Enregistrer un commentaire