Slowly zooming background image

I've been searching all over the place but can't seem to find a clear answer on how to slowly zoom in the background image using CSS. Any help would be greatly appreciated. Currently, my code only zooms the text elements and not the background.

CSS:

body {
    background-image: url("../img/background.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 5s 1;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

}
csszoomingtransform

Answer №1

There was difficulty in getting the body to scale properly, possibly due to the user stylesheet overriding it. One solution is to utilize an inner div:

<style>
div {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 5s 1;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

}
</style>
<body>
<div style="position:absolute;top:0;bottom:0;left:0;right:0;"></div>
</body>

Answer №2

Check out this easy-to-follow demonstration:

Demo Link

The technique involves using transform: scale; and triggering the change by applying a jQuery class on an event (I opted to trigger it upon DOM load).

Here is the HTML:

<main id="kb">
    <img src="https://iso.500px.com/wp-content/uploads/2014/08/2048-5.jpg" alt="baby elephants" />
</main>

Here is the CSS:

html,
body {
    width:100%;
    height:100%;
}

#kb {
    width:100%;
    height:100%;
    position:relative;
}

#kb img {
    transform-origin: 20% 80%;
    transition: transform 70s linear;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-1024px;
    margin-top:-703px;
}
#kb img.zoom {
    transform: scale(2);
}

Finally, the JavaScript part:

$(document).ready(function(){
    $('#kb > img').addClass('zoom');
});

If you wish to adjust the speed of the animation, simply modify the "transition" value in the CSS.

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

The combination of absolute positioning and percentage-based height measurements allows for

For more information, go to http://jsfiddle.net/A2Qnx/1/ <div id='w'> <div id='p'> <div id='c'> </div> </div> </div> With absolute positioning enabled, div P has a height ...

htmlcssheightcss-position

Surprising CSS overflow error

Recently, I've encountered a CSS overflow issue while working on a responsive webpage. The problem seems to be stemming from the navigation menu. The declaration of "overflow-x: hidden" is specifically causing the trouble... Initially, I suspected i ...

cssmobileoverflowresponsive

Looking for assistance with arranging and managing several containers, buttons, and modals?

My goal is to create a grid of photos that, when hovered over, display a button that can be clicked to open a modal. I initially got one photo to work with this functionality, but as I added more photos and buttons, I encountered an issue where the first b ...

javascripthtmlcssbuttonmodal-dialog

Tips for vertically aligning <p> and <div> elements without using the table-cell property

I am trying to align my text vertically in the middle using a ch-grid <div> (the circle color element). Is it possible to achieve this without specifying a display attribute for the <p> element? I plan to hide it by setting display:none initia ...

htmlcss

The appearance of the Angular material component is altered once integrated into a new Angular application compared to its presentation in the provided example

After adding the Angular Material component "Toolbar" to my project, I noticed that it does not appear the same as it does in the example provided. Despite using the same styles, the outcome is different. Here is what the example looks like on the project ...

cssangularsassangular-material

Have an overlay on a specific area of the webpage while ensuring the remaining sections remain interactive to the user's inputs

Looking for a way to add an overlay in a specific area of a webpage without blocking the other sections? I attempted to use the LightBox feature from primefaces components, but it didn't give me the desired result. I'm struggling to keep the unco ...

cssjsfprimefaces

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

Developed a form with the functionality to move placeholders in a textarea upwards when clicked. The goal is to increment the height of the textarea by 1 row for every line break. However, I am uncertain about what to include in the if statement of my Ja ...

javascriptjqueryhtmlcss

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

javascripthtmlcss

Float a div within text to be positioned vertically

Is there a way to use only CSS to create an article that includes a featured quote section starting around 50px from the top? The section should be half the width of the page with text wrapping around it at the top and bottom. Currently, I am using the fl ...

htmlcsscss-float

Removing accordion borders in Bootstrap and AngularJS can be achieved by customizing

Can anyone help me figure out how to hide the border in each accordion group that contains a panel and inner elements? I've tried using classes like .accordion and .inner but nothing seems to work. Any advice on where to find the specific class or ID ...

csslessangularjs-bootstrap

What is the best way to eliminate unwanted white space at the top of the page?

I'm new to web development and I'm exploring the concept of white space at the top of a webpage. Here is a snippet of my code: HTML: <div> <p>lorem ipsum</P> </div> CSS: div { background-color: black; } I attem ...

htmlcss

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

javascriptcssangularjs

Stacked on top of one another are in-line block items

I've been working on this code for a while now, but I can't seem to get it right. My goal is to create a horizontal line of navigation links with the first link aligned to the left and the rest following in sequence like a text line. However, a ...

htmlcssinline

Utilize images inputted via an HTML DOM file uploader within p5.js

I'm facing a challenge with allowing users to upload their image file through a DOM file uploader (<input type="file"></input>). Once the image is uploaded, I'm unsure of how to transfer it to JavaScript and process it using p5.js. Ho ...

javascripthtmlcssp5.js

What is the best way to incorporate a specific term from the class into CSS styling

I am working on a webpage that includes '<a> <i> <label>' elements with specific classes. <a class="icon-home"></a> <label class="icon-pencil"></label> <i class="icon-display"></i> I want to ...

htmlcsscss-selectors

Tips for creating a responsive fixed div/nav that adjusts its size based on the container it is placed within

Just starting out in web development and struggling with this issue. Any assistance would be much appreciated! When resizing the window, the fixed div moves outside of its container instead of resizing. The navigation bar on the website I'm working o ...

javascriptjqueryhtmlcssfixed

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

My JavaScript method works fine in Chrome, taking about 2000 ms to iterate over ~200 inputs, insert values, and trigger onchange events. However, it's a different story in IE where it takes about 10000 ms. To show the progress of this process, I deci ...

javascriptjqueryhtmlcssrepaint

pointing out the existing issues with the menu

I am struggling to figure out why I cannot highlight the current menu page on a navigation bar (aside from the fact that I am a complete beginner :-) I have tried using a JQuery function that I found online, but none of them seem to work. Here is the funct ...

jquerycssmenuhighlight

Spacious Bootstrap layout - 3 columns with the center column taking up the most space

I am in the process of designing a layout with 3 columns aligned in the same row: The first column should adjust to its content, such as a picture or avatar The third column should also adjust to its content, like a date or time. Meanwhile, the second col ...

htmlcssbootstrap-5

Is there excessive spacing following an A tag or an img tag?

Hi there, I'm currently facing an issue while building a table cell using the div tag. Specifically, I have encountered some unwanted spacing after my img within the cell. <div style="display:table"> <div style="display:row"> <div s ...

htmlcsstagsimagespace