Rotating fullscreen background image

I have been searching everywhere for how to create an animated spinning image that covers the entire screen, similar to this example.

Essentially, what I am trying to achieve is a full-screen spinning effect.

This is what I have accomplished so far:

HTML:

<img src="img/bg.jpg" id='test' class='rotating'>

CSS3:

#test {
position:relative;
margin:0 auto;
width:1000px;
height:1000px;
}

@-webkit-keyframes rotating {
     from{
        -webkit-transform: rotate(0deg);
     }
     to{
        -webkit-transform: rotate(360deg);
     }
}

.rotating {
    -webkit-animation: rotating 1000s linear infinite;
}

While I can make it spin, I am having trouble achieving a fullscreen effect. Is this possible? Thank you!

Answer №1

Consider utilizing width:100%; instead of width:1000px;

and height:100% over height:1000px;

Interesting technique, I might have to come up with a reason to implement that hack.

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

Retrieving pictures by their unique identification number

Utilizing a flexslider, I have set up an image display feature as shown in the JSFiddle link below. The slider has been optimized to dynamically extract images from a specific directory, where images are named with numbers like 1023, 2045, 304654, and so o ...

Getting the true height without needing jQuery

let element = document.getElementById('test'); console.log(element.scrollHeight); <div style="height: 30px;" id="test"> <p>ffffffffff</p> <p>gggggggggg</p> ...

What is the process for programmatically setting an image in the code behind?

I am facing a challenge with my aspx code snippet <asp:Image ID="pbScannedImage" runat="server" /> Additionally, in my C# code behind, I have the following: System.Drawing.Image image; image = System.Drawing.Image.FromStream(new MemoryStream(dDSIm ...

What is the best way to display an image during the waiting period for an AJAX response?

Can anyone provide some guidance? I'm attempting to use a loading gif while waiting for a response from an ajax request. Unfortunately, the gif is not being displayed when sending an email. I've searched through multiple pages on different platf ...

positioning newly generated dropped elements within the DOM structure dynamically

Hello everyone, I have a query related to drag and drop functionality. I am currently working on an application that allows users to create websites using only drag and drop features. I am facing a challenge in implementing a feature where users can drop e ...

Align several images vertically inside a container

I'm currently attempting to vertical align/center some images within a div, but it's not coming out perfectly. The images seem to be slightly too low to be considered vertically centered. What could be causing this issue? .Container { wid ...

My experience with jquery addClass and removeClass functions has not been as smooth as I had hoped

I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...

Create data according to jQuery's AJAX data method

When editing in place using jQuery, if the code snippet seems too complicated, please refer to a simpler one. 'column2' => "RAJANgsfdgf" 'column3' => "SRARDHAMgsdfgdf" 'column4' => "40043433" 'column7' =&g ...

Is there a way for me to align my div with my header on the same line?

HTML: <h2> RAN shares false news story about Hershey's Oil Commitment</h2> <div class="date"> <div class="number">27</div> <div class="month">Oct</div> </div> <p>The Rainforest Action Netwo ...

Converting Ajax Request Headers from UTF-8 to ISO Character Set

I am encountering an issue with character encoding on my web page. The page is encoded in iso-8959-9, but when I send ajax requests to the same page to save data to the database, the characters are converted to utf-8. Although my response header shows the ...

A guide on layering .ogg video with .png image using HTML5 and CSS3

I am having difficulty achieving the desired effect, even when using z-index and position:absolute. My goal is to overlay a .png image on top of a video, while still allowing the transparent parts of the .png file to reveal the video playing in the backg ...

Retrieving the value of an inner div upon clicking the outer div

I currently have a collection of button divs, each containing distinct information: <div class="button"> <div id="first"> Johny </div> <div id="second"> Dog </div> <div id="third"> Pasta & ...

Explanation of undesired newline behavior

I encountered a cross-browser issue where a line in a narrow column breaks too early even though there is space left for the last word to fit perfectly. Initially, I suspected a problem with my stylesheet, but the same issue persisted in a simple fiddle I ...

What could be causing the misalignment between the desired output and the response from the AJAX request

Below is a basic JavaScript file I am working with: $.ajax({ url: "is_complete.php", type: "post", success: function (data) { if(data == 1) { } alert("ok") } }) The message "ok" will only be di ...

Is there a more efficient method to achieve this task using JavaScript or jQuery?

Here is the code snippet I am currently using: $(document).ready(function() { //Document Ready $(".examples .example1").click(function() { $(".examples .example1 div").fadeToggle("slow"); $(".examples .example1").toggleClass('focused') ...

Animate the transition of an anchor link by adding content on hover

Is there a way to make an icon appear when hovering over an anchor link on a webpage? I tried a code snippet that I thought would achieve the desired effect, but it ended up leaving a gap. The text should expand in size as you hover over the anchor link. ...

Tips for customizing the Bootstrap 4 grid system for a seamless mobile viewing experience

My form consists of 3 steps, each row containing multiple inputs. You can see an example of my form here. Below is a sample of the grid system I have used: <div class="row"> <div class="col"> <input asp-for="First_N ...

Children elements in Safari have a height that exceeds that of their parent element

I am facing an issue with the layout of my div elements. Here is how they are structured: <div class="parent"> <div class="header"></div> <div class="content"></div> </div> The height of .parent is set to 100%. T ...

Determine the vertical dimension of a child division once it has been integrated into an HTML document

My goal is to create a website with multiple pages without having to recreate the toolbar for each page. To achieve this, I have created a separate HTML file and CSS file specifically for the toolbar. On each page, I simply import the toolbar using the fo ...

Creating variable-width DIVs to simulate TABLE column behavior using CSS

I've been struggling for hours trying to recreate the same functionality as an old HTML table layout using DIVs. Inside a parent DIV, I have a simple three-column setup: Column-1 contains text and should be as narrow as possible without wrapping (m ...