ver codigo
<div align="center"><div style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyYWRpYWxHcmFkaWVudCBpZD0iZyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2JhKDIyMCwgMjI0LCAyMjMsIDAuNjM1KSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3QgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMDAwMDAwIiAvPjxyZWN0IHg9Ii0yMC43MTA3JSIgeT0iLTQxLjQyMTQlIiB3aWR0aD0iMTQxLjQyMTQlIiBoZWlnaHQ9IjI4Mi44NDI3JSIgZmlsbD0idXJsKCNnKSIgLz48L3N2Zz4=);
background-image: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 162, color-stop(0%, rgba(220, 224, 223, 0.635)), color-stop(100%, #000000));
background-image: -webkit-radial-gradient(center bottom, farthest-corner, rgba(220, 224, 223, 0.635) 0%, #000000 100%);
background-image: -moz-radial-gradient(center bottom, farthest-corner, rgba(220, 224, 223, 0.635) 0%, #000000 100%);
background-image: -ms-radial-gradient(center bottom, farthest-corner, rgba(220, 224, 223, 0.635) 0%, #000000 100%);
background-image: -o-radial-gradient(center bottom, farthest-corner, rgba(220, 224, 223, 0.635) 0%, #000000 100%);
background-image: radial-gradient(farthest-corner at center bottom, rgba(220, 224, 223, 0.635) 0%, #000000 100%);padding:15px;width:200px;-moz-border-radius:10px; -webkit-border-radius: 10px; border-radius: 10px;border:3px solid #cdcdcd;"><a href="http://redeando.blogspot.com" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0TeKmsOGXJGsblNbLAYnuFAQXUHu69M05Om72GRhn_pwwU77NZW5vcKS7nZs71VmGWvBYjUmASObaYLS9DNsor9CQt4JlhDOz3EFTu1uEn_SoL6St_eTJNWENtt_GoB_O8rVnk0SMg_s/s1600/CAMBIAR+FONDO.png" /></a><input id="background_input" type="file"/><boton id="upload_button">Subir Imagen</boton></div></div>
<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed:400,700' rel='stylesheet' type='text/css'>
<style>
body {
background-size: cover;
background-position: center center;
}
input[type="file"] {
display: none
}
boton {
color: rgba(255, 255, 255, 0.85);
font-family: 'Cabin Condensed', sans-serif;
letter-spacing: 2px;cursor:pointer;
font-size: 20px;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
border: none;
border-radius: 5px;
padding: 5px 25px;
border: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.2);
}
boton:hover {opacity:0.7}
boton:active {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.25);
}
</style>
<script>
var file,
render;
document.getElementById("upload_button").addEventListener("click", function(){
document.getElementById("background_input").click();
}, false);
document.getElementById("background_input").addEventListener("change", function(ev){
file = ev.target.files[0];
if(!file.type.match("image.*")) {
alert("This file isn't image or it's unsupported format");
return;
}
reader = new FileReader();
reader.addEventListener("load", (function(theFile) {
return function(e) {
document.body.style.backgroundImage = "url('" + e.target.result + "')";
};
})(file), false);
reader.readAsDataURL(file);
}, false);
</script>
En otros tres articulos ( 1 , 2 , 3 ) ya os mostre otros widgets en los que los visitantes podian cambiar los colores o texturas del fondo del blog a su antojo. Pues por si no teniamos bastante, aqui os presento lo ultimo de lo ultimo. Este widget diseñado por mua, permitira a los usuarios de vuestro blog cambiar el fondo, simplemente haciendo click en el boton 'Subir Imagen'. Si, como lo estais leyendo, cualquier visitante podra subir la imagen que quiera desde su ordenador y establecerla como fondo del blog. No importa el tamaño que tenga, esta se expandira automaticamente. Sin duda, un elemento curioso que sorprendera y entretendra a mas de un@.
