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

Insert the URL into JavaScript for further processing

Greetings, everyone! I've encountered an issue with a script in my Spring MVC application that is supposed to add an entry to a table. $(document).ready(function () { $('#saveSubject').submit(function (e) { $.post('/unive ...

javajqueryajaxjspspring-mvc

I am puzzled as to why it is searching for an ID rather than a view

Currently, I am attempting to navigate to a specific route that includes a form, but for some unknown reason, it is searching for an id. Allow me to provide you with my routes, views, and the encountered error. //celebrities routes const express = requir ...

javascriptnode.jsexpressrouteshandlebars.js

When using JQuery's :first selector, it actually chooses the second element instead of the first

I'm facing an issue with a JQuery script that makes an AJAX request to the following URL https://djjohal.video/video/671/index.html#gsc.tab=0, which holds information about a video song. My goal is to extract and retrieve all the details from the HTM ...

javascriptjqueryhtmlajaxselector

Have the events finished loading after using the gotoDate function in fullcalendar?

I have a scenario where I need to change the view by calling gotoDate and then apply additional classes using jQuery to selected events after clicking a button. The issue arises because the events are loaded via ajax, causing the addition of classes to oc ...

jqueryfullcalendar

Delete elements with identical values from array "a" and then delete the element at the same index in array "b" as the one removed from array "a"

Currently, I am facing an issue while plotting a temperature chart as I have two arrays: a, which consists of registered temperature values throughout the day. For example: a=[22.1, 23.4, 21.7,...]; and b, containing the corresponding timestamps for eac ...

javascriptarrays

What is the most effective method for implementing a fallback image in NextJS?

Lately, I've been immersed in a NextJS project that involves utilizing the YoutubeAPI to retrieve video details, such as thumbnail URLs. When it comes to fetching a full resolution image, the thumbnail URL typically follows this format: https://i.yti ...

javascriptreactjsnext.jsyoutube-apinextjs-image

What is the process for launching a new terminal within Node.js?

I'm seeking advice on creating a secondary window in my node.js application where I can output text separate from the main application. Imagine having a main window for displaying information and a secondary window specifically for errors that closes ...

javascriptnode.js

I tried running the sample program from the website in mongoose, but I encountered a persistent error: "TypeError: fluffy.speak is not a function."

const mongoose = require('mongoose'); main().catch(err => console.log(err)); async function main() { await mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true }); console.log("Connection successfu ...

javascriptnode.jsmongodbmongoose

Issues connecting tables to Knockout group

I seem to be encountering some difficulties with the Knockout table bindings in my code. Here is a snippet that I am struggling with: Snippet: $(function () { var FileObject = function(id, name) { this.id = id; this.name = name; ...

javascriptknockout.js

how to use ajax to retrieve a value returned by a php function

I have two different files, one named index.php and the other called get_content.php. Strangely, I am unable to display anything on the get_content.php file. I am now left pondering where the issue might be - in index.php or get_content.php? To view the F ...

phpjquerymysqlajax

Exploring the functionality of the readline module using a simulated command-line

I am currently working on developing a unit test for a module that utilizes the "readline" functionality to interpret standard input and provide standard output. Module: #!/usr/bin/env node const args = process.argv.slice(2) var readline = require(' ...

javascriptnode.jsstreamcommand-line-interfacenode-streams

Importing external components from the parent directory in Next.js is a seamless process

I am trying to import react components from an external directory called common into the web-static directory while using nextjs. However, I keep encountering an error that says: Module not found: Can't resolve 'react' in '/Users/jakub ...

javascriptreactjswebpacknext.jsvercel

Master the art of keeping track in just a single line

I need to ensure these tabs stay in a single line and remain responsive for mobile devices. Below is the code snippet: <div class="navbar"> <div class="navbar-inner"> <ul class="nav nav-tabs"> <li class="active"& ...

htmltwitter-bootstrap

Reduce the size of a container element without using jquery

In my Angular application, I have structured the header as follows: -- Header -- -- Sub header -- -- Search Box -- -- Create and Search Button -- -- Scroll Div -- HTML: <h1> Header </h1> <h3> Sub header </h3> <div class="s ...

javascripthtmlcssangulartypescript

What is the best way to allocate a unique color to every item within an array?

I've been working on some JavaScript code that pulls a random color from a selection: const colors = [blue[800], green[500], orange[500], purple[800], red[800]]; const color = colors[Math.floor(Math.random() * colors.length)]; Within my JSX code, I ...

javascriptcssreactjscolors

Jquery's .load() function lags by one step

On a webpage, I have a section that is generated in the following way. <table> <c:forEach items="${personList}" var="person"> <tr> <td> </td> <td> <h2 s ...

jqueryspring

Utilizing AngularJS to iterate through an array of dictionaries

Within a specific section of my HTML code, I am initializing a scope variable like this: $scope.my_data = [ { c1: "r1c1", c2: "r1c2", c3: "r1c3", ...

javascriptangularjs

Header with a dropdown select option

In the process of developing a monitoring system, I am in need of a feature that allows users to select varying numbers of days. Here is the desired style: Previous [Dropdown Selection] Days https://i.sstatic.net/ysk6X.png Ideally, I do not want any bor ...

htmlcss

Getting the most out of option select in AngularJS by utilizing ng-options

I'm currently working with AngularJS and I am interested in utilizing ng-options for a select tag to showcase options organized under optgroups. Here is the array that I intend to use in my select option: $scope.myList = [ { "codeGroupComp ...

javascripthtmlangularjs

VSCode API alerts user when a rejected promise is left unhandled for more than a second

After working diligently on developing my first vscode extension, I encountered a roadblock when the debugger halted the execution of my extension. As a newcomer to JavaScript, I suspect that I may be overlooking something related to "thenables" that is c ...

javascriptapivisual-studio-codevscode-extensions