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

Execute multiple JavaScript files dynamically by utilizing the same npm run command

My directory structure: app Model user.js post.js Contents of my package.json file: "scripts": { "migrate": "node ./app/Model/" } I am looking to execute JavaScript files via command line in a dynamic manner. For example: npm run migr ...

javascriptnode.jsexpressnpm

How require works in Node.js

My current database connection module looks like this: var mongodb = require("mongodb"); var client = mongodb.MongoClient; client.connect('mongodb://host:port/dbname', { auto_reconnect: true }, function(err, db) { if (err) { ...

javascriptnode.jsmongodbexpress

Whenever I try to import a directory that contains modules, Webpack encounters an error

I am currently in the process of developing a small npm library to streamline API interaction. Here is an overview of my folder structure... dist/ index.js src/ index.js endpoints/ endpoint1.js package.json webpack.config.js Inside my src/index ...

javascriptnpmwebpackbabeljs

What is the best way to convert this JavaScript iteration function into jQuery?

I recently encountered an issue with my JavaScript function that returns a list of elements with the class ".youtube", loops through them, and calls another function. The JavaScript logic is flawless, but I wanted to convert it into jQuery for better reada ...

javascriptjqueryhtmlcss

Identical IDs appearing in multiple buttons causing a conflict

I am currently loading content from external HTML files, specifically page1.html and page2.html. Although everything is the same except for the pictures and text, I am encountering an issue with the close button. It only closes page1.html.Feel free to chec ...

javascriptjquerythisconflict

Activate and deactivate button

I've tried multiple examples on this site for enabling and disabling a button using javascript with jquery, but none of them seem to work for me. Here is my current dilemma: <asp:TextBox ID="mytext" runat="server" onkeyup="enableButton(this, 3)"/ ...

javascriptjqueryasp.netbutton

The Express server's `GET` request at the root does not seem

When I access localhost:8080/chat?k=1&d=1, the console displays "CHAT PAGE" and everything works correctly. However, when I try to visit localhost:8080, the root event does not display "INDEX PAGE" as expected. Instead, it automatically retrieves ind ...

javascriptnode.jshttpexpressurl-routing

The dropdown menu component in ReactJS is malfunctioning

I'm currently working on a form that includes a select box which fetches data from the server and posts it back to the same server. I have implemented the select box component from ant design. Unfortunately, I've encountered an issue with the ha ...

javascriptajaxreactjs

AngularJS: Issue with JQuery Slider not Updating Scope Value

I am currently working on a project using AngularJS and I have integrated a jQuery slider into it. However, I am facing an issue where I need to change the value of a select box which is defined in a $scope array, but the functionality is not working as ex ...

javascriptjqueryhtmlangularjs

Angular's Material Design Autocomplete feature with remote data sourcing and how its performance compares to the most effective methods

In my current project, I am utilizing an Angular material autocomplete feature that fetches data via AJAX. I am facing a dilemma trying to determine the most efficient approach. Below is a snippet of my code: $scope.loadOrganizations = function () { ...

javascriptangularjsajaxautocompleteangular-material

Error loading content for webpack://SwaggerUIBundle/src/core/system.js in Swagger UI

When trying to utilize Swagger UI for documenting a Laravel project using the URL http://localhost:8014/api/documentation, I came across an error displayed in the browser console: Error: Unable to destructure property 'type' of 'u' as i ...

javascriptlaravelwebpackswaggerswagger-ui

Manually adjust rotation in Three.js by clicking

I am looking to initiate an animated rotation of an object by clicking a button. I have a basic understanding that the render function operates as an infinite loop and that adding 0.1 to cylinder.rotation.x continuously rotates the object. My goal is to ...

javascriptthree.jsrotation

Discover the hyperlink and submit it via the form to the designated email address

Is it possible to create a basic HTML form that captures name and email details, then uses jQuery to locate a specific link on the page and includes this link along with the form information in a submission to a web server? From there, a script could send ...

jqueryajaxjsonforms

`Trick Ajax into displaying 200 status code even on error responses`

Is it possible to suppress exceptions in the console by manually setting the status code to 200 for all errors? For example, can I change a 500 internal server error response to 200? Although I understand that hard-coding status codes is generally conside ...

jqueryajax

Challenges arise when using Bootstrap 4 for country selection

There have been reports that bootstrap 4 country select is not functioning properly. In an effort to troubleshoot, I delved into the documentation to find a solution. To make bootstrap-select compatible with bootstrap 4, refer to: Bootstrap 4 beta-2 ...

javascripthtmljquerycssbootstrap-4

Manipulate SVG elements by dragging them along the boundary of the path

Looking to achieve a specific functionality where I can drag and drop an element along the edges of a drawn path, rather than inside the path itself. To clarify, the goal is to move the red marked element on the black line bordering the path, allowing move ...

javascriptjquerysvg

Automatically select all options in MUI Autocomplete by default

Is there a way to have all the values in the autocomplete drop down automatically selected by default when the page loads? I've been experimenting with this example but haven't found a solution yet. If you know how to achieve this, please share! ...

javascriptreactjsmaterial-ui

Is it possible to modify the contents within the JSP div tag without replacing them through an AJAX call?

In my JSP, I face a scenario where there is a div tag with scriptlet content that pulls data from the database every time a request is received from the server. Previously, I was refreshing the entire page with each update, which not only loaded all the re ...

javascriptjqueryajaxjspscriptlet

Issue with ExpressJS Regex not correctly matching a path

I'm currently struggling with a simple regex that is supposed to match words consisting of letters (0-5) only, but for some reason it's not working as expected. Can anyone help me figure out the correct expression and how to implement it in Expre ...

javascriptregexnode.jsexpress

What could be causing jQuery to overlook dynamically loaded jQuery Mobile buttons?

While working with a web page that uses jQuery Mobile, I utilized Ajax to load the following HTML content. The key detail is the presence of the onButton class attached to the anchor tag. <a class="onButton ui-btn ui-btn-inline ui-btn-corner-all ui-sha ...

jqueryajaxjquery-mobile