Search code examples
javascripthtmlbackgroundfixed

How do I make my background fixed in this code?


How do I make my background fixed, so it will not scroll, in this particular code?

I already tried body.setAttribute("backgroundAttachment", "fixed");, but it didn't work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script>
<!-- Activate cloaking device
var randnum = Math.random();
var inum = 5;
// Change this number to the number of images you are using.
var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] = "bf1.jpg"
images[2] = "fifa17.jpg"
images[3] = "rocketleague.jpg"
images[4] = "civ6.jpg"
images[5] = "infinitewarfare.png"
// Ensure you have an array item for every image you are using.
var image = images[rand1]
// Deactivate cloaking device -->
</script>  
</head>

<body>
<script>
<!-- Activate cloaking device
//document.write('<body background="' + image + '" text="white">');document.body.style.backgroundAttachment = "fixed"; 
var body=document.querySelector("body");
body.setAttribute("background", image);
body.setAttribute("text", "white");
body.setAttribute("backgroundAttachment", "fixed");
// Deactivate cloaking device -->
</script>
<img src="RANDOM-IMAGE-TO-MAKE-IT-POSSIBLE-TO-SCROLL.png" style="position:absolute; opacity:0.5; TOP:122px; LEFT:140px; width: 1000px; height: 1400px; object-fit: cover;" align="middle">
</body>
</html>


Solution

  • Final answer by Igor

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script>
    var images=["bf1.jpg","fifa17.jpg","rocketleague.jpg","civ6.jpg","infinitewarfare.png"];
    function getRandomArbitrary(min, max){return Math.floor(Math.random() * (max - min) + min)}
    </script>
    </head><body>
    123
    <script>
    document.body.setAttribute("style", "background-image: url("+ images[getRandomArbitrary(0,5)] +"); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size: cover;  width: ; display: ;   color: red;")/*from 0 to 4*/;
    </script>
    </body></html>