I am trying to get the slideshow images from JS and resize them in SCSS

Question

The slideshow images in JS are blown up past the references of the screen. I am attempting to resize the said images in SCSS to fit all types of screens. Please bear with me as I am still learning as I go.

JavaScript

var i = 0;
var images = [];
var slideTime = 3000; // 3 seconds

images [0] = 'https://images.unsplash.com/photo-1639254241780-09c10527eb37?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4™jY×ODR8&ixlib=rb-4.0.3&q=85';
images [1] = 'https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzMTN8&ixlib=rb-4.0.3&q=85';
images [2] = 'https://images.unsplash.com/photo-1697490251825-0d6f7f3f7254?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDUMjYzOT18&ixlib=rb-4.0.3&q=85';

function changePicture() {
  document.body.style.backgroundImage = "url(" + images[i] + ")";

  if (i < images.length - 1) {
    i++;
  } else {
    i = 0;
  ｝
  setTimeout (changePicture, slideTime);
｝
window.onload = changePicture;

code pasted from this png

SCSS

I am not sure what is the correct way to reference the code from above from JS in SCSS so here's what I've tried:

.images>0>"https://images.unsplash.com/photo-1639254241780-09c10527eb37?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYxODR8&ixlib=rb-4.0.3&q=85";

.images>1>"https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzMTN8&ixlib=rb-4.0.3&q=85";

.images>2>"https://images.unsplash.com/photo-1697490251825-0d6f7f3f7254?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzOTl8&ixlib=rb-4.0.3&q=85"; { background-size: cover; }

Answer 1

A better way to go around this, would be to pass the image URL's to an <img> tag within your HTML rather than setting the background of the body of the whole document to these images. That way you'll be able to add a class to that <img> tag and you'll be able to change the height and width of the images in your SCSS.

A tip for resizing images at all screen sizes is to use 'em' or '%' rather than pixels as these will scale the images along with the view port.