I am familiar with how to achieve a parallax effect using background-size on a div and adjusting background-attachment properties. However, I have come across code generated by a Wordpress plugin that looks like this:
<div class="big-leader>
<div class="backstretch">
<img src="background-image.jpg">
</div>
</div>
Is it possible to create a parallax effect on this element without using background-image in CSS?
One way to enhance the appearance of a parent div is by extracting the image source and setting it as the background image, before removing the original image. Here's a simple example of how this can be accomplished:
Sample CSS :
.backstretch {
width: 50%;
height: 200px;
margin: 200px auto;
}
HTML
<div class="big-leader">
<div class="backstretch">
<img src="test.png">
</div>
<div class="backstretch">
<img src="test1.jpg">
</div>
</div>
JQUERY :
$(function() {
$('.backstretch').each(function(index, el) {
var img = $(el).children('img');
$(el).css('background', 'url(' + img.attr('src') + ') 50% 50% / cover fixed');
img.remove();
});
});
$(function() {
$('.backstretch').each(function(index, el) {
var img = $(el).children('img');
$(el).css('background', 'url(' + img.attr('src') + ') 50% 50% / cover fixed');
img.remove();
});
});.backstretch {
width: 50%;
height: 200px;
margin: 200px auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big-leader">
<div class="backstretch">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="backstretch">
<img src="http://via.placeholder.com/500x200">
</div>
</div>My project consists of 3 interconnected files: index.php, functions.js, and compute.php In index.php, there is a div that triggers a function in functions.js called compute(), which sends an AJAX request to perform a task in compute.php The code in index ...
After reading Joel's insightful article about character sets, I have decided to follow his advice by using UTF-8 on both my web page and in my database. However, one thing that confuses me is how to handle user input. As Joel aptly points out, "It doe ...
We are receiving information from the backend server and need to transfer it to an iframe. In order to accurately set the height of the iframe to match the content, we must wait for the content to be loaded into the iframe. However, this process may not ha ...
As a newcomer to using selenium, I have been doing a lot of research and reading documentation on how to write code. I am trying to calculate the BMI (ideal weight) by inputting weight and height values. There are three forms to fill out: one for weight, ...
I encountered an issue while following a tutorial and I am unable to pinpoint the mistake in my "SignUpView.vue" file. I attempted switching to re_path but it did not resolve the problem. Not Found: /api/v1/users [15/Oct/2023 22:30:42] "POST /api/v1/user ...
While delving into the source code of ant-design, I couldn't help but notice that each component has both an index.ts and a index.less file in the style folder. This got me thinking - why is JavaScript being used to manage dependencies here? What woul ...
I'm trying to make my footer stretch to fit the default container width from bootstrap. Even though it's inside a row, which is inside the container tag, it still stretches to fill the entire screen width. Is there a way to prevent this? You ca ...
Recently I was given a task to create an HTML page that allows users to interact and generate templates on a web application. Users can use the web browser to design a template and save it. Seems simple, right? The challenge came when I needed to let user ...
I'm new to JavaScript and I want to create a rock, paper, scissors game from scratch. My Game Plan: Once the user clicks on an option (rock, paper, scissors), the game will display their score and the computer's score along with the result of t ...
Requesting assistance I have stored text in the constant.js file as shown below. export const navLinks = [ { id: "manage", title: "Manage", }, { id: "transactions", title: "Tran ...
Can anyone help me understand why the Select label is misplaced in MUI5? https://i.sstatic.net/gvqff.png This is the Textfield label: https://i.sstatic.net/zrgqF.png This is the Select label: https://i.sstatic.net/GspRC.png Here is the code snippet: ...
For my project, I have a requirement to use custom svg files. To achieve this, I am utilizing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0865697c6d7a616964257d61483b2631263b">[email protected]</a>. I reviewed ...
23 Years Young From: The Boogie Down Bronx Heritage: Puerto Rican Pride Trade: Master Tailor For a demonstration, click on this link ...
Seeking assistance with an issue I encountered, where the date of 12th March is combined with a table. Any suggestions on how to separate them? Screenshot: UPDATE:JFIDDLE ...
I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...
Recently diving into the world of Bootstrap, I have come across a puzzling issue: Take a look at the HTML code from my website: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width ...
Currently, I am utilizing Bootstrap v4.5.0 within a Django template for my project. Within this setup, I have implemented Bootstrap form components to showcase various form elements (https://getbootstrap.com/docs/4.5/components/forms/). The issue at hand ...
My current challenge involves sending a combination of name and description text data alongside a video file. Unfortunately, I've encountered an issue where I can only send either the video or the text, but not both simultaneously. Below is the code ...
Below is the code snippet I have in my HTML table. <table> <tbody> <thead> <tr> <th align="right" colspan="4"> <span class="font-style-bold">SCHEDULE OF RATES</span> ...
<input type="number" id="test"> I'm trying to figure out how to set an event listener for the two arrow buttons on the right of this number input field. Typically, we can use jQuery like: $("#test").on("cl ...