Creating variables in JavaScript for background positions can be done by utilizing the backgroundPosition property

I'm a beginner in programming and I'm currently working on creating a variable for my background-position in Javascript/CSS. A developer friend of mine initially wrote the code, but I'm having difficulty assigning my background-position to a variable.

<style>
.frame{
  width: 354.1875px;
  var viewWidth = 354.1875px;
  height: 415px;
  background-image: url(https://website.com/image.jpg);
  background-repeat: no-repeat;
  background-position: 0 50%;
}
.frame1 {
  background-position: -1*viewWidth 50%;
}
.frame2 {
  background-position: -2*viewWidth 50%;
} 
.frame3 {
  background-position: -600px 50%;
}

While attempting to use my variable in frames 1 and 2 as researched, it doesn't seem to be functioning properly. Can someone provide assistance with this issue?

javascriptjquerycss

Answer №1

Have you ever considered using CSS Custom Properties? They can be quite helpful in improving the efficiency of your code.

CSS custom properties, also known as CSS variables or cascading variables, are defined by CSS authors to store specific values that can be reused multiple times within a document.

:root {
  --viewWidth: 354.1875px;
}

.frame{
  width: var(--viewWidth);
  height: 415px;
  background-image: url(https://website.com/image.jpg);
  background-repeat: no-repeat;
  background-position: 0 50%;
}
.frame1 {
  background-position: calc(-1 * var(--viewWidth)) 50%;
}
.frame2 {
  background-position: calc(-2 * var(--viewWidth)) 50%;
} 
.frame3 {
  background-position: -600px 50%;
}

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

Managing multiple Sequelize DB connections in NestJS: A guide

I recently came across the example in the NestJS documentation regarding setting up a Sequelize DB connection. I'm curious about how to connect to multiple databases using Sequelize and TypeScript with NestJS. Can anyone provide guidance on this? ...

javascriptnode.jstypescriptnestjssequelize-typescript

JavaScript Tutorial: Simplifying Character Ranges for Conversion

I am currently working on adapting code I found here to create a virtual keyboard for a foreign alphabet using an online textarea. Below is the modified code: <textarea id="txt"></textarea> <script src="https://ajax.googleapi ...

javascriptjquery

Sorting of dates in mui-datatables is not accurate

I have dates that are formatted using moment.js, for example ("Sat, Feb 22, 2020 12:55 PM") I retrieve them from firestore, and they appear to come in correctly as I first sort them in descending order. forms.sort(function(left, right) { return moment.u ...

javascriptjsonsortingdatemui-datatable

Steps to turn off Google Analytics while working on a local server:

I implement this code for tracking with Google Analytics, <noscript> <iframe src="//www.googletagmanager.com/ns.html?id=GTM-KCQGLT" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> as well as this ...

javascriptphpangularjsgoogle-analytics

Remove every other element from a JSON Array by splicing out the even-numbered items, rather than removing matching items

After receiving a JSON Array Output from a REST API, I am using ng-repeat to display the items on an HTML page. The structure of the received data is as follows: var searchresponse = [{ "items": [{ "employeeId": "ABC", "type": "D", "alive": "Y ...

javascriptjqueryangularjsarraysjson

What is the process for implementing Sequelize to manage and modify multiple tables simultaneously?

I am currently working on developing the back-end with DB using Sequelize ORM. My main challenge is creating or updating data in multiple tables simultaneously. Below are some examples of what I am trying to achieve: //Tables const main = sequelize.define ...

javascriptmysqlsqlexpresssequelize.js

Unable to modify document value in MongoDB using Node.js

Currently, I am attempting to fetch the value of a field form that is being sent to a subroute and utilize it to update a database collection. My ability to retrieve the form value and manipulate it is working fine; however, I encounter an issue when I sol ...

javascriptnode.jsjsonmongodbobject

Learn how to use Bootstrap to style your buttons with centered alignment and add a margin in between each one

Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...

htmlcssbootstrap-5

What is the best way to group data by a specific value within a nested object when using ReactJS material-table?

I have a unique scenario where I possess an array of individuals featuring a nested object known as enterprise. My objective is to effectively group these individuals by the value of company.name within the confines of the Material-Table. const people = [ ...

javascriptreactjsmaterial-uimaterial-table

tips for optimizing javascript file caching

https://i.stack.imgur.com/UhWD1.pngMy web application was created using "pug" technology about 9-8 years ago, and more recently, pages have been added in an innovative framework (vue.js). However, whenever there is a transition between an old pug page and ...

javascriptvue.jsnginxwebpackpug

Utilize the ::before pseudo-element exclusively for the initial node

Here is the text I need to generate : https://i.sstatic.net/HzKP9.png This represents my HTML code : <!DOCTYPE html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="style5.css"> <title& ...

htmlcss

Issue with error handling in Node and MongoDB when using Express, Mongoose, and the 'mongoose-unique-validator' plugin

I am facing an issue with the 'mongoose-unique-validator' plugin when trying to handle Mongo ValidationError in my custom error handler. Despite other errors being handled correctly, this specific one is not triggering the desired response from m ...

javascriptnode.jsmongodbexpressmongoose

Struggling to transmit data to material dialog in Angular2+

I am facing an issue with my Material Dialog not working properly. Can anyone point out what I might be missing? product-thumbnail.ts I will use this to trigger the dialog export class ProductThumbnailComponent implements OnInit { @Input() product: Pr ...

javascriptangulartypescriptangular-material

Having problems with the cache function not functioning properly with jQuery's `.load()`?

I have implemented a standard PHP cache script on my page.php file. $cache = 'the_location/'.$id.'.html'; $expire = time() -3600 ; if(file_exists($cache) && filemtime($cache) > $expire) { readfile($cache); ...

phpjquery

Using React.js to create table cells with varying background colors

For my React application, I am working with a table that utilizes semantic ui. My goal is to modify the bgcolor based on a condition. In most cases, examples demonstrate something like bgcolor={(condition)?'red':'blue'}. However, I requ ...

javascripthtmlreactjssemantic-ui

AngularJS secureHTML verify image click event

Just starting out with AngularJS and hoping for some assistance :) I have a div that has the details of an activity, formatted in HTML. To display this content correctly, I am using trustAsHTML: <div class="description-div"> <div ng-bind-htm ...

javascriptangularjsionic-framework

How can I achieve the same functionality as C# LINQ's GroupBy in Typescript?

Currently, I am working with Angular using Typescript. My situation involves having an array of objects with multiple properties which have been grouped in the server-side code and a duplicate property has been set. The challenge arises when the user updat ...

javascriptarraysangulartypescript

Remove search results in real-time

I'm currently working on implementing a search feature for a web application. While I have made some progress, I am facing an issue with removing items when the user backspaces so that the displayed items match the current search query or if the searc ...

javascriptajax

AngularJS: The requested resource does not have the "Access-Control-Allow-Origin" header

Currently developing my web application using AngularJS, I have a file named script.js which contains the following code: var module = angular.module('project', ['ngRoute']); // setting up our routes module.config(function ($r ...

javascripthtmlangularjsxmlhttprequestcors

Minicart.js - Products successfully added to cart but cart fails to appear on screen

Currently, I am facing an issue with my button click function that is supposed to add an item to the cart using the Minicart.js library from minicartjs.com. Although items are successfully being added to the cart upon clicking the button, the cart itself i ...

javascriptjqueryjquery-eventsminicart