Hiding Secondary scrollbar with css and [ngStyle] question

Question

So I've this page where the content adds dynamically, but some of the content needs scrolling, I don't want to have two scrols, it's ugly.

I've tried some stuff but nothing seem to work

css looking right now :

element {
  -ms-overflow-style: none;
  scrollbar-width: none; 
  overflow-y: scroll; 
}

element::-webkit-scrollbar {
  display: none; 
}

Also I wanted to check if there's some incompatibility with this code

<section id="banner" [ngStyle]="{ 'background': 'url(' + this.imgCenario + ') center/100% no-repeat', 'background-color': 'rgb(234,239,239)'}"
    [ngClass]="classBanner" class="imageContainer">

The background color apllies but when the image loads it goes away, I can input it through the console, but I think that i'm missing something here. Is there a way to do this or it will always make the picture the main setting, even if the picture doesn't cover the whole area

Answer 1

Theres a simmilar question about the background-color and the background-image properties.

CSS: background image on background color

It seems like you are overrigind your background-image when you use background-color. As you can see here you can provide the color and the image using just the background property, something like [ngStyle]="{ 'background': 'url(' + this.imgCenario + ') center/100% no-repeat rgb(234,239,239)'}"

Answer 2

For the scroll I've found the problem, i was calling it wrong

 *::-webkit-scrollbar {
  display: none;
}

* {
  font-family: "Rubik", sans-serif;
  margin: 0;
  padding: 0;
  overflow: auto;
  -ms-overflow-style: none; 
  scrollbar-width: none; 
  overflow-y: scroll; 
}