Change the position of an HTML image when the window size is adjusted

My web page features a striking design with a white background and a tilted black line cutting across. The main attraction is an image of a red ball that I want to stay perfectly aligned with the line as the window is resized, just like in the provided gif.

https://i.sstatic.net/6vnpF.gif

I'm wondering if there's a way to achieve this effect using HTML/CSS alone, although I am open to incorporating JavaScript for a more straightforward solution.

Below is a snippet of my current code:

HTML: 
<html>
  <body>
    <img class="image" src="./assets/ball.png">
  </body>
</html>

and the CSS:

    body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      height: 100vh;
      width: 100%;
      flex-direction: column;
      background-image: url('./assets/bg.png');
      background-repeat: no-repeat;
      background-size: cover;
    }

    .image {
      margin-top: 42%;
    }
javascripthtmlcss

Answer №1

To ensure that the ball stays on the line, it's important to render them together rather than separately. Currently, you are rendering the ball in HTML and the line in CSS.

One effective solution would be to utilize SVG to render both elements at once.

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;  
}
svg {
  position: fixed; /* prevents the SVG's width being constrained by the viewport */
  width: 3000px;
  height: 200px;
}
line {
  stroke: black;
  stroke-width: 2px;
}
circle {
  fill: red;
}
<svg viewBox="-1500 -100 3000 200">
  <line x1="-1500" y1="-100" x2="1500" y2="100" />
  <circle cx="0" cy="-21" r="20">
</svg>

Once you have implemented this code snippet, make sure to click the full page link to thoroughly test its responsiveness.

Answer №2

Why not include a bouncing ball in your image to make it more dynamic? :)

To achieve this, you can launch Photoshop, incorporate a blue ball into the picture, and then save it as a fresh file.

If you prefer to keep the ball separate from the image, here's an alternative approach...

Design a blue ball using vector graphics and assign it the specific coordinates you want:

<svg height="300" width="300" style="position:absolute; left:50%; top:20%">

<circle cx="120" cy="120" r="80" fill="blue" />

</svg>

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

Removing the Bootstrap-container is a task that can be specifically targeted for larger screens

I need assistance with removing the container from my large screen while keeping it on small and medium screens. I have tried searching for a class like container-lg-none, but to no avail. Any help would be greatly appreciated. Here is the code snippet i ...

htmlcssbootstrap-5

Overwriting values in a JavaScript array

