Load a variety of tiles to create a unique style and background for the

Currently, I am using this function to randomly retrieve an image.

<script>
window.onload = choosePic;
var myPix = new Array(
"https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif",
"https://ptgmedia.pearsoncmg.com/images/chap4_9780321996701/elementLinks/04fig15.jpg");
function choosePic() {
     var randomNum = Math.floor(Math.random() * myPix.length);
     document.getElementById("myPicture").src = myPix[randomNum];}
</script>

<style> body {background-image: url(myPicture);}</style>

<!--<img src="https://pt" width="305" height="312" id="myPicture">-->

However, it is not loading into the background as part of the CSS.

Answer №1

Understood:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
#custom{
  width: 100%;
  height: 100%;
  //border: 1px solid black;
  background-image: url('');
  //background-position: center center;
  //background-size: cover;
  //background-repeat: no-repeat;}
</style>
<body>
<body onload="changecustombg()"><div id="custom" ></div>  
  <script>
function changecustombg(){
  var random= Math.floor(Math.random() * 6) + 0;
  var customImages = ["url('https://media1.giphy.com/media/l0HlVrqPItQH8D4iI/giphy.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/comments_anim.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/comments_anim.gif')",
                 "url('https://media1.giphy.com/media/l0HlVrqPItQH8D4iI/giphy.gif')"];
  document.getElementById("custom").style.backgroundImage=customImages[random];}</script>

Option #2

<style>
.custom_bg{
    height: 100%;
    width: 100%;
    position: relative;}
</style>
<section><div class="rt-container">
 <div class="col-rt-12">
<div class="Scriptcontent">
 <div class="custom_bg"></div>
</section>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
 <script>function displayBG() {var bgm = ['https://i.ibb.co/9mxH8pL/Castillo.gif',
'https://i.ibb.co/fkK7bK2/Elec-Tower.gif',
'https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif',
'https://i.ibb.co/3C8pd4h/Standart-Comp-EXE3.gif',
'https://i.ibb.co/LJKnfhh/Scilab.gif'];
    $('.custom_bg').css({
        'background' : 'url('+ bgm[Math.floor(Math.random()*3)] + ') repeat',
        'background-position' : '100%',
    'background-size' : 'repeat'});}displayBG();</script>

Option #3

<style type="text/css">
#header {
 height:100%;
 background:transparent url(https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif) repeat cover cover;
}
</style>
<script type="text/javascript"> 
if (document.getElementById) { window.onload = changeHeaderImg };
function changeHeaderImg() {
var numimages=7;
rndimg = new Array("https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/fkK7bK2/Elec-Tower.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/fkK7bK2/Elec-Tower.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif"); 
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("header").style.backgroundImage = "url("+ randomimage +")"; 
}
</script>
</head>
<body >
<div id="header"></div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Event handler for the MouseLeave event is not successfully triggering when dealing with anchor

When viewing a link to a Codepen, the issue is most noticeable in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event fails to trigger when a user quickly moves the cursor over multiple images, resulting in some images reta ...

"Escape the confines of traditional div sections with the dynamic features of

In the beginning, I have arranged two rows of three divs on my webpage, which is how I intend to use them later. However, when testing the 'mobile view', the divs in the section overflow and move into the next part below the section. This causes ...

Mastering Angular 4: The ultimate guide to managing multiple classes using ngClass

I want to customize my navigation links to resemble file folder tabs by dynamically adding and removing classes using Angular. When a link is active, it should not have a bottom border to indicate it as the primary tab. Here's a rough starting point: ...

Unique Text: "Personalized marker/pin for interactive map feature"

Looking to create a custom image map marker/pin with a unique bottom design resembling a union shape using CSS and Vue.js. I've attempted it myself but haven't been able to achieve the exact look as shown in the reference image. Any advice or ass ...

What is the best way to make sure that only one tab changes color when clicked?

I have been working on a function that changes the color of a tab to gold when clicked, which is working fine. However, I also want to toggle the active property of each tab so that it displays a nice white outline. The problem I'm facing is that the ...

