Mix up the images to show on the homepage background

Is there a way to change the background images on each visit to a homepage? The current background image is controlled in the CSS, not HTML, so any assistance would be greatly appreciated.

Refer to the CSS code for the current single background image:

 header .container-fluid
 {
 background-image: url("../../images/The Connection at St-Martin-in-the- 
 Fields/Carousel image - med res The Connection -1067838.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 height: 100vh;
 padding-top: 36px;
 }
jqueryhtmlcssimagebackground-image

Answer №1

If you want to dynamically change the image on your page when it loads, simply incorporate a bit of JavaScript like this:

// List of images to choose from
var images = ['beach.jpg', 'mountain.jpg'];

// Locate the element where the background image should be updated
var targetElement = document.querySelector('section .main-content');

// Generate a random index to select an image from the list
var selectedIndex = Math.floor(Math.random() * images.length);

// Update the background image using JavaScript
targetElement.style.backgroundImage = 'url(' + images[selectedIndex] + ')';

By utilizing JavaScript to set the background image, it will take precedence over any CSS styling, ensuring that the image defined by JavaScript is displayed.

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

Creating an animated background slide presentation

After creating a button group, I wanted the background of the previous or next button to move/slide to the selected one when the user clicks on it. I achieved this effect using pure CSS and simply adding or removing the 'active' class with jQuery ...

javascriptjqueryhtmlcss

buttons for displaying a slideshow using jquery

I've been struggling with a problem for a while and I'm trying to find a solution. Here's the link to my slideshow: http://jsfiddle.net/Jtec5/33/ Here are the CSS codes: #slideshow { margin: 50px auto; position: relative; width: ...

jquerycssslideshow

Current target in Internet Explorer 10 with Javascript

Encountering a problem with event.currentTarget in IE 10. Two divs are present on the website. The first div contains an image that takes up the entire screen, while the second div is smaller and positioned over the first div. The smaller div has no conte ...

javascripthtmlinternet-explorer-10target

Receiving the container's inherited height from its parent

After retrieving a dynamic number of elements from a database, I populate them into a list. Below the list, there is a container that should fill up the remaining height of its parent container. In the code snippet below, you can see my current layout. T ...

htmlcss

The Bootstrap 4 dropdown seems to have a one-time use limit

I'm currently working on a dropdown menu using Bootstrap 4. The dropdown menu is functional, but I'm facing an issue where it only toggles once. I have tried various solutions recommended on different websites, but none of them seem to work. Belo ...

htmljquerycssbootstrap-4responsive-design

Is it possible to create a pure CSS responsive square that is positioned to the top right of a div element of any size?

My current goal is to achieve the following task... I aim to position a square perfectly in one or both corners of the top right section of a div, ensuring it never exceeds the boundaries regardless of the div's size or dimensions that necessitate th ...

htmlcssgradient

Which is the better option for setting a title: using .prop or .attr?

I came across a comment that mentioned The suggestion was to utilize the .prop() method instead of .attr() when setting the "title" property in jQuery versions 1.6 or newer. Could someone provide an explanation for this recommendation? ...

javascriptjquery

Learning to retrieve specific properties from an event target in JavaScript

Here is the code snippet I am working with: <h1 msgId = "someId"> Some text </h1> And in my code.js file, I have the following function: document.addEventListener('click', function(e) { target = e.target; }, false); I am tryin ...

javascripthtml

Using jQuery to create a seamless scrolling experience to both the top of a page and to

I've been looking for solutions on how to add both jQuery scroll to top and scroll to anchors, but haven't found any integrated options. Is it possible to achieve this here? We currently have a jQuery function in place to add a scroll-to-top fea ...

javascriptjquerysmooth-scrolling

Leveraging Ajax for executing a PHP function

Hello, I am currently working on creating a button that will trigger a PHP function to add products to Shopify directly from a web application. As of now, my result.php file is successfully displaying Amazon products. You can view the code here: In this ...

javascriptphpjqueryajax

Confused as to why typed.js is not functioning as expected

I'm having trouble figuring out why this feature isn't working properly. With Typed.js, it's supposed to animate text as if it was being typed out. For example, I expect to see: I found... hope/family. Here are the important script elements ...

jqueryanimation

Having trouble finding the element for an image of a body part using xpath

When using driver.findElement(By.xpath(".//*[@id='bodyPartContainer']/div[1]")).click(); to select a part of the human body image, I'm encountering the following exception in webdriver: org.openqa.selenium.NoSuchElementException: no such ...

jqueryhtmlcssseleniumxpath

New space is formed as the input box gains focus on the signin field

I'm currently working on a sign-in page and implementing JQuery. Everything seems to be functioning properly except for a minor issue. The problem is that when the password field gains focus, it creates extra space in IE 8 and later versions only. Th ...

javascriptjqueryhtmlcssinternet-explorer-8

Flexbox styling using BootStrap's row class is a dynamic and versatile

Is there a way to create space between the four divs in the image below? https://i.sstatic.net/xHzbF.png As shown in the image, there are four divs aligned next to each other. The code for each individual div is: <div class="col-lg-3 col-md-4 co ...

htmlcssbootstrap-5

The buttons are off-center on the page when the screen width is below 1199px, they should be centered instead of aligned to the

Using Bootstrap 5, I've successfully created a layout with aligned rows of buttons at 1200px and above. However, an issue arises at the XL breakpoint (1199px) where the buttons align to the left of the container instead of being centered. You can vie ...

htmlcsstwitter-bootstrapbootstrap-5

Strategies for unbinding jQuery events that have been added following an ajax request

Is there a way to clear the dynamically registered events after an Ajax load? In my web application, when a user clicks a button, a pop-up form is launched using FancyBox: $('.launchPopUp').click(function(){ var url = 'something'; ...

jqueryajax

Best practices for invoking Javascript to determine the scrollHeight of an element

Currently, I'm facing an issue with a page that contains an iframe. The parent site is built using php and the child site is in asp.net 2.0, both residing on separate domains that I manage. Most of the functionality relies on actions within the iframe ...

javascripthtmlasp.netiframepostmessage

Is there a way to ensure that all items have the same height and designate the column they belong to using

I'm working with 2 columns and I want to indicate which column items belong to, while also ensuring that they have the same height. Here's what I currently have: https://codepen.io/anon/pen/KyGewd * { box-sizing: border-box; } .cont { ma ...

css

Is there a way to utilize JQuery to identify and update the contents of a specific element?

My current structure is as follows: <div class="button"> <a href="/" target="_blank" class="test">Photos</a> </div> How can I use JQuery to select .button and remove the target="_blank" attribute from the html? I managed to reac ...

javascriptjquerycss

I am in need of the edit/add data from jqGrid in x-www-form-urlencoded format, but I actually require it in application

Currently, I am working on integrating my jqGrid with a Java Rest service. Whenever I send the edit or add data from jqGrid to my rest service for further processing related to Database CRUD operations, it gets received in this format: "nume=Alin&pren ...

javajqueryjsonjqgrid