The image appears uniquely sized and positioned on every screen it is viewed on

After reviewing the previously answered topics on the site, I couldn't seem to make the necessary adjustments. Despite setting the size and location in the css file, the large image remains centered and fitting for the screen. The "imaged1" class seems to be displaying a smaller visual in various locations and sizes. Could tweaking the codes help with this?view image here

.imaged1 {
    position: absolute;
    top: 80px;
    left: 240px;
    width: 65px;
    height: 65px;
    margin: 0 auto;
    -webkit-animation: spin 15s linear infinite;
    -moz-animation: spin 15s linear infinite;
    animation: spin 15s linear infinite;
    bottom: auto;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
<img class="center" img src="https://i.ibb.co/BsDB7nW/1.png">
<img class="imaged1" src="https://i.ibb.co/7p3bYLN/d1.png">

see another image here

click to view an additional image

cssmobilecss-positioncompatibility

Answer №1

Here is a code snippet that might be helpful:

    <div style="text-align: center;position: relative;width:50%;">
       <img class="center" img src="https://i.ibb.co/BsDB7nW/1.png">
         <img class="imaged1" src="https://i.ibb.co/7p3bYLN/d1.png">
    </div>

    .imaged1 {
    position: absolute;
    top: 36%;
    left: 40%;
    width: 19%;
    margin: 0 auto;
    -webkit-animation: spin 15s linear infinite;
    -moz-animation: spin 15s linear infinite;
    animation: spin 15s linear infinite;
    bottom: auto;
   }
   @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
   @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
   @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  .center {
   display: block;
   width: 100%;
   }

You can check this fiddle for a demonstration of the functionality

Here is a link to a related question that was asked previously

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

Mastering the art of horizontal alignment in forms

So, within my render function, the following code is used: render() { <div> <form id="one"> <TextField id="t1" ... /> <Button id="b1" /> </form> <div id="empty"><div ...

cssreactjsmaterial-ui

Unable to get the Gtranslate function to function properly within the drop-down menu

Currently, I am using Gtranslate.io languages on my website with flags displayed without a drop-down menu. Everything is running smoothly but now I am looking to enhance the user experience by placing the flags inside a drop-down list. I want English to ...

javascriptjqueryhtmlcss

Tips for adjusting the color of a row when hovering

Can I modify the row color on hover in material-table using props? Similar to this example. Appreciate your help. ...

cssreactjsmaterial-uimaterial-table

Please assist in changing the text color of the right side of my navigation bar to white with the help of Bootstrap

Is there a way to change the text color of my nav-bar to white, while keeping the background as 'primary-subtle' with Bootstrap? How can I override Bootstrap's default functions using CSS when combining these two styles? Here is the code sn ...

htmlcsstwitter-bootstrapbootstrap-modalbootstrap-5

Tips for incorporating your personal touch while utilizing Snipcart

I have created an ecommerce platform with GatsbyJS and Snipcart, but I am struggling to override the default theme provided by Snipcart. When I try to change the main default CSS through gatsby-config.js, it does not seem to work. Does anyone have a soluti ...

javascriptcssreactjssnipcart

Display the scrollbar on a flexbox container instead of the entire browser window

I'm curious about how to implement a scroll-bar on a div using flexbox CSS. To better illustrate the issue, I've provided an example below: * { box-sizing: border-box; } .flex-display { display: flex; align-items: stretch; height: 100 ...

htmlcssflexbox

Input Fields Will Not Resize Correctly in Some Browsers

When resizing a browser, the input fields do not resize properly and end up overlapping each other in the middle, causing distortion before the media script adjusts everything to 100%. The width of the text area set to 100% does not align with the forms. F ...

htmlcss

Animating toggles with JQuery

I am attempting to create a toggle effect for my div using this jQuery script: $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}; }, function() { $("div").animate({left:'0px'}; }, }); ...

javascriptjqueryhtmlcss

Customize your radio buttons to display as stylish boxes with Bootstrap

Check out my Fiddle here... The radio buttons are displaying correctly in the fiddle. <div class="element-radio" title="Do you want to float the text to the left, right, or not at all?"><h4 class="title" style="font-weight: bold;">Float (left ...

jquerycsstwitter-bootstrap

Above, there are two components with a scrollbar, while below there is a fixed div that remains in place when the screen

Just a heads up: below is an example with code of how I envision my interface to look, but I'm not sure if it's valid? I've been trying to create an HTML5/CSS interface that resembles the MIRC fullscreen layout (check out the image below) a ...

csshtml

Numerous websites with scroll-based navigation

I am currently building a unique website that includes scrolling in various directions without the use of a horizontal scrollbar. The design is similar to this image: https://i.stack.imgur.com/Ex2Bf.jpg. It is a one-page website where vertical scrolling ...

jqueryhtmlcssscroll

The div does not allow elements to be centered

I am facing an issue where elements are not centering on my div. I have tried numerous solutions (so many that I finally decided to create a Stack Overflow account), but nothing seems to work. Interestingly, the elements center on PC but for some reason, ...

htmlcss

Showing text beside an image within a division

In my div, I have an image along with a paragraph and h6 text. My goal is to position the text on the right side of the image without it wrapping underneath. I've experimented with floating both left and right, clearing, setting display to inline-blo ...

htmlcss

What is causing the input tag and button tag to appear on separate lines instead of together?

https://i.sstatic.net/AQiw3.png Here is my HTML and CSS code: <!DOCTYPE html> <html> <head> <title>assignment1</title> <meta charset="utf-8"> <meta name = "description" content="assignment"> <meta name = ...

htmlcss

Creating a tiny arrow using CSS

Can anyone advise on the best way to create a small arrow design using CSS? I have tried using a regular closing > arrow, but it's not quite what I'm looking for. https://i.stack.imgur.com/7uLMG.png ...

htmlcss

What is the best way to ensure these elements are neatly stacked one on top of the other?

Is there a way to center this text div while keeping it behind a fading image on the page? I've tried using margin-left: auto; and margin-right: auto; but it doesn't seem to work. Am I missing something? I'm testing everything in Chrome, ju ...

htmlcssalignmentcenter

Tips for shifting the cursor slightly to the right within an Input field

I created a div with an input field inside. I set the input field to autofocus, so when the page loads, the cursor is automatically focused on the input field. However, the cursor is touching the border of the input field, making it hard to see clearly. ...

htmlcss

Ways to eliminate bottom margin of text area in vuetify

Greetings, I am facing an issue with the following code snippet: <v-text-field :rules="rules" v-model="exam.title" class="exam-title ma-0 pa-0" ></v-text-field> <v-text-field class="exam-title ma-0 pa-0"></v-text-field& ...

cssvue.jsvuetify.js

What is the best way to center a div vertically on the page?

I've utilized Bootstrap 3 to create this row: <div class="cart"> <div class="row border"> <div class="col-md-8 desc pad itemsheight"> <div class="col-md-12"> <!-- react-text: 141 -->Docos <!-- /react ...

htmlcsstwitter-bootstrap-3

An error occurs when trying to modify the classList, resulting in an Uncaught TypeError for setting an indexed property

I am attempting to modify the classes of multiple sibling elements when a click event occurs. Some of these elements may have multiple classes, but I always want to change the first class. Below is the code that I created: let classList = event.currentTa ...

javascriptcsscss-selectors