JSFiddle - React, Tailwind, and code Playground

by didacticode

HTML

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Fondo meses</title>
        <link href="style.css" rel="stylesheet" type="text/css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Fondo meses</h1>
    </body> 
</html>

CSS

body.enero {
  background-image: linear-gradient(rgba(13, 155, 215, 0.9), rgba(13, 155, 215, 0.9)), url("01-fondos-calendario-enero.jpg");
}

body.febrero {
  background-image: linear-gradient(rgba(10, 117, 163, 0.9), rgba(10, 117, 163, 0.9)), url("02-fondos-calendario-febrero.jpg");
}

body.marzo {
  background-image: linear-gradient(rgba(66, 175, 178, 0.9), rgba(66, 175, 178, 0.9)), url("03-fondos-calendario-marzo.jpg");
}

body.abril {
  background-image: linear-gradient(rgba(52, 154, 150, 0.9), rgba(52, 154, 150, 0.9)), url("04-fondos-calendario-abril.jpg");
}

body.mayo {
  background-image: linear-gradient(rgba(51, 176, 136, 0.9), rgba(51, 176, 136, 0.9)), url("05-fondos-calendario-mayo.jpg");
}

body.junio {
  background-image: linear-gradient(rgba(242, 213, 22, 0.9), rgba(242, 213, 22, 0.9)), url("06-fondos-calendario-junio.jpg");
}

body.julio {
  background-image: linear-gradient(rgba(229, 163, 31, 0.9), rgba(229, 163, 31, 0.9)), url("07-fondos-calendario-julio.jpg");
}

body.agosto {
  background-image: linear-gradient(rgba(252, 151, 23, 0.9), rgba(252, 151, 23, 0.9)), url("08-fondos-calendario-agosto.jpg");
}

body.septiembre {
  background-image: linear-gradient(rgba(175, 130, 82, 0.9), rgba(175, 130, 82, 0.9)), url("09-fondos-calendario-septiembre.jpg");
}

body.octubre {
  background-image: linear-gradient(rgba(99, 69, 37, 0.9), rgba(99, 69, 37, 0.9)), url("10-fondos-calendario-octubre.jpg");
}

body.noviembre {
  background-image: linear-gradient(rgba(252, 200, 144, 0.9), rgba(252, 200, 144, 0.9)), url("11-fondos-calendario-noviembre.jpg");
}

body.diciembre {
  background-image: linear-gradient(rgba(83, 151, 176, 0.9), rgba(83, 151, 176, 0.9)), url("12-fondos-calendario-diciembre.jpg");
}

JavaScript

/*jQuery(function($){
	"use strict";
	console.log("Ejecutándose script-lauras.js");
	fondoMeses(); //Aplica el fondo al calendario en función del mes que muestra
}*/

window.addEventListener("load", cambiarMes);

//Función que transforma un número al nombre del mes para aplicar estilo CSS en función de la fecha actual
function numAMes(numero){
	switch(parseInt(numero)){
		case 1: return "enero";
		case 2: return "febrero";
		case 3: return "marzo";
		case 4: return "abril";
		case 5: return "mayo";
		case 6: return "junio";
		case 7: return "julio";
		case 8: return "agosto";
		case 9: return "septiembre";
		case 10: return "octubre";
		case 11: return "noviembre";
		case 12: return "diciembre";
	}
}

function cambiarMes(){
	let fechaHoy = new Date();
	document.getElementsByTagName("body")[0].classList.add(numAMes(fechaHoy.getMonth()+1));
	//jQuery("body").addClass(numAMes(fechaHoy.getMonth()+1));
}