We Keep Coding

Trying add class to element HTML doesn't work

I'm trying to add classes to different div, but I don't know why it doesn't work when I had created the class in the . sass file, and after that add using className, setAttribute or classList. But, when I do it in the same .ts file, works perfectly.
work
const tamano = 75;
const customMarker: HTMLElement = document.createElement('div');
customMarker.style.backgroundImage = `url(${this.greenShip})`;
customMarker.style.width = `${ tamano }px`
customMarker.style.height = `${ tamano }px`
customMarker.style.backgroundSize = '100%';
customMarker.style.cursor = 'pointer'
Doesn't work
const customMarker: HTMLElement = document.createElement('div');
customMarker.setAttribute('id', 'id_ship-on-time');
customMarker.setAttribute('class', 'ship-on-time');
console.log(customMarker.outerHTML);
customMarker.className = "ship-on-time";
class
.ship-on-time
background-image: url('../../../../../assets/icons/ship_green#3x.png')
background-size: contain
width: 70px
height: 70px
cursor: pointer
background-repeat: no-repeat
The result in the console is that

Ensure that your CSS class has the proper syntax:
.ship-on-time {
background-image: url('../../../../../assets/icons/ship_green#3x.png');
background-size: contain;
width: 70px;
height: 70px;
cursor: pointer;
background-repeat: no-repeat;
}

First, write your class in your .sass file
.ship-on-time {
background-image: url('../../../../../assets/icons/ship_green#3x.png');
background-size: contain;
width: 70px;
height: 70px;
cursor: pointer;
background-repeat: no-repeat;
}
then, if you want to add this class using the DOM, you need to use classList
customMarker.classList.add("ship-on-time");

Onmouseover function() goes to element's background-image:url() when mouse is over the <div>'s blank area without background-image?

