Shake up your background with a random twist

Seeking assistance with customizing the Aerial template from HTML5UP. I am interested in selecting a scrolling background randomly from a pool of images. Can someone guide me on how to achieve this?

Presently, the background is defined within a code block like so:

#bg {
    background: #348cb2 url("images/bg.jpg") bottom left;
    background-repeat: repeat-x;
    }

I came across a similar query on StackOverflow, but need help implementing it. Check out random fullscreen background image on browser refresh.

javascriptjquerycss

Answer №1

$(document).ready(function(){
var pictures=['https://example.imgix.com/photo-1234567890-qwertyuiop?size=large', 'https://example.imgix.com/photo-0987654321-asdfghjkl?size=medium'];
var randomIndex = Math.floor(Math.random() * pictures.length);
var bgImage = 'url(' + pictures[randomIndex] + ')';

$('#bg').css({'background':bgImage});

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

What is the best way to display the next and restart buttons at the bottom of every question?

How can I display the next and restart buttons at the bottom of each question in my JavaScript quiz web app? Why is the user unable to choose the wrong answer from the provided options? I'm facing difficulty showing the next and restart buttons for i ...

javascript

What is another option for toggling in jQuery?

After deprecating the toggle method, I found a new way to toggle div: $("#syndicates_showmore").on("click", function () { if (!clicked) { $('#syndicates').fadeTo('slow', 0.3, function () { $(this).css( ...

javascriptjquery

Jquery's mouseclick event selects an excessive number of elements

Is there a way to retrieve the ID of an element when it is clicked, only if it has one? I currently have this code set up to alert me with the element's ID: $("[id]").click(function(event) { event.preventDefault(); var id_name = $(this).attr ...

javascriptjqueryhtmlcssclick

Access environmental variables within Next.js middleware

Within my nextjs project, I have declared variables in both the .env and next.conf.js files. The code snippet from the next.conf.js file looks like this: module.exports = { env: { NEXT_PUBLIC_JWT_SECRET: "...", }, publicRuntimeConfig: { ...

javascriptreactjsnext.jsenvironment-variables

Avoid creating a line break directly after the header, however allow for a line break

I find myself in a scenario where I require a paragraph that has a specific format: An Emphasized Title Some relevant information regarding the subject... I am looking to insert a new line before the title, ensuring it seamlessly integrates with the re ...

htmlcssheaderjekyll

What is the process for deselecting text from a text field?

After performing a search and displaying the results on my search form, I've noticed that the text query in the textfield is being marked as selected text even though I don't want it to be. How can I prevent this? Fiddle 1) What is the best app ...

javascriptcsshtml

A guide on integrating the MUI Timepicker with the newest 6 version using Formik

I am currently experimenting with the MUI React Timepicker component and facing an issue during integration with Formik for validation. The problem lies in the inability to bind values properly in the initialValues of the form. const [initialValues, setI ...

javascriptreactjsvalidationmaterial-uiformik

Display information in a paginated format using components

As a newcomer to React, I may use the wrong terms so please bear with me. I am attempting to implement pagination for an array of components. To achieve this, I have divided the array into pages based on the desired number of items per page and stored eac ...

javascriptreactjs

Animations in jQuery become glitchy on Internet Explorer versions 8 and below

Check out my website: The functionality is smooth on firefox, chrome, and safari as well as ie9, but encounters issues in IE8 and 7. Upon clicking an image, it enlarges while collapsing any other expanded images. The problem seems to lie with the jQuery ...

jqueryinternet-explorer

How can a React app be developed offline?

I am currently working offline with no access to the internet. Node.js is already installed on my system, but I encountered an error when trying to run the command npm create-react-app. Is there a way for me to execute npm commands and set up a react app ...

javascriptnode.jsreactjsnpmnode-modules

Tips for specifying the "url" parameter in xmlhttp.open() for utilizing Ajax in communication with node.js

server.js has the ability to generate a random number. I am trying to retrieve a random number from the server and utilize xmlhttp to send a request. However, the string value remains unchanged when I visit http://localhost:3000/index.html. What could be c ...

javascriptjqueryajaxnode.js

Using Javascript in .NET to restrict the number of characters allowed in a textbox during typing and pasting

Consider this situation: I am attempting to display the indication "XY characters left" and restrict characters in a textbox as the user types. However, since I also have multiline textboxes, MaxLength doesn't always suffice (don't worry, I vali ...

javascriptjqueryasp.netcopy-pastetyping

Choose all or none of the items from the list with a single click - v-list-item-group

I am interested in incorporating Vuetify's v-list-item-group component into my Vue application. This list is intended to represent nodes that are related to a graph, allowing users to select none, some, or all of them and delete the selected nodes. T ...

javascriptvue.jsvuetify.js

Is it possible for the controller of a modal window to have access to functions within the parent controller

If you were to launch a modal window using $modal.open from an angular directive, would the modal window be able to access functions defined within the parent directive? Below is the code for the directive controller: function parentFunction() { re ...

javascriptangularjsangular-bootstrap

Upcoming verification with JSON Web Token

I am looking to incorporate JWT auth into my Next app. Currently, I have mapped out the flow as such: User enters email and password to log in Server responds with status 200 and a jwt access token in httpOnly cookies My main dilemma lies in deciding on ...

javascriptauthenticationnext.jsserver-side-renderingnext.js13

Issues with Braintree webhooks and CSRF protection causing malfunction

I have successfully set up recurring payments with Braintree and everything is functioning properly. Below is an example of my code: app.post("/create_customer", function (req, res) { var customerRequest = { firstName: req.body.first_name, lastN ...

javascriptnode.jsexpresscsrfbraintree

Tips for concurrently and asynchronously executing multiple AJAX requests

I am working with a javascript object named Agendamento which includes the following key parts: const Agendamento = { // ... storeResultados: async function (consulta) { //... $.ajax({ type: 'POST', ...

javascriptjqueryajaxasynchronous

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...

htmlcssflexbox

Ways to adjust brightness of a color using jquery

I have implemented color swatches and a slider to adjust the lightness and darkness of colors. I am seeking a way to change the lightness of the color based on the slider value. Here is what I have attempted: $("#darklight").slider({ range: "min", ...

javascriptjqueryhsl

Retrieve the Date information and transfer it to another page using a combination of jQuery, JavaScript, and PHP

I feel defeated trying to solve this problem. Can anyone offer assistance in figuring this out? I've spent an entire day debugging with no success. I have two PHP files, index.php and home.php. In the index.php file, I include the Date range picker, ...

javascriptphpjquery