The issue I'm facing is with the Infinite Scrolling Background Image zooming out of the page width. Any suggestions

I am working on a page design that requires an Infinite Scrolling Background Image with a looping effect to create the illusion of infinity. On top of this background, a content card is displayed. However, the image extends beyond the page width on smaller screens, causing horizontal scrolling and layout issues.

Below is the React code snippet:

"use client";
import React from "react";

// Remaining code omitted for brevity...

export default Landing;

Here is the accompanying CSS used:

.infinite-scrolling {
  // CSS properties for the infinite scrolling background image...
}

.glassy {
  // Styling properties for glassy effect...
}

@keyframes slide {
  // Keyframes animation for the sliding effect...
}

You can view the code demo here.

The goal is to achieve a seamless looped scrolling background without expanding the page horizontally on smaller devices. If you have any suggestions or know of a package that can help with this issue, your input would be greatly appreciated. Thank you!

Answer №1

If you're looking to animate the background-position specifically, rather than the image container itself, you can circumvent dealing with container size issues and potential overflow on smaller screens.

Below is the CSS code snippet that could assist you:

.infinite-scrolling {
  background: url("https://fastly.picsum.photos/id/641/200/200.jpg?hmac=9pd71nRRRsT7TXf0zn0hQ6tW6VQnQ-UtL1JXDhJZB8E") repeat-x;
  background-size: auto 100%; /* Scale the image to fit the height */
  height: 200px; /* Height of the image */
  width: 100%; /* Full width of the container */
  animation: slide 1s linear infinite; /* Adjust duration for smooth transition */
  filter: grayscale(80%);
  top: 0;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200px 0;
  }
}

.glassy {
  background: rgba(27, 26, 85, 0.35);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

Feel free to check out the sandbox along with a preview.

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

Align a Bootstrap button to the bottom of a flex-box column

After exploring numerous online discussions in search of a solution to my issue, I have come up short. Applying 'align-self: flex-end' to the .reveal-btn only moves the button to the right, whereas using 'margin-top: auto' has proven in ...

How to add vertical bars within ng-repeat in AngularJS

I attempted to retrieve values from an array variable using ng-repeat within unordered lists. Although the values are displaying correctly and everything is functioning properly, I added vertical bars after each value to represent sub-categories on my page ...

Ensuring Quick Response Times When Incorporating Personalized Text Styles into Twitter Bootstrap

Currently, I am experimenting with incorporating my custom class titled "article-title" which is significantly larger than the default H1 font size in Twitter Bootstrap. Can someone provide guidance on the necessary steps to ensure responsiveness? My goal ...

The module "@uploadthing/react" does not contain the exported member "FileWithPath"

'use client' import type { FileWithPath } from '@uploadthing/react' import { useCallback, Dispatch, SetStateAction } from 'react' import { useDropzone } from '@uploadthing/react/hooks' import { generateClientDropzon ...

How to Display MUI Autocomplete in React with freeSolo Mode and Dropdown Arrow

Just jumping into MUI and could use some guidance. I'm trying to implement <Autocomplete freeSolo ...> with a dropdown arrow icon similar to combo-box mode. https://i.sstatic.net/TEKP2.png Seems like the popupIcon and forcePopupIcon props are ...

Implementing CSS styles on selected elements using jQuery

My current HTML layout looks like this.. <div class="container> <div class="panel"> <div> <div> <div> <img class="match" src="myimage.jpg"> &l ...

Step-by-step guide: Logging into next js with auth0

Having trouble logging in to a Next.js app with Auth0? I followed the quickstart guide on the Auth0 website, but I'm encountering an error on the login page. <a href="/api/auth/login">Login</a> This is pages/api/[...auth0].js i ...

Tips for customizing the appearance of the day button in a React Material-UI date picker

In my React project, I am using material-ui date picker and I am looking for a way to customize the styling of the day buttons. Specifically, I want to change the text color of the available days. By default, as seen in the screenshot, the text color is bl ...

Function in React not being successfully passed down between functional components

I have been accustomed to using class components and now I am transitioning into functional components in order to become more proficient with hooks. However, I have encountered an issue where I am struggling to pass a function from one functional compone ...

What is causing my axios request to not retrieve the correct data?

My axios instance is set up to connect to an API that has a login route. When I test the API using Postman, everything works perfectly and it returns JWT access and refresh tokens for valid credentials. However, when I try to login through my app using axi ...

In mobile browsers, the text within the <pre> tags appears extremely small. How can I adjust the font

My issue is with preformatted text that displays correctly on desktop browsers but appears very small on mobile devices in comparison to regular text. Adjusting the size using ems or percent causes it to be too large on desktop screens. Despite searching e ...

Tips for incorporating a hyperlink within a react component

I'm looking to include social media links in my React project, but the code I have isn't working. Can someone help me identify what mistake I might be making? import {L10n} from "@pythonbuddha/l10n"; ... ... <span className="soc ...

What's preventing me from using just one comparison condition in TypeScript?

The issue at hand is quite simple: An error occurred because I tried to compare a number with a 'Ref<number>' object. It seems ridiculous that I can't compare two numbers, but as I am new to Typescript, I would greatly appreciate some ...

Prevent dragging functionality after being dropped onto a droppable area

I am currently working on a drag and drop project and have encountered a minor issue. My goal is to disable the draggable item after it has been dropped onto the droppable area. I have created a function called disableDrag, but I am receiving an error in t ...

Achieving priority for style.php over style.css

Having trouble with theme options overriding default CSS settings in style.css. Here's what I have in my header.php: <link rel='stylesheet' type='text/css' media='all' href="<?php bloginfo( 'stylesheet_url&apo ...

What is the best way to implement an OR filter in the DevExtreme React Grid Table using either FilteringState, LocalFiltering, or a

According to a past issue #499 that is now closed on the devextreme-reactive github repository, I am interested in implementing compound filtering functionalities within the Grid/TableView components. Currently, there are two examples of filtering compone ...

Stack pictures on a slender DIV

I am trying to create a vertical line inside a DIV container. After that, I want to add an image on top of the vertical line (see attached picture for reference). This is what my current source code looks like: <div style="background-color:gray;width ...

How to create a self-contained div in VueJS using Tailwind CSS without affecting other elements

I'm feeling completely overwhelmed right now. Attached is a picture showing the issue I'm facing: The user list layout is on the right The chat content in the middle should be scrollable vertically The bottom div should stay fixed in place witho ...

Guide to changing the border color in a Material-UI TextField component styled with an outline design

To complete the task, utilize the Material UI outlined input field (TextField component from "@material-ui/core": "^4.12.2",) and apply a custom blue color style to it. Here is the outcome of my work: https://i.sstatic.net/lw1vC.png C ...

Issues with Popover Trigger in React when using Chakra UI

https://i.sstatic.net/FTQ4r.png Whenever I click on this profile component, the popover should be triggered. However, when wrapping the children of <PopoverTrigger>...code</Popovertrigger> in <PopoverTrigger><ProfileComponent/>< ...