Custom-designed background featuring unique styles

I have implemented the following code to create a continuous running banner: 

<style>
  #myimage {
    position: fixed;
    left: 0%;
    width: 100%;
    bottom: 0%;
    background:url("http://static.giga.de/wp-content/uploads/2014/08/tastatur-bildschirm-senkrechter-strich.jpg") repeat-x scroll 0% 0% / contain;
  } 
</style>

<div id="myimage">.</div>



<script>
    var offset = 0
    setInterval(function() {
        offset +=1
        document.getElementById("myimage").style.backgroundPosition = offset + 'px 0px';
    },50)
</script>

https://i.stack.imgur.com/0kzny.png

Now I want every image to fill 100% of the screen size.

I considered simply adding the attribute ...

background-size: 100%;

... but it doesn't seem to work that way.

How can I ensure that each image's width is set to 100% of the screen's width without removing my existing style attributes?

javascriptjqueryhtmlcss

Answer №1

Adjust the height of the container while maintaining the image's aspect ratio:

let currentPosition = 0;
    setInterval(function() {
        currentPosition += 1;
        document.getElementById("myimage").style.backgroundPosition = currentPosition + 'px 0px';
    }, 50);
#myimage {
    position: absolute;
    top: 0%;
    width: 100%;
    bottom: 0%;
    background:url("http://static.example.com/image.jpg") repeat-x scroll 30% 50% / cover;
    
    /* The image dimensions are 800x600 so set padding for correct aspect ratio*/
    padding-bottom: 75%;
    background-size:contain;
  }
<div id="myimage"></div>

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 PHP file on my local WAMP server seems to be having trouble retrieving inputs from the HTML's GET or POST methods

<!DOCTYPE HTML> <html> <body> <form action="testrun.php" method="GET"> Name: <input type="text" name="name"><br> E-mail: <input type="text" name="email"><br> <input type="submit"> </form> </bo ...

phphtmlformswamp

Unlimited scrolling gallery with multiple rows

I am looking for a way to create a multi-row infinite loop scrolling gallery using html, css, and javascript. Can anyone help me with this? ...

javascriptjqueryhtmlgalleryinfinite

Determining the distance between two points in miles using Next.js

Are you familiar with the concept of geographical coordinates? Take for example these two points: point1 = {lat: 40.6974034, lng: -74.1197636} point2 = {lat: 42.694034, lng: -75.117636} My goal is to find the distance between these two poi ...

javascriptnext.jsdistance

Modifying Data with MomentJS when Saving to Different Variable

After attempting to assign a moment to a new variable, I noticed that the value changes on its own without any modification from my end. Despite various attempts such as forcing the use of UTC and adjusting timezones, the value continues to change unexpec ...

javascriptangulartypescriptmomentjs

A guide on incorporating a JavaScript plugin using Vue.use() into a TypeScript project equipped with typings

Currently, I am facing an issue while attempting to integrate Semantic-UI-Vue into my Vue project. Upon trying to execute Vue.use(SuiVue), the following error message is displayed: Argument of type 'typeof import("semantic-ui-vue")' is not ass ...

javascripttypescriptvue.jsvuejs2semantic-ui

Solving the Problem of Input Values with Jquery and Javascript

I am facing a challenge in making a div vanish with the class 'backarea' while simultaneously displaying another div with the class 'successLog' on the screen. The catch here is that I want this transition to occur only when specific us ...

javascriptjqueryhtmlcssinput

Ways to have a div show up and stay in place as you scroll down?

How can I make the div "full" sticky after scrolling down 200px, and revert to display none when scrolling back up? Is there a way to accomplish this using JavaScript? In the code snippet below, you will find three divs: header, header2, and header3. The ...

javascriptjquery

AngularJS routing with html5mode causing 404 error when using htaccess

I am currently working on my very first angularjs application using version 1.6x, and I am encountering some 404 errors with my router. Here is how my router is set up: app.config(function($routeProvider, $locationProvider) { $locationProvider.html5M ...

javascriptangularjsapache.htaccess

Navigate a user upon completion of an update

My webpage requires users to click an update link, which triggers a process of fetching data from an API that takes a few minutes. I don't want users to have to constantly refresh the page to know when the process is complete and they can continue. Is ...

phpjavascriptjquery

Angular Controller is not able to retrieve the Route Parameter, resulting in a 404

Currently working on my very first web app using Node.js and AngularJs. I've encountered a roadblock with the following code: var app = angular.module('Martin', ['ngResource','ngRoute']); app.config(['$routeProvide ...

javascriptangularjsnode.js

What is the correct way to utilize ng-if/ng-show/ng-hide to hide or show HTML elements within the app.run function

I am currently working on developing an app that loads views correctly. HTML: <body> <loading outerWidth='1000' outerHeight='1000' display='isReady'></loading> <div class='wrapper' ng-sho ...

javascriptjqueryhtmlangularjs

What is the best approach to defining a type for a subclass (such as React.Component) in typescript?

Can someone help me with writing a type definition for react-highlight (class Highlightable)? I want to extend Highlightable and add custom functionality. The original Highlightable JS-class is a subclass of React.Component, so all the methods of React.Com ...

javascriptreactjstypescriptnpmtypescript-typings

Replace pipeline function during component testing

During my unit testing of a component that utilizes a custom pipe, I encountered the need to provide a fake implementation for the transform method in my test. While exploring options, I discovered that it's feasible to override components, modules, ...

javascriptangularunit-testing

"Introduce a time delay for the hover effect on the navigation dropdown

I've been struggling to find a way to add a delay to this hover effect. If you visit , you'll see a menu at the top that displays panels when hovered over. The CSS code to make them appear is: #navigation li:hover > .panel { display: blo ...

jquerycss

What are the best practices for iterating through asynchronous generator functions?

Suppose we have an asynchronous generator: exports.asyncGen = async function* (items) { for (const item of items) { const result = await someAsyncFunc(item) yield result; } } Can we apply mapping to this generator? In essence, I am attempting ...

javascriptnode.jsiteratormap-functionasync-iterator

What is the best way to assign a class to objects with a count greater than a

Can someone assist with editing a foreach loop to add a class to divs only if the number of divs is greater than 3, without affecting those with fewer divs? @if(!empty($property->testimonials)) @foreach($property->testimonials as $testimonial) ...

phphtmlfor-loopforeachlaravel-blade

Django Dynamic Field Error: Please choose a valid option from the available choices

My modeling dilemma revolves around the following structures. class Category(MPTTModel): name=models.CharField(max_length=75,null=False,blank=False, unique=True) parent=TreeForeignKey('self', null=True, blank=True, related_name='chi ...

jqueryajaxdjangodjango-forms

Is there a way to access the sqlite3 database file in electron during production?

Currently, I have an electron application that I developed using the create-electron-app package. Inside the public folder of my Electron app, both the main process file and the sqlite3 database are located. During development, I can access the database ...

javascriptnode.jssqliteelectroncreate-react-app

Retrieve the id of the anchor tag that was selected upon clicking, and then dynamically change the content of another div

Seeking guidance on how to dynamically change the content of a div element based on which anchor tag is clicked. Below is the HTML structure and JavaScript function I have attempted: HTML: <div> <a id="a1" href="javascript: changeDiv();">tag1 ...

javascripthtml

Learning how to interpret data within configuration files (.properties) using JavaScript

I'm trying to retrieve data from a configuration file (.properties) in my code. The structure of my configuration file is as follows: maxTime = 60 upVotePostMaxTime=60 However, I am unsure of how to read this configuration file using JavaScript. Is ...

javascriptjquery