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

VueJS form validation does not account for empty inputs in both fields

One of the challenges I'm facing is generating a form with Vue.js using the input fields below: { name: 'first_name', type: 'text', label: 'First Name', placeholder: 'First Name', ...

javascriptvue.jsconditional-statements

Positioning elements in CSS using percentages allows for flexible and responsive

I am new to web design and I am trying to create a webpage similar to the one shown in this image. However, I want to set the height and width of the divs using percentage values instead of pixels. Whenever I attempt this, the boxes end up overlapping or ...

htmlcsscss-position

Looking for assistance in setting up a personalized slideshow to automatically play on its

Recently, I have taken responsibility for a project that was initiated by someone else. The website contains a customized slideshow on its homepage. To meet the client's requirements, I have already made some alterations to the appearance and feel of ...

javascriptjquery

Transforming an HTML document into a C# string representation

I need help creating a basic HTML file and then dynamically loading it as a string in C#. I attempted using File.Open, but the file is located separately from the binary code. Is there an easy way to instruct the build process to load it into a string? ...

c#asp.nethtml

Aligning table elements for optimal responsiveness

Need a hand with my HTML email code. I'm struggling to center the "resort boxes" when viewed on smaller screens like phones. Tried everything but can't crack it. Appreciate any help! <html> <head> <meta content="text/html; c ...

htmlcsshtml-email

A guide on showing POST values from javascript XMLHttpRequest() in php

I have encountered an issue where I am using the XMLHttpRequest() javascript function to send parameters in Json format to another php page, but for some reason $_POST['appoverGUID'] is not receiving the posted values. Below is my Javascript cod ...

javascriptphpjqueryajaxjson

What's the best way to conceal scrollbars in Nuxt2 whilst preserving one for the description?

The Issue My goal is to remove scrollbars from all pages (which I achieved successfully), but keep one visible for a specific section of description. What I Attempted I tried adding the class .scroller and only displaying it for the <div> containi ...

cssvue.jsnuxt.jsscrollbar

Steps for updating a specific item within an object in an array of MongoDB document

Consider the following data collection, for which I have some questions: { "_id" : ObjectId("4faaba123412d654fe83hg876"), "user_id" : 123456, "total" : 100, "items" : [ { ...

javascriptnode.jsmongodbexpressmongoose

Implementing the @media rule using Javascript

I'm trying to use JavaScript to add an image dynamically, but I want to remove it when the viewport is 600px or wider. This is my approach so far: var img = document.createElement('img'); // (imagine here all the other fields being defined ...

javascripthtmlcss

Can Bootstrap CSS take precedence over a theme's styling?

After working with various WordPress theme templates, I am now ready to take on the challenge of creating my own custom themes. One aspect I would like to incorporate is utilizing Bootstrap to ensure my website is responsive. However, I have some questions ...

phphtmlcsswordpresstwitter-bootstrap

Presenting quiz questions using javascript

Currently, I am following the learning path on javascriptissexy.com and facing a challenge with displaying quiz questions in the best way possible. As a beginner student of JavaScript, my question is about how to approach developing the behavior of a quiz ...

javascriptjson

The authentication callback function fails to execute within Auth0 Lock

I'm having an issue with logging into my application using Auth0. I have integrated Auth0 Lock version 10.3.0 through a CDN link in my project and am utilizing it as shown below: let options = { disableSignupAction: true, rememberLastLogin: f ...

javascriptangularjstokenjwtauth0

Just finished my first webpage - can't seem to get the footer to stay put!

After spending 3-4 months learning HTML and CSS, I am now working on my first web page. However, I'm facing an issue where the footer is stuck to the slideshow and I can't seem to figure out how to position it at the bottom of the page. Any tips ...

htmlcss

Introduce a pause interval between successive ajax get calls

I've created a script that uses an ajax GET request when the user reaches near the end of the page. $(function(){ window.addEventListener('scroll', fetchImages); window.addEventListener('scroll', fetchNotifications); }); ...

javascriptjqueryajax

Using jQuery to select elements with specific innerHTML values

$('.select option:selected[innerHTML="5"]') In this case, I am attempting to choose an option that is currently selected and has innerHTML that perfectly matches a specific string (for example: "5") For reference, here is a fiddle link: http:// ...

javascriptjqueryselectorinnerhtml

React Images: Carousel display issue with images not centered

Is there a way to center the selected image instead of it appearing on the left-hand side? Here is the current behavior: https://i.stack.imgur.com/SUWOK.jpg I am using the following packages in a sandbox environment with Next.js 11 and TailwindCSS 2.2.4: ...

cssnext.js

Issue: Module 'curl' is not located at Function.Module._resolveFilename (module.js:489:15)

After installing node.js using the Windows installer, I noticed that the folder structure created was C:\Program Files\nodejs\node_modules\npm\node_modules. It seems like all the module folders are in the last node_modules director ...

javascriptjquerynode.jsnpm

Can the mDNS string received through webRTC be decoded to retrieve a user's IP address?

After doing some thorough research, I came across this insightful response from a different Stack Overflow question. The problem at hand involves retrieving an mDNS string, which looks like this: abcd1234-1e1e-1e1e-1e1e-abcd1a2bc3de.local I have a genuin ...

javascriptipwebrtc

Using Symfony2 Knp-snappy library for PDF generation, the CSS styling is not being properly imported

Attempting to create a PDF from an html.twig template, but facing some issues... Although the content is correct in the PDF, the layout is missing. It appears that the CSS files are not being imported... Bootstrap from Twitter is being used to handle the ...

phpcsstwitter-bootstrapsymfonypdf

Uncover hidden content by clicking a button with JavaScript

I need help with creating a function that hides additional content until a button is clicked. Currently, my script displays the content by default. How can I modify it to hide the content by default and only reveal it when the button is clicked? functi ...

javascripthtml