Fading away backdrop images for the header

I've created a header class in my CSS with the following styling-

header {
    background-image: url('../img/header-bg.jpg');
    background-repeat: none;
    background-attachment: scroll;
    background-position: center center;
    .background-cover;
    text-align: center;
    color: white;
    .intro-text {
        padding-top: 100px;
        padding-bottom: 50px;
        .intro-lead-in {
            .serif-font;
            font-style: italic;
            font-size: 22px;
            line-height: 22px;
            margin-bottom: 25px;
        }
        .intro-heading {
            .heading-font;
            font-weight: 700;
            font-size: 50px;
            line-height: 50px;
            margin-bottom: 25px;
        }
    }
}

My goal now is to change the background image every 10 seconds with a different image file named 'abc.jpg'. Most online solutions involve adding two <img> tags to the HTML and using jQuery for the transition. However, I have specified the image in the CSS for the header and there are no <img> tags in my HTML. Is there a way to achieve this transition without modifying the HTML by manipulating the CSS file with jQuery or JavaScript to change the background-image URL of the header class every 10 seconds?

javascriptjqueryhtmlcss

Answer №1

Below is the solution you've been searching for:

<html>
<head>
<style type="text/css">
    .b1 { background-image: url("img1.jpg"); height:100%;width:100% }
    .b2 { background-image: url("img2.jpg"); height:100%;width:100% }
</style>
<script type="text/javascript">//<![CDATA[
    window.onload=function(){
    function run(interval, frames) {
        var int = 1;
        function func() {
            document.getElementById("mydiv").setAttribute("class", "b"+int);
            int++;
            if(int === frames) { int = 1; }
        }
        var swap = window.setInterval(func, interval);
    }
    run(1000, 3); //milliseconds, frames
    }//]]> 

</script>
</head>
<body>
<header id="mydiv">
 This div will automatically change its background image
</header>
</body>
</html>

Answer №2

Transform your HTML structure in the following manner

<section id="update-background" style="background-image: url('../img/new-bg.jpg');"></section>

You now possess a customizable style attribute, with a single guideline in place while keeping other styles externalized.

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

Deciphering unknown data for tabling using AJAX and jQuery