I have two problems with this Javascript code. (credit to redditor u/Symboltic for suggesting to me the javascript code here. I appreciate his recommendation, just want to make it more applicable and versatile for more coding situations)
1st problem:
While the following javascript code does function, to go over to a background-image: url() via mouseover, unfortunately, mouseover on that 's background-color, or blank area in general, also goes over to the background-image:url().
For tags, how do I enable mouseover function(), which goes to the background-image:url(), when mouse is only on the background-image for the element?
2nd problem:
mouseover on the tag somehow does not go over to the background-images:url(), when I mouseover on the background-images in tag. Only rarely does this happen, if at all.
I'd like for this mouseover to be able to go to the background-images link in the body tag when the mouseover is on any of the the background-image: url()'s. (Regardless of how many background-image: url()'s that I might put in in the future.
Thanks for all your helpful answers.
Javascript code
document.addEventListener('mouseover', ({ target }) => {
const { backgroundImage } = getComputedStyle(target);
if (!backgroundImage.startsWith('url(')) return
let extractedUrl = backgroundImage
.slice(4, -1)
.replace(/^["']|["']$/g, '');
location.assign(extractedUrl);
});
HTML code:
<style>
#n{
background-position: 40% 45%;
}
.rap{
background-image: url("https://i.imgur.com/rDDRGYE.jpg");
background-attachment: sticky;
background-position: 77% 45%;
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-size: 40%;
color: lightcyan;
background-color: slategrey;
}
.ra{
background-image: url("https://cdn.boldmethod.com/images/blog/lists/2016/03/11-facts-about-the-harrier-jump-jet/4.jpg");
background-attachment: sticky;
background-position: 71% 90%;
height: 630px;
width: 100%;
background-repeat: no-repeat;
background-color: slategrey;
}
.os{
height: 5000px;
width: 9000px;
}
body {
background-image: url("https://files.yande.re/image/43e9ae14c74ba30fe78e66e30caea227/yande.re%20403366%20business_suit%20kono_subarashii_sekai_ni_shukufuku_wo%21%20megumin%20mishima_kurone%20raratina_dustiness_ford%20witch.jpg"),
url("https://i.ibb.co/1KL4Kdj/op.png");
width: 2820px, 1920px;
height: 2050px, 1080px;
background-position-y: 35%, 4%;
background-position-x: 0%, -3500%;
background-repeat: no-repeat;
background-color: azure;
}
</style>
</head>
<body>
<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg"
style="float:left; position: absolute; left:7800px; top:60px;">
<img src="https://i.imgur.com/AcodYxf.jpeg" width="183" height="229"
style="float:left">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423"
style="float:left">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg"
style="float:left; position: absolute; left:5000px; top:7000px;">>
<p><div class="rap"></div></p>
<div class="os"></div>
<div class="ra"></div>
</body>

Javascript Random Image Losing Styling

trying to set up random background images for my Jumbotron. Here is what I have so far.
function randomImage() {
var images = [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZwkTaJg28-Bxidgfm6FbHyEZ8D5ya1hGMroF05htuwvQqJsY9sQ",
"http://www.shunvmall.com/data/out/193/47120931-random-image.png",
"https://s-media-cache-ak0.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg"
];
var imgAmount = images.length
console.log(imgAmount);
var x = Math.floor(imgAmount * Math.random())
console.log(x);
document.getElementsByClassName('jumbotron')[0].style.background = "url(" + images[x] + ") no-repeat center center fixed";
}
window.onload = randomImage;
This works however on page load the styles defined in my css sheet seem to be overwritten?
.container .jumbotron {
background: url(/static/images/banner-1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
border-radius: 0px;
}
Is there a way to load these random images and keep the other styles already defined?
Also, another quick question.. I used getElementsByClassName[0] only because I couldn't get querySelector to work. How would I have written this with querySelector?

Changing the style.background property using JavaScript resets all the background properties (including background-size as well). You might only want to alter the backgroundImage property using JavaScript to keep the other background styles defined in your CSS.
document.querySelector('.jumbotron').style.backgroundImage = 'url(...)';
function randomImage() {
var images = [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZwkTaJg28-Bxidgfm6FbHyEZ8D5ya1hGMroF05htuwvQqJsY9sQ",
"http://www.shunvmall.com/data/out/193/47120931-random-image.png",
"https://s-media-cache-ak0.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg"
];
var imgAmount = images.length;
var x = Math.floor(imgAmount * Math.random());
document.querySelector('.jumbotron').style.backgroundImage = "url(" + images[x] + ")";
}
window.onload = randomImage;
.container .jumbotron {
background: url(https://placehold.it/300x200) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
border-radius: 0px;
height: 200px;
border: 6px #000 solid;
}
<div class="container">
<div class="jumbotron">
</div>
</div>

Div Background Change OnClick

I have looked at this so long that I'm confusing myself. I seem to be stuck and missing something. My code is basically supposed to have the default div background (gamebg), and when you click on one of the buttons, the background of the div they are in changes.
<style>
#gamebg {
background-color: #00b5d3;
background-image: url('background_button_1.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
.gamebg1 {
background-color: #00b5d3;
background-image: url('background_button_1.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
.gamebg2 {
background-color: #00b5d3;
background-image: url('background_button_2.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
</style>
<div id="gamebg">
<img src="background_button_1.png" class="panel-button">
<img src="background_button_2.png" class="panel-button">
</div>
Any suggestions for me?

IDs have a higher specificity than classes. In your case, #gamebg is overriding .gamebg1
It's also best not to put too much code in in-line JavaScript. Considering creating a function. Inside the function, you will use the attribute function to add a class, and the removeAttribute function to remove the id.
Now in onclick, you just need to call the function with the class you want to add inside the paramater.
Here is a solution for you
JavaScript
function addNewClass(className) {
var background = document.getElementById('gamebg');
background.attribute('class', className);
background.removeAttribute('gamebg');
}
<img src="background_button_1.png" class="panel-button">
<img src="background_button_2.png" class="panel-button">
Here is more information on specificity
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

This is due to something called "specificity". In CSS, id's are more "specific" than a class, which is why the id's background-color property will always override the class' background-property, meaning the background-color property won't actually change while the classes bound to the node with that id will.
A good video about specificity here:
https://www.youtube.com/watch?v=fy07HYm-geM

Can I use a part of the background image as a separate div

I think the header covers it all. Can a small let's say 40x40 part of the 1600x1200 background image of an HTML (javascript, jquery) page be used as another div. I mean I take a 40x40 part of the image and set it as a div with id "div1" and so on for another parts. The idea is, that the divs are set to the background image, so that if watched from a smaller screen with the "fit in" function there will be no misplacement. I hope you get the idea.
Best Regards.

jsFiddle
CSS
html {
background: url(http://placehold.it/350x150) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 0px -30px;
width: 50px;
height: 30px;
}
Note
This uses the sprite technique and should work fine for this scenario.
References:
http://www.guistuff.com/css/css_imagetech1.html
Demo pulled from Reference
CSS
.icons {
display: block;
width: 40px;
height: 40px;
background-image: url(http://www.guistuff.com/css/images/sixicons.png);
background-repeat: no-repeat;
}
.icon_1 {
background-position: 0px 0px;
}
.icon_2 {
background-position: -40px 0px;
}
.icon_3 {
background-position: -80px 0px;
}
.icon_4 {
background-position: 0px -40px;
}
.icon_5 {
background-position: -40px -40px;
}
.icon_6 {
background-position: -80px -40px;
}
HTML
<span class="icons icon_1" style="float:left;"></span>
- Icon No.1<br/>
<span class="icons icon_2" style="float:left;"></span>
- Icon No.2<br/>
<span class="icons icon_3" style="float:left;"></span>
- Icon No.3<br/>
<span class="icons icon_4" style="float:left;"></span>
- Icon No.4<br/>
<span class="icons icon_5" style="float:left;"></span>
- Icon No.5<br/>
<span class="icons icon_6" style="float:left;"></span>
- Icon No.6<br/>

It sounds like you want to use an image as a CSS Image Sprite. You can set a background image on a DIV and then adjust the background-position as needed.
JSFiddle Example
.big-image {
background-image:url(http://img2.netcarshow.com/McLaren-F1_1993_1024x768_wallpaper_01.jpg);
background-repeat:no-repeat;
display:block;
}
.img-sec-1 {
background-position: -175px -268px;
height:40px !IMPORTANT;
width:40px !IMPORTANT;
}
.img-sec-2 {
background-position: -270px -290px;
height:50px !IMPORTANT;
width:50px !IMPORTANT;
}