Adjusting the opacity of the background image in the section - focus solely on the background

This section is what I'm working on.

    <section ID="Cover">
        <div id="searchEngine">hello</div>
    </section>

I am trying to achieve a fade in/out effect specifically for the background image of the Cover section. The current function I am using fades the entire section, but I want to target only the background image. Is there a way to do something like this?

$("#Cover").css("background-image").fadeOut();
??

(I am also defining the initial background image within the following function)

    var imageID=0;
var time=0;
function changeimage(every_seconds)
{
    //change the image
    if(imageID==0)
    {
        $("#Cover").fadeOut(time, function () {
        $("#Cover").css("background-image", "url(images/cover1.jpg)");
        $("#Cover").fadeIn(time);});
        imageID++;
        time=1000;
    }
    else 
    {
        if(imageID==1)
        {
            $("#Cover").fadeOut(time, function () {
            $("#Cover").css("background-image", "url(images/cover2.jpg)");
            $("#Cover").fadeIn(time);});
            imageID++;
        }
        else
        {
            if(imageID==2)
            {
                $("#Cover").fadeOut(time, function () {
                $("#Cover").css("background-image", "url(images/cover3.jpg)");
                $("#Cover").fadeIn(time);});
                imageID++;
            }
            else
            {
                if(imageID==3)
                {
                    $("#Cover").fadeOut(time, function () {
                    $("#Cover").css("background-image", "url(images/cover4.jpg)");
                    $("#Cover").fadeIn(time);});
                    imageID++;
                }
                else
                {
                    if(imageID==4)
                    {
                        $("#Cover").fadeOut(time, function () {
                        $("#Cover").css("background-image", "url(images/cover5.jpg)");
                        $("#Cover").fadeIn(time);});
                        imageID=0;
                    }
                }
            }
        }
    }
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
javascriptjqueryhtmlcss

Answer №1

I completely agree with TrueBlueAussie's suggestion to use HTML instead of CSS background images for simplification. Here is a live example:

<html>
    <head>
        <style type="text/css">
            #bgImg { 
                position: fixed; 
                width: 100%; 
                height: 100%; 
                top:0; 
                left: 0; 
                z-index: -1;
            }
            #mainContent {
                width: 960px; 
                margin: 20px auto; 
                padding: 15px; 
                background: #f2f2f2; 
                text-align: center;
            }
        </style>
    </head>
    <body>
        <img src="yourImg.jpg" id="bgImg">
        <section id="mainContent">
            <h2>Your Heading</h2>
            <p>Your content....</p>
            <button id="inBtn">Background Image fade in</button>
            <button id="outBtn">Background Image fade out</button>
        </section>
    </body>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>

        function resize(){
            $("#bgImg") 
            .width($(window).width()) 
            .height($(window).width() * .67); 

            if($("#bgImg").height() <= $(window).height()){ 
                $("#bgImg")
                .height($(window).height())
                .width($(window).height() * 1.5);
            }

        }

        $(document).ready(function(){    

            resize(); 


            $("#inBtn").on("click",function(){
                $("#bgImg").fadeIn();

            }); 

            $("#outBtn").on("click",function(){
                $("#bgImg").fadeOut();

            }); 

        });

        $(window).resize(function(){ resize(); });

    </script>
</html>

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 method to determine the overall size of a webpage using the Google PageSpeed API?

