Enhance your body background with a zoom in effect

Looking to have the background image of my body zoom in on page load, but having some trouble. Here's what I have so far:

CSS:

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(bg.jpg); 
    background-size: 100%;
    transition: all ease-in 5s;   

}

JQuery:

 $( document ).ready(function() {         
          $(document.body).css("background-size", "140%");
      });

My goal is to adjust the background-size property of the image upon page load, but unfortunately it's not working as expected. Any ideas on what might be causing this issue?

jqueryhtmlcss

Answer №1

Here are the essentials:

html, body {
    background: url("http://placehold.it/200x200") top center no-repeat;
    animation: animateBg forwards 2s ease-in;
}
@keyframes animateBg{
    from { background-size: 200px; }
    to { background-size: 100%; }
}

Keep in mind that the image is just a placeholder, feel free to customize it along with the background-size attribute of the animateBg keyframe animation (and any other adjustments you require). If you're unfamiliar with forwards, take some time to learn about it.

Take a moment to educate yourself on CSS Animations; it's advantageous to utilize CSS first before resorting to jQuery for animations.

If this solution doesn't meet your needs, let me know so we can collaborate on an improved answer tailored to your requirements :)

Answer №2

Hopefully this solution will address your question

Just a quick jquery animation demonstration

$("body").animate({
    "background-size" : "180px"
},2000);

Feel free to check out the live example here http://jsfiddle.net/h3r87bf2/12/

Answer №3

attempt

$("body").animate({
    "background-size", "140%"
},20000, function() { alert(); });

check out the demonstration on background zoom effect

Answer №4

Below is the JQuery snippet tailored for your specific code. It includes a delay and a callback function.

$(document).ready(function () {
    $('body').animate({ backgroundSize: '135%'
    }, 2000, 'linear', function () {
        console.log("function executed successfully");
    });

      });

Answer №5

Have you considered implementing the zoom effect directly in the CSS?

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(bg.jpg); 
    background-size: 140%;
    transition: all ease-in 5s;   
}

Answer №6

@sooraj simply specify the height and width similar to the demo

 $( document ).ready(function() {         
          $(document.body).css("background-size", "140%");
      });