How do you trigger the playback of a specific audio file when a user clicks on it?

I'm currently working on an interactive music app that mimics the functionality of a piano. Users are able to click on different boxes on the screen, triggering a unique musical note to play. While I initially considered manually collecting all the I ...

Guide on adding a parent class to style all generated CSS rules in styled-components 5.3.5

When my application loads into a parent div with a specific class (for example, .my-app), is there a way to add the prefix .my-app to all classes generated by styled-components? For instance, consider a component like this: import React from 'react& ...

What happens if I define both the left and right properties for spans?

This is a class for span with the CSS properties position:absolute; top:0px; left:0px; right:0px; .textStyle1 { font-size:24px; font-family:'Arial'; position:absolute; top:0px; left:0px; right:0px; } #div1 { position:absolute; lef ...

Utilizing a webkit transition to conceal a div element by setting its display property to "none"

I'm currently working with code that looks something like this: <style> #submenu { background-color: #eee; height:200px; width:400px; opacity: 1; -webkit-transition: all 1s ease-in-out; } .doSomething { ...

Steps for integrating a video into the Bootstrap navigation bar

I've been working on a Bootstrap menu design that features text on the left side and a video on the right. My goal is to make the video extend to the top of the page with a button overlaid, similar to the image I have in mind. However, I've encou ...

Sending an image dynamically as a prop to a child component

Within my parent component, I retrieve an object from an API which I later enhance with an image as a key/value pair. Subsequently, I pass this modified object to a child component for rendering. In order to accomplish this, I referred to the following pos ...

What is the best way to showcase just 5 photos while also incorporating a "load more" function with

Is there a way to display only 5 images from a list on the first load, and then show all images when the user clicks on "load more"? Here is the code I have: $('.photos-list').hide(); $('.photos-list').slice(1, 5).show(); $ ...

Unable to view newly added components

I am currently in the process of setting up a website, focusing on arranging and formatting everything on the page before moving on to styling and adding JavaScript. I recently added three div tags after my form to create three separate columns in the ne ...

Adding additional text within the paragraph will result in the images shifting backwards when utilizing flexbox

It seems like there might be something obvious that I'm missing here, but essentially my goal is to create a footer with 2 columns and 2 rows. In each column, there will be an icon (32x32) and 2 lines of text next to it. The issue I'm facing is ...

Tips for adjusting the size of an image in both the vertical and horizontal axes using CSS

As a beginner in HTML, I am currently facing an issue while trying to display a set of pictures. My goal is to resize the pictures based on the current window size while maintaining the aspect ratio. Despite experimenting with various methods like using wi ...

The issue with CSS right alignment not functioning as expected

My attempt to align text to the right using a CSS rule is not working as expected when applied to a font within a cell. Can anyone help me troubleshoot this issue? Take a look at my code snippet below: CSS: .font1 { font-size: 60px; text-align: ...

Generate a vertical line that spans the entire length of the webpage in a vertical direction

Looking for a way to add vertical borders that span the entire webpage to some text? Check out this HTML snippet: <div id="vLine"> <h1>text</h1> </div> Here's the accompanying CSS: #vLine { height: 100%; width: 5 ...

Struggling with aligning and floating links to the right while crafting a custom navigation bar

I'm in the process of crafting a custom navigation bar for my website, with the intention of having my name prominently displayed on the far left while the links float to the far right. I've utilized CSS to style everything within the nav section ...

What is the best way to center my text vertically in each line?

I'm encountering an issue with aligning my text vertically in two lines within a <p> tag. I am trying to position the second line at the bottom of my <div>. I experimented with using vertical-align: bottom and text-bottom along with the to ...

Fade-in effect on one DIV element impacting the values of other div

As a newcomer to jquery and JavaScript, I'm facing some challenges in getting the desired functionality. Currently, I am trying to animate three images simultaneously - one moving downward (iphone), another fading in (shadow), and the third one animat ...