"analytics": { "cssResponseBytes": "333 kB", "htmlResponseBytes": "269 kB", "imageResponseBytes": "3.35 MB", "javascriptResponseBytes": "2.29 MB", "numberCssResources": 2, "numberHosts": 80, "numberJsResources": 72, "numberR ...

javascriptjsonwebpagespeed

How to Create Django Templates without Including head, body, and Doctype?

Is it considered the correct or recommended practice to omit the Doctype, head, and body tags? This is a question that arises when looking at examples like tutorial 3 in the Django documentation which can be found here, specifically in the polls/template ...

pythonhtmldjango

Tips for creating a flexbox layout that is responsive to different screen

Currently, I am using flex to ensure that the two inner div elements have the same height. However, the design is not responsive as it appears perfectly in a full-width window but gets squeezed on mobile devices. Is there a solution to this issue? Are th ...

htmlcsstwitter-bootstrap-3flexbox

The Angular filter is failing to display the category value

My issue lies in adding a filter to display categories, as my setCurrentCategory function is not showing any value but instead displaying 'undefined'. The goal is to show the category for each person. I'm using ng-click to pass to my functio ...

javascriptangularjs

What is the best way to fit the text into a DIV row as efficiently as possible?

Looking for a solution to prevent a span from dropping down to the next line when text is too long within a fixed width and height row. The row consists of three elements, two with fixed widths and the third containing a span and text. Constraints include ...

htmlcss

Publishing Your App on the Android Market with PhoneGap

Seeking a comprehensive PhoneGap tutorial that covers app publishing, especially struggling with successful app deployment. Currently experienced in HTML, CSS, and JavaScript. Any tips or advice would be greatly appreciated, thank you! I have a good gras ...

javascripthtmlcssphonegap-buildphonegap-developer-app

The utilization of jQuery's ajax feature is resulting in an unexpected full page refresh when using FireFox browser

Currently, I am facing a bit of a problem with an ajax call using jQuery. It seems to be working perfectly fine in Internet Explorer 7, however, FireFox 3 always initiates a full page refresh whenever the call is made. This ajax call is set to POST to an A ...

asp.netjqueryajaxfirefox

a solution to the focus/blur issue in Firefox's browser bug

I have created the following script to validate if a value entered in an input field already exists in the database. $('#nome_field').blur(function(){ var field_name=$('#nome_field').val(); $.ajax({ url: " ...

javascriptjqueryfirefoxonbluronfocus

When utilizing the "as" attribute, styled components do not inherit any styles

I am currently utilizing both styled-system and styled components, working on a simple scenario like the one below: const buttonFont = { fontFamily: "Chilanka" }; // define basic text styling const Text = styled.div` ${typography} ${color} `; // c ...

cssreactjsstyled-components

Are there any disadvantages to utilizing bindActionCreators within the constructor of a React component when using Redux?

I have come across numerous instances where the bindActionCreators function is used within the mapDispatchToProps function as shown below: ... const mapDispatchToProps = (dispatch, props) => ({ actions: bindActionCreators({ doSomething: som ...

javascriptreactjsredux

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

javascripthtmlcssmaterial-ui

Encountered an issue with the ProgressPlugin: TypeError - Unable to access property 'tap' of an undefined element

Encountering a Problem with npm run build Here's the issue at hand Compiling client E:\ui\sheraspace_ui\node_modules\webpack\lib\ProgressPlugin.js:223 compilation.hooks.addEntry.tap("ProgressPlugin", entryAdd ...

javascriptreactjswebpacknext.js

Can you explain the contrast between 'depict' and 'examine' when using Jest?

I am currently diving into the world of unit testing in Vue.js with Jest. One question that keeps popping up is when to use describe and when to use test ? TodoApp.vue Component : <template> <div> <h1>TodoApp Componenent</h1> ...

javascriptvue.jsunit-testingjestjs

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a way to incorporate a magnifying glass into an HTML page using jQuery or within an Android app? Ideally, it would be for a single picture. In my application, I am displaying an HTML file from my assets in a webview. The HTML page utilizes jQuery ...

javascriptandroidjquerycssmagnification

JQuery Tic Tac Toe Duel: Face Off Against Your Friend in a Thr

Looking for some advice here. I'm new to game development and currently working on a 2 Player Tic Tac Toe game. I need help with implementing the game functionality. Any suggestions? I want to disable the "div" once a player clicks on it, but I' ...

javascriptjqueryhtml

What is the best way to import the three.js OBJLoader library into a Nuxt.js project without encountering the error message "Cannot use import statement outside a module

Beginner here, seeking assistance. Operating System: Windows 10. Browser: Chrome. Framework: Nuxt with default configurations I have successfully installed three.js using npm (via gitbash) by running npm install three --save. It is included in the packag ...

javascriptvue.jsthree.jsnuxt.jsobjloader

Emails sent through an HTML form submission should always include a valid "from"

I am currently in the process of creating a feedback form that allows individuals to provide anonymous feedback. I have explored nodemailer and node-sendmail, but I have encountered an issue with both requiring a from address. While I am aware that this ca ...

javascripthtmlnode.js

Utilizing Angular: Importing Scripts in index.html and Implementing Them in Components

Currently, I am attempting to integrate the Spotify SDK into an Angular application. While I have successfully imported the script from the CDN in index.html, I am encountering difficulties in utilizing it at the component level. It seems like there may be ...

javascriptangulartypescriptspotify

- Determine if a div element is already using the Tooltipster plugin

I have been using the Tooltipster plugin from . Is there a way to check if a HTML element already has Tooltipster initialized? I ask because sometimes I need to update the text of the tooltip. To do this, I have to destroy the Tooltipster, change the tit ...

javascriptjqueryhtmlcsstooltipster

Having trouble formatting the date value using the XLSX Library in Javascript?

I'm having trouble separating the headers of an Excel sheet. The code I have implemented is only working for text format. Could someone please assist me? const xlsx = require('xlsx'); const workbook = xlsx.readFile('./SMALL.xlsx') ...

javascriptnpmxlsx