body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(//images.visitcanberra.com.au/images/canberra_hero_image.jpg); 
    background-size: 100%;
    transition: all ease-in 5s;   
        height:500px;
    width:100%;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body></body>

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

Using jQuery/AJAX for nested functions, as well as utilizing the Clone and Cufon properties

Currently utilizing Cufon to easily transform fonts into canvas. This script specifically transforms H1 headers: Cufon.replace('h1', { fontFamily: 'SuperMegaArial2010' }); While everything is functioning correctly, I encounter an is ...

jqueryajaxclonecufon

What is the best way to display a template after submitting data via AJAX in the Flask framework?

Encountering an issue where I am unable to open render_template after posting data with ajax. Below is my ajax code: if ($(this).attr("value") == "button-three") { var skoring = getRadioVal(document.getElementById('mentodeNegasi'),'neg ...

javascriptjquerypythonajaxflask

Forwarding based on URL/Query Parameters

I'm looking to create a redirect for users based on URL or query parameters, but I'm not sure how to go about it. For example, if the URL is https://www.tamoghnak.tk/redirect?link=https://www.tamoghnak.tk/gobob, I want to redirect to /gobob. If ...

javascripthtmlnode.jsurl-parametersquery-string

Create a stylish progress bar using CSS arrows

https://i.sstatic.net/vSPZ3.png I have a progress bar that is almost complete, but the arrow position is not working properly. I have tried using :before to fix it, but the position is still incorrect. <div class="progress-panel"> < ...

htmlcsssass

Notification box appearing on the homepage

I created a landing page featuring various products. Each product is accompanied by a description and price. When you click on a product, a "popup window" should appear displaying the picture and description. My concern is that if I have numerous product ...

javascriptjqueryhtmlcsspopup

Looking to generate flipcards dynamically through javascript or jquery when a button or link is clicked?

I've created flipping cards that flip on hover, but I'm struggling to add a button/link that generates a new flipcard when clicked. Any help would be greatly appreciated - plus, I'm new here! Here's my HTML and CSS code for the flipcard ...

javascriptjqueryhtmlcss

Easily upload a single file using the most straightforward version of ajax with jQuery

I am looking for a plugin that allows users to select a file and automatically download it to my server without any additional features. Can anyone recommend the simplest and most reliable plugin for this task? I attempted to use https://github.com/valum ...

phpjavascriptjqueryajax

Is it necessary to regularly update a MySQL table with significant amounts of data every few seconds?

I have developed an application with an automatic save feature, eliminating the need for users to manually click a save button. The settings are saved automatically every time there is an interaction with the app. In the background, I send a POST request t ...

phpjquerymysqlsession

Tips for extracting value from a button inside a while loop in a modal

As I was working on my code, I encountered an issue with displaying pictures in a modal when a user clicks on a button. Here is the code snippet that I used to display the products and set up the session to store the selected picture for the modal. However ...

javascriptphphtml

Rating of displaying an undefined value (NaN)

I'm having issues with creating a currency conversion calculator, as the result is showing as NaN. Can anyone offer assistance? I've tried multiple solutions but have been unable to resolve it. Check out the following JavaScript code snippet: c ...

javascripthtmlfetch-api

What are the best scenarios for employing Server Side Includes?

The documentation for Apache regarding SSI mentions that it is a convenient method to incorporate small snippets of information, like the current time. However, if most of your webpage content is being dynamically generated when served, then it suggests ...

htmlssi

Move the components over to the right

How can I vertically align the user and the search bar on the right side of the page? #search { float: right; margin-top: 9px; width: 250px; } .search { width: 230px; height: 30px; position: relative; line-height: 22px; } ...

htmlcsstwitter-bootstrap

You can use jQuery AJAX to submit two forms' data simultaneously in just one submission

I am looking to submit two sets of form data with just one click. <form id="form1"> <input type="text" name="name"> <input type="submit" value="Submit"> </form> <form id=&quo ...

javascriptjqueryajax

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

How can I prevent users from inputting special characters in an input field and only allow alphanumeric values? The code that I have implemented so far does not seem to be working as intended. When a user enters a special character, it still shows up in th ...

javascripthtmlangulartypescript

The Javascript function must be executed with each page reload

Currently, I am analyzing an asp.net 2 web application that is in my care (even though I did not create it). There seems to be an issue with certain functionalities not working consistently when the page loads, particularly if using Firefox 3 within a vir ...

javascriptjqueryajaxasp.net-ajax

Tips for positioning an inner div within an outer div

Code Snippet: <div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);"> <secti ...

htmlcss

Issues encountered while assigning style in external stylesheet file

Thank you for checking out this post. First, let's take a look at the code for a button: <telerik:RadButton ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" Width="100%" UseSubmitBehavior="true" ...

htmlcsstelerik

phpif (the current date is after a certain specific date, do

Can someone please help me solve this problem? I want to prevent echoing a variable if the date has already expired. Currently, my PHP code displays: Match 1 - April 1, 2015 Match 2 - April 8, 2015 What I need is for Match 1 to not be echoed if the cur ...

javascriptphpjquery

Specify a maximum length for numerical input and permit the use of a plus sign

I am currently working on a form field where users can input a country code. I want to ensure that the user enters only 3 numbers with a + sign at the beginning. I have successfully limited the length to 3 digits, but I am facing an issue with typing the ...

htmlregexangular

Utilizing $.Deferred() in a loop of nested ajax requests

I have spent countless hours searching for solutions to my problem, but I am still hopeful that someone out there has a solution. The issue at hand is being able to receive a notification once function a() has finished its execution. The challenge lies in ...

javascriptjqueryajaxdeferred