Deze gradiënt background werkt zowel horizontaal als verticaal. In de onload van de body-tag staat aan het eind ",1". Als je de 1 in een 0 (nul) verandert zal de gradiënt horizontaal werken. De gradient-canvas-procedure valideert op zijn CSS en html(5) en volgens de (strenge) JSLint-norm, en is multi-browser.
Vervang de body start tag (<body>) door
<body id="gradient_background" onload="maak_een('gradient_background','#fa8072','#ffffff',1);">
Vervang de begin- en eind-kleur (#xxxxxx) door waarden die passen op jouw website-pagina.
Plaats het onderstaande javascript in de head-sectie van jouw pagina.
<script>
/*global document: false */
var maak_een = (function () {
'use strict';
var canvas_gradient = document.createElement("canvas"),
sDataUrl,
stijl_element = document.createElement("style"),
gebruik_canvas_gradient = (typeof (canvas_gradient.getContext) === "function"),
ie_canvas_css = "body{height:100%;margin:0;padding-left:8px}",
de_i_offset_hoogte_oud_van = gebruik_canvas_gradient ? canvas_gradient.getContext("2d") : null,
als_ie_explorer = /*@cc_on!@*/
false;
if (als_ie_explorer) {
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = ie_canvas_css;
} else {
stijl_element.appendChild(document.createTextNode(ie_canvas_css));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
}
try {
de_i_offset_hoogte_oud_van.canvas.toDataURL();
} catch (err) {
gebruik_canvas_gradient = false;
}
if (gebruik_canvas_gradient) {
return function (ele, kleur_een, kleur_twee, herhaal_y) {
if (typeof (ele) === "string") {
ele = document.getElementById(ele);
}
if (!ele) {
return false;
}
var offset_breedte = ele.offsetWidth,
offset_hoogte = ele.offsetHeight,
de_gradient,
herhalen;
canvas_gradient.width = offset_breedte;
canvas_gradient.height = offset_hoogte;
if (herhaal_y) {
de_gradient = de_i_offset_hoogte_oud_van.createLinearGradient(0, 0, offset_breedte, 0);
herhalen = "repeat-y";
} else {
de_gradient = de_i_offset_hoogte_oud_van.createLinearGradient(0, 0, 0, offset_hoogte);
herhalen = "repeat-x";
}
de_gradient.addColorStop(0, kleur_een);
de_gradient.addColorStop(1, kleur_twee);
de_i_offset_hoogte_oud_van.fillStyle = de_gradient;
de_i_offset_hoogte_oud_van.fillRect(0, 0, offset_breedte, offset_hoogte);
sDataUrl = de_i_offset_hoogte_oud_van.canvas.toDataURL("image/png");
ele.style.backgroundRepeat = herhalen;
ele.style.backgroundImage = "url(" + sDataUrl + ")";
ele.style.backgroundColor = kleur_twee;
};
} else {
if (als_ie_explorer) {
canvas_gradient = gebruik_canvas_gradient = de_i_offset_hoogte_oud_van = null;
return function (ele, kleur_een, kleur_twee, herhaal_y) {
if (typeof (ele) === "string") {
ele = document.getElementById(ele);
}
if (!ele) {
return false;
}
ele.style.zoom = 1;
ele.style.filter += " " + ["progid:DXImageTransform.Microsoft.gradient(GradientType=", +(!!herhaal_y), ",enabled=true,startColorstr=", kleur_een, ",endColorstr=", kleur_twee, ")"].join("");
};
} else {
canvas_gradient = gebruik_canvas_gradient = de_i_offset_hoogte_oud_van = null;
return function (ele, kleur_twee) {
if (typeof (ele) === "string") {
ele = document.getElementById(ele);
}
if (!ele) {
return false;
}
ele.style.backgroundColor = kleur_twee;
};
}
}
}());
</script>