Is there a way to update an image dynamically within CSS using the :before pseudo-element?

I am attempting to dynamically change the background image, but I am having trouble accessing the wrapper before "wrapper:before{}" from jQuery $('.wrapper:before)

.wrapper:before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
display: block;
background: url("https://image.tmdb.org/t/p/original/m1gYsC1uAu6EDc5pVIZ29DgwSrH.jpg");
background-size: cover;
width: inherit;
height: inherit;
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
}


.wrapper {
display: inherit !important;
height: 100% !important;
width: 100% !important;
padding: unset !important;
position: fixed;
left: 0;
right: 0;
z-index: 0;
color: #aaa;
overflow-x:scroll;
}

The jQuery code is as follows:

var image = "https://image.tmdb.org/t/p/w1280/" + data.backdrop_path;
    $('.wrapper:before').css('background-image', 'url('+image+')');

Any suggestions on how to achieve this?

Answer №1

When using wrapper.before, it does not support an image reference. However, you can utilize jQuery to search for the presence of wrapper.before and then apply a class to it. The wrapper.before will display as ::before within the .wrapper div, so with some jQuery manipulation, you can identify the div that contains the string ::before and assign a class to it.

$("div.wrapper:contains('::before')").addClass("monkey");

Check out this jsfiddle for more information.

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

Displaying a collapsible table directly centered within the table header

I am having trouble centering my table header in the web browser page. When I click the "+" button, the data is displayed beneath the table header, but I want the collapsible table to be centered directly below the header. I have tried making changes in CS ...

What is the proper way to utilize a <DIV> element when adding a border to the right side?

Currently, I am enrolled in an online HTML course through my local community college, and I must say, it's quite challenging. "For your upcoming assignment, you are required to construct an HTML document incorporating the div element to feature your ...

How can I trigger the opening of an iframe without relying on jQuery when the user clicks on it?

I'm looking to create a UI where the user can click on an image and have an iframe appear on top of the image. Instead of using JQuery, I want to stick with pure JavaScript for this functionality. ...

Changing Image Size in Real Time

Trying to figure out the best way to handle this situation - I need to call a static image from an API server that requires height and width parameters for generating the image size. My website is CSS dynamic, adapting to different screen sizes including ...

Using jQuery to serialize parameters for AJAX requests

I could use some help figuring out how to set up parameters for a $.ajax submission. Currently, I have multiple pairs of HTML inputs (i pairs): > <input type="hidden" value="31" name="product_id"> <input > type="hidden" value="3" name="qua ...

Creating elegant Select Dropdown Box in AngularJS without relying on images

I am currently working on an angular page and have implemented a dropdown with ng-Options to fetch and set values successfully. However, I am now looking to enhance the appearance of this dropdown. After exploring options like ui-select, I realized that be ...

Can this layout be achieved using DIV elements?

Struggling to create a unique HTML/CSS layout that extends beyond the center? Imagine a standard horizontally centered page, but with one div expanding all the way to the right edge of the browser window. This design should seamlessly adjust to window res ...

Enhancing FileUpload functionality in ASP.NET with jQuery function prior to postback

My webpage is built with .aspx and contains the following code: .. <form id="frm" runat="server"> <asp:FileUpload runat="server" id="fileupload" onchange="browsed()" /> <asp:Button runat="server" OnClick="Upload_Click" id="uploadb ...

State change shows the previous and current values simultaneously

I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected. Essentially, entriesNum receives a number as an event and changes th ...

Sending JSON data to a web service using ASP.NET and jQuery

I am currently facing an issue with posting JSON data to a web service. Although the web service is being executed, no data is available. The jQuery code I am using looks like this: var json = {"Results": results}; var jsonArray=JSON.stringify(json); $.a ...

PHP: Link to logo in different folder by including 'nav.php'

I am facing an issue with my nav.php file: <div> <!-- there's a lot of code here so I want to write it once and include it in all pages within the main folder as well as subfolders <img src="logo.png"> </div> The structur ...

Avoid running old JavaScript code when using turbolinks in conjunction with highcharts library, specifically LazyHighCharts

Utilizing turbolinks 5 and rails version 5, along with the latest Highcharts has been causing me some issues. T LazyHighCharts offers a solution for Turbolinks 5 by encapsulating chart building javascript within (function() { document.addEventListe ...

What is the best way to incorporate a jQuery script to make an engaging slideshow on my website?

I've been trying to develop a slideshow similar to the one showcased on this website. First of all: I am using Kompozer. My website is not yet live as I am still in the process of putting it together on my computer. To give you an idea, here is the d ...

Ways to conceal components of an external widget on my site

I'm attempting to add a chat widget to my website and I'm looking to hide specific elements within the widget. The chat function is provided by Tidio, but I believe this applies to most widgets. My main goal is to conceal a button that minimize ...

Tips for customizing the focus style of a Text Field in Material-UI

My current Search box design is represented in the following image: https://i.sstatic.net/VuKIp.png I am looking for ways to customize the background color, border, and icon of the search box when it is focused. Additionally, I would like to know how to m ...

What is the best way to show a select list on top of another element?

I'm currently working on a project using this React Template. Within one of the components, there's a Select List followed by a Card element. The issue arises when I click on the list, as the items appear beneath the card: https://i.sstatic. ...

Using CSS :active can prevent the click event from firing

I've designed a navigation menu that triggers a jquery dialog box to open when a link is clicked. My CSS styling for the links includes: .navigationLinkButton:active { background:rgb(200,200,200); } To attach the dialog box, I simply use: $("#l ...

Maintaining DOM modifications once a link has been clicked and the Back button is pressed

Is there a way in JavaScript to prevent appended items from disappearing when the user clicks another link and then presses the Back button after using jQuery's appendTo() method to add items to an unordered list? ...

How can I force a variable width font to behave like a fixed width font in HTML?

Is there a method to emulate the appearance of a fixed-width font using a variable width font in HTML? For instance, if I were to display the phrase "The quick grey fox jumped over the lazy dog" in "Courier New," a fixed-width font, it would appear wider ...

Is it possible to trigger the JavaScript mouseover function following a click event?

Is it possible to call a function on mouse over after the first click event is triggered by the user? <a href="javascript:void(0);" id="digit<?php echo $k;?>" onClick="javascript:return swapClass('<?php echo strtoupper($v);?>',&ap ...