Within my function, I am running the code snippet below: stores = []; console.log('in stores d.length is ', districts.length); districts.forEach( function ( dis ) { dis.store.forEach( function( store ) { store.structure = dis.structu ...

javascriptarraysnode.js

Step-by-step guide to selecting a specific point on an HTML5 canvas using Python's selenium webdriver

Looking to automate interactions with a simple HTML5 application on a website using Selenium webdriver in Python with Firefox on Linux. The challenge is clicking a button on an HTML5 canvas, then dragging one or two objects around the canvas post-button cl ...

javascriptpythonhtmlseleniumbrowser-automation

Xpath is effective in Chrome Dev Tools, but does not seem to be functioning properly in RS

I am currently engaged in a project that involves extracting an HTML table containing specific text ("Current Prison History:") from various URLs that vary based on individual ID. I have attempted to utilize CSS selectors for this task, but encountered a c ...

htmlrseleniumxpathrselenium

Heroku App Breaks Down - Fails to Render Static HTML Content (Express Server)

Despite my best efforts, I keep encountering this persistent error on Heroku whenever I attempt to serve a static HTML page with some basic JS, images, and CSS. I diligently followed all the advice from SO, made adjustments to index.js, restructured files, ...

htmlnode.jsexpressheroku

Challenges with the Placement of Buttons

I am facing an issue with the code below: document.addEventListener("DOMContentLoaded", function(event) { // Select all the read more buttons and hidden contents const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenConten ...

javascripthtmljquerycss

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

Is it possible to implement a dropdown menu on my sample-page using javascript/jquery in order to switch between a custom layout and a bootstrap layout? ...

javascriptjqueryhtmlcss

Error: The function window.intlTelInput is not recognized within the ReactJS framework

I am currently learning ReactJS and encountering an issue when using jQuery with React JS for intlTelInput. I have installed npm jQuery and imported all the necessary code. Additionally, I have included all the required CSS and jQuery links in my index.htm ...

javascripthtmljquerycssreactjs

How can I transfer data from a MySQL callback function to a global variable?

I'm still in the learning stages of using nodejs and working on getting more comfortable with it. My goal is to retrieve a user from a database and store it in a variable, but I'm having trouble storing it globally. Though I can see that the conn ...

javascriptmysqlnode.jscallbackasynccallback

Is it feasible to establish a direct link between an Angular.js application and Dynamodb? Are there any other solutions available to eliminate the need for a backend

Personally, I believe that removing the backend could be a successful strategy for addressing sysadmin/scale issues. Do you agree with this approach? Is there a proven method for eliminating the backend in web applications that require database access? I& ...

javascriptangularjsweb-servicesamazon-dynamodb

React Scroll and Material-UI button active link not functioning correctly

Whenever the link goes to the correct page, I want to add a special background effect or change the font color. Despite trying to use CSS for this purpose, it didn't work as intended. If you want to take a look at my code on codesandbox, follow this ...

javascriptcssreactjsmaterial-uireact-scroll

The React application is experiencing difficulties in receiving the response data (JSON) from the Express server, despite the fact that

When making POST or GET requests to our Express server, served through PM2 on EC2, Postman receives the complete response with JSON data. However, our front end React app (both locally and deployed via CF) only gets the response status code and message. Th ...

javascriptnode.jsreactjsexpressamazon-ec2

Display a div when hovering over another div

I have a menu that looks like this: https://i.sstatic.net/WqN33.png and I want to create a hover effect where another div shows up over each item, similar to this: https://i.sstatic.net/JRaoF.png However, I can't seem to figure out how to implemen ...

javascripthtmlcssvue.js

Create genuinely private methods within an ES6 Module/Class specifically for use in a nodejs-exclusive environment, ensuring that no data is exposed

Although there are no true private methods within ES6 classes, I stumbled upon something interesting while experimenting... While it's not possible to completely hide object properties, I attempted to follow OOP principles by dividing my classes into ...

javascriptnode.jsecmascript-6es6-classes6-modules

Obtain Relative URL with the help of Selenium using the PhantomJS driver

Utilizing Selenium along with the Phantom JS driver, I am attempting to load an HTML page and extract all of the HREF links from it. The issue arises when PhantomJS provides absolute URLs after resolving them entirely. My specific requirement is to extrac ...

javascriptselenium-webdriverphantomjs

Is it possible to represent a recursive variable using CSS?

When it comes to the html structure: <body> <div> <div> <div> ... </div> </div> </div> </body> Is there a method to create recursive variables that utilize their parent's value: body ...

htmlcsscss-variables

TypeOrm is struggling to identify the entities based on the directory path provided

Currently, I am utilizing TypeORM with NestJS and PostgreSql to load entities via the datasource options object. This object is passed in the useFactory async function within the TypeORM module as shown below: @Module({ imports: [TypeOrmModule.forRootAsy ...

javascriptnode.jstypescriptnestjstypeorm

Is it possible to invoke this JavaScript function like this?

Is there a way to call a function like item_edit.say hello by passing it as a string on the window object (similar to the last line in the snippet below)? var arc={ view: { item_edit: {} } }; arc.view.item_edit={ say_hello: function(){ alert(' ...

javascript

Utilize node.js on your local machine and leverage gulp to monitor any modifications

I recently copied a repository from https://github.com/willianjusten/bootstrap-boilerplate and followed these steps. git clone git://github.com/willianjusten/bootstrap-boilerplate.git new_project cd bootstrap-boilerplate npm install gulp The gulp comman ...

javascriptnode.jsnpmgulp

How can you transfer array elements to a new array using JavaScript?

I have a task to transform the fields of an array received from one server so that they can be understood by another server for upload. My approach involves first retrieving and displaying the original field names from the initial server's array to al ...

javascriptarraysangularobject