I am currently utilizing an API to retrieve a response. Within the ajax success function, I receive a response structured like this: { "Capabilities": { "System": { "SystemLogging": "true", "SystemBackup": "true", ... "DHCPv6 ...

jqueryhtmljson

What is preventing me from adjusting the height of this DIV element?

I'm completely stumped by what's happening here. I've been trying to increase the height of a DIV element with an id of #titleStrip, but it just won't budge. It's beyond frustrating. I thought I knew my way around this kind of thin ...

htmlcss

Exploring the functionality of componentWillReceiveProps within functional components

Embarking on my journey with functional components after extensively working with class components. While experimenting, I encountered a challenge: how can I incorporate the functionality of componentWillReceiveProps within the context of the useEffect h ...

javascriptreactjsreact-reduxreact-hooks

Tips for preventing useEffect from triggering a route?

Recently delving into reactjs, I stumbled upon a situation in the code where the route alerts messages twice. I'm seeking advice on how to prevent this issue, please disregard the redux code involved. Any suggestions? Index.js import React from &apos ...

javascriptreactjs

Tips for continuously randomizing colors in p5.js

I recently began exploring p5.js and I have a query regarding color randomization. Currently, it seems that the color only changes randomly when I restart the code. Is there a way to trigger this randomization every time the mouse is clicked? Below is the ...

javascriptprocessingp5.js

Changing the background color of a PHP input based on the webpage being viewed - here's how!

I'm in the process of creating a website where each page will have its own unique background color. Additionally, I am using a PHP input for both the header and footer sections, which need to change their background colors based on the specific webpa ...

javascriptphphtmlcssbackground-color

Function to save prices as cent-based figures in Javascript using Regex

Trying to extract prices from a string using regex can be tricky, as unexpected issues may arise. For example, obtaining the following values: US$1234.56 $12 $12.34usd $0.56 .56 dollars and converting them to: 123456 1200 1234 56 56 is necessary for s ...

javascriptregex

Is there a way to arrange my bootstrap navigation tabs vertically on my mobile device?

I have a group of five bootstrap navigation tabs that are evenly spaced and visually appealing on desktop screens. However, when viewed on a mobile device, the text within the tabs becomes cramped together. How can I make the tabs stack vertically on mobil ...

htmlcsstwitter-bootstrap

What is the best method for sending form data, specifically uploaded images, in Python Bottle with Ajax?

This form belongs to me <form method='post' enctype='multipart/form-data' id='uploadForm' name='formn'> <input type='file' value='' name='newfile'> <input type=&a ...

javascriptpythonajax

issues with alignment between bootstrap div and canvas

I am currently working on a project with a canvas inside a div using three.js. My goal is to display a purple bar for user settings on the right side of the three.js window. However, I am encountering an issue where Bootstrap is not recognizing that I want ...

htmlcssangularbootstrap-4three.js

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

As per the information from the Mozilla documentation, it states that I can align the text in an input field to the baseline if the element's display property is set to inline-block. I have made adjustments to the height of several input elements, bu ...

htmlcss

In the modal, update the text and apply the "active" class to a different list item when it is clicked

Let's talk about my menu that includes various categories: <div class="col p-0 m-0"> <ul class="Categories__Menu"> @foreach($categories->take(6) as $category) <li class="active"> <a href ...

jquery

Rotate through different image sources using jQuery in a circular pattern

I'm working on a project where I have 3 img tags in my HTML file. My goal is to change the src of all 3 images with a button click, using an array that stores 9 different image src links. When the page initially loads, it should display the first set ...

javascripthtmljqueryarraysonclick

Looking to retrieve the <td> element using the class name?

When a specific condition is met in the class name, I want to apply styles to an entire row. The table structure I am working with is as follows: <table> <tbody> <tr> <td><div><span class='level2'></span&g ...

htmlhtml-table

How come my MySQL date is decreasing by one day when using JavaScript?

My todo list is stored in a MySQL database with columns for todoTitle and todoDate. However, when I display the todoDate on my website, it shows the date decremented by one day. For example, if the date in the database is 2016-12-20, it will show as 2016-1 ...

javascripthtmlmysqlnode.jsdate

Is using canvas the best option for creating simple image animations with JavaScript?

I am currently working on a basic animation project using JavaScript. This animation involves switching between 13 different images per second to create movement. I have created two simple methods for implementing this animation. The first method involves ...

javascriptcsshtml

JavaScript influences CSS in EasySlider 1.7, creating a harmonious relationship between the

Struggling to achieve a captivating overlay effect with a slider using EasySlider 1.7, incorporating both images and corresponding text. However, encountering difficulties in aligning the text correctly on the page. The black overlay visible on the main s ...

jqueryhtmlcsseasyslider

Example using three.js showing issues with external resources failing to load on jsfiddle.net

Currently, I am endeavoring to make progress with this sample project: github.com/josdirksen/learning-threejs/blob/master/chapter-09/07-first-person-camera.html I have made attempts at replicating the code on my personal pages.github.io account and also m ...

javascripthtmldomthree.js

Keeping content in the middle of the page

When working with a div tag, I encountered a challenge. <div id="length"></div> My goal is to center the contents of the div while also decreasing its width to hold a number. #length{ background:black; color:white; border:3px solid gr ...

htmlcss

The setInterval() function within a jQuery dialog continues running even after being destroyed or removed

I'm facing an issue with a jQuery dialog that loads an external page and runs a setInterval() function querying the server continuously every second via AJAX. The problem arises when I close the dialog, as the setInterval keeps running. Below is the ...

javascriptjqueryajaxjquery-ui