Buenas!
Estoy elaborando una página web para un proyecto personal, y tengo dificultades cuando quiero añadir una función nueva.
La página es sencillamente una tabla con dos celdas y un div en cada una de ellas. El de la izquierda es el menu y el de la derecha la información. En el susodicho div, intento que la imagen de fondo cambie cada vez que entro, eligiendo aletoriamente entre los 10 fondos que tengo.
El HTML.
<html>
<head>
<title>Prj</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="scripts/rd_background.js"></script>
<table border="0" class="master">
<tbody>
<td class="left">
<div class="dleft">
<table border="0" class="slave">
<tbody>
<tr>
<td><img src="images/logo-white.png" alt="PIOCAM 2018" style="width:135px;height:130px;" class="logo"></img></td>
</tr>
<tr>
<td class="tdmenu"></td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="right">
<div class="dright" id="jsBg" >
<script type="text/javascript">randBg();</script>
</div>
</td>
</tbody>
</table>
</body>
El CSS (sólo enseño el CSS con el cual JavaScript interactúa, el resto no tiene que ver con la funcionalidad.).
div.dright {
border-radius: 8px;
margin: 2em 2em 2em 2em;
background: url("images/bg/3.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
opacity: 0.5;
height: 91vh;
}
Y el JavaScript.
var bgCount = 10;
function randBg() {
var num = Math.ceil( Math.random() * bgCount );
document.getElementById('jsBg').style.background = 'url("images/bg/"+num+".jpg")';
}
He analizado todo el código en base a mis conocimientos, he buscado en google y sigo sin entender el problema.
Si alguien es tan amable de decirme por qué la imagen no se cambia aleatoriamente y corregirme el fallo, se lo agradezco. Gracias de antemano.
(Update) Problema solucionado, pero no del todo.
La causa del problema residía en el código del javascript:
Antes.
'url("images/bg/"+num+".jpg")';
Después.
'url("images/bg/'+num+'.jpg")';
Un simple error de comillas. Ahora la solución ha generado un problema: la imagen no respeta background-size: cover; background-repeat: no-repeat;, ni background-position: center;. La imagen se posiciona automáticamente sin respetar esas líneas de CSS.