Create a soft focus on the background sans any filters

I am in the process of developing a website and have implemented code to blur out the background:

CSS

#background{ 
    background: url(img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    min-height: calc(100% - 96px);
    -o-transition: all 750ms;
    -moz-transition: all 750ms;
    -webkit-transition: all 750ms;
    transition: all 750ms
}

.covered{
    background: url(img/bgb.jpg) no-repeat center center fixed!important;
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
}

jQuery

$('.overlay,.ov').click(function(){
    $('#background').addClass('covered');
}

HTML

<div id="background">
    //content of my page
</div>

I have experimented with different solutions:

-I attempted using the blur filter, but it resulted in the content being blurred as well.

-I also tried utilizing a sprite, however, due to the requirement of centering the background images, only the top section appeared normal while the bottom section was blurred.

Although my current code functions effectively, there is a delay in loading the new blurry background image when the overlay is clicked, causing a momentary white background. Any recommendations or suggestions to improve this issue?

javascriptjqueryhtmlcss

Answer №1

One method to ensure the browser downloads an image is by using the Image element in either HTML or JavaScript. You can try inserting

<img src="img/bgb.jpg" style="display:none">

in your HTML file, or

var bbg = new Image();
bbg.src = "img/bgb.jpg";

in your JavaScript code. The image doesn't need to be displayed on the page for it to be downloaded. In fact, simply using new Image().src = "img/bgb.jpg"; without declaring a variable should suffice.

By pre-loading the blurred image when switching backgrounds with CSS, the browser will have the image cached and ready to display instantly.

Answer №2

To achieve this desired effect, you can create a structure similar to the following:

<div class="container">
  <div class="bg"></div>
  <div class="content"></div>
</div>

Next, adjust the positioning of the background element with the following CSS:

.bg {
  position: absolute;
  top: 0;
  left: 0;
}

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

Steps for importing jQuery typings into TypeScript:1. First, install the jQuery

I've searched for similar questions, but haven't found one that matches my issue. Can someone help me figure out what to do next? In my Visual Studio project, I used package.json to download jquery typings into the node_modules folder: { "ver ...

javascriptjquerytypescripttypescript-typings

Keep a stack to hold the content within the div element

I've been dealing with a datatable and successfully managed to open a details page within the same div when a row is clicked using divname.load(@url.action(''). However, I am now looking to add a close button on the details page so that I c ...

jqueryasp.netasp.net-mvc-4datatables

Tips for extracting information from a Javascript Prompt Box and transferring it to a PHP variable for storage in an SQL database

My current issue involves a specific function I want my script to perform: before a user rejects an entry on the server side, the system needs to prompt a text box asking for the reason behind the rejection. The inputted reason should then be saved to a My ...

javascriptphpjquerymysqlajax

JS-generated elements do not automatically wrap to the next line

For my first project, I've been working on a to-do list and encountered an issue. When I create a new div with user input, I expect it to start on a new line but it remains stuck on the same line. Can anyone point out where I might have gone wrong? I ...

javascripthtmlcss

How come props do not get updated along with state changes?

I've encountered an issue where the state of a component being passed into another component as a prop is not updating correspondingly. Various attempts have been made to resolve this, including placing it in the return function and updating the "low ...

javascriptreactjs

Creating an XPath expression for selecting multiple siblings of a div tag

Currently, I am working on writing an XPath expression for a specific section of code: <div class="line info"> <div class="unit labelInfo TextMdB">First</div> <div class="unit lastUnit"> <div clas ...

htmlcssseleniumxpath

Replacing strings using Regex capture groups in JavaScript

Within my NodeJS application, there is a phone number field containing multiple phone numbers stored in one string. For example: \n\n \n (555) 555-5555 (Main)\n\n, \n\n \n (777) 777-777 (Domestic Fax)\n&bso ...

javascriptnode.jsregex

Showing scheduled activities from a database on an AngularJS mwl calendar

How can I modify my code to display events from a database on an mwl calendar based on the saved date rather than showing all events for today only? I want to show events based on the notifyDate field in the database. Can someone help me with this? html ...

javascriptangularjs

The JavaScript syntax dollar sign

I am currently studying a JavaScript source code and it's my first time writing JavaScript. I find some of the syntax confusing. <script id="source" language="javascript" type="text/javascript"> $(function () { window.onload=function() ...

javascript

Changing the counter using dual buttons in Vue.js

I am facing an issue with updating the counter when using both the add and remove buttons. The add button functions correctly, but unfortunately, the delete button does not update the counter as expected. Below is a picture showcasing the problem at hand: ...

javascriptvue.js

Guide on installing React packages during runtime

My React project has a number of packages that need to be installed, but they take up a lot of disk space. I would like to install them only when necessary, after the user interacts with a specific component that requires these packages. Is there a way t ...

javascriptreactjsreact-nativenpmnpm-install

Navigate forward to the next available input in a grid by using the tab key

My goal is to improve form entry efficiency by using the tab key to focus on the next empty input field within a grid component. If an input field already has a value, it will be skipped. For example, if the cursor is in input field 2 and field 3 is filled ...

javascriptjqueryangularjs

Guide to showing an uploaded image in a child component using Vue.js

Using the v-file-input component from Vuetify, I am able to upload images with the following code: <v-file-input label="Image" filled accept="image/png, image/jpeg, image/bmp" prepend-icon="mdi-camera" v-mod ...

javascriptvue.jsvuetify.js

"Error encountered when attempting to upload directory due to file size

Utilizing the webkit directory to upload a folder on the server has been successful, however, an issue arises when there are more than 20 files in the folder. In this scenario, only the first 20 files get uploaded. The PHP code used for uploading the fold ...

javascriptphpfile-uploadwebkit

Ways to showcase every resource from an API in React JS

I need help with adding code to display products along with their images from an API in my existing code. Can someone assist me with this? import React, {useState, useEffect} from 'react' import "bootstrap/dist/css/bootstrap.min.css" im ...

javascripthtmlreactjsjsx

Does the frame take precedence over the button?

const div = document.createElement('div'); // creating a dynamic div element div.setAttribute('id', "layer1"); // setting an id for the div div.className = "top"; // applying a customized CSS class div.style.position = "absolute"; // sp ...

javascripthtmliframegreasemonkeyframe

Obtaining the initial variable from an array - a simple guide

Although it seems simple, I am having trouble getting it to work. I have an array with 2 variables inside that I retrieve from jQuery. var features = [long, lat ] I want to iterate through all the values in the loop and use: fetures[i] This should give ...

javascriptjqueryarraysvector

Receiving a NaN output rather than a numerical value

Experiencing what seems to be a straightforward syntax error, but I'm unable to pinpoint it. Controller: $scope.startCounter = 3; $scope.startTimeouter = function (number) { $scope.startCounter = number - 1; mytimeouter = $t ...

javascripthtmlangularjsionic-framework

The instance is referencing the property or method "sendResetMail" during render, but it is not defined

I'm pretty new to Vue and struggling with an error message while trying to get a reset email modal working in my Vue project: The error says that the property or method "sendResetMail" is not defined on the instance but referenced during render. I ...

javascriptvue.jsvuejs2

Could you please direct me to the section in the ECMAScript documentation that specifies the behavior of a resolved promise with its [[Promise

My objective is to compare the behavior of a promise's resolve function with the corresponding process outlined in the ECMAScript specification. Specifically, I am interested in understanding how the resolve function behaves when called with an object ...

javascriptecmascript-6