It would be helpful if you posted a code snippet so I could play with it, but off the top of my head:
} — in the style code.!important in the stylesheet: background-image: url('img/bg-img/size-1.png') !important;If you want to overwrite/force something in CSS, one way would be to add !important
So something like this:
background: none !important;
I already solved it, intead of using the links of the style for the carousel I copied de code and made it locally and then delete the background property.
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(owl.video.play.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform .1s ease
}
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3,1.3);
transform: scale(1.3,1.3)
}
so i created two files for the links of the carusel and paste the code that they have, delete the background and that was it, thanks for your help.
I am getting a problem with some autogenerated class, thi one is from owl carousel and i want to change the nav buttons styles, but i cant because the class
.owl-theme .owl-nav [class*=owl-]
and it has a background that is ruining my background image, but i cant overwrite it because it still the same so i have to delete it, i hope you guys can help me.
I already tried by playing with the displays, backgrounds and that stuff, but what I actually need is to remove that attribute, i tried with js but I wasnt able to
window.onload = () => {
$('.carruselCheckout').owlCarousel({
margin: 10,
items: 1,
center: true,
loop: true,
nav: true,
mouseDrag: true,
navText: ['', ''],
dots: true,
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<div class="carruselCheckout owl-carousel owl-theme">
<div class="item">
<img style="height: 120PX;
width: 280PX;
object-fit: contain;
" src="img/bg-img/size-1.png" alt="Alternate Text" />
</div>
<div class="item"><h4>2</h4></div>
</div>
<style>
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-item.active {
height: 100%;
width: 100%;
}
.owl-prev {
all: unset;
padding: 0 !important;
background-image: url(img/icons8-arrow-32.png) !important;
height: 15px;
width: 15px;
transform: rotate(-90deg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
/* position: absolute;
margin-top: -70px*/
}
.owl-next {
all: unset;
padding: 0 !important;
/* position: absolute;*/
background-image: url(img/icons8-arrow-32.png) !important;
width: 15px;
height: 15px;
transform: rotate(90deg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
/* margin-top: -70px;
margin-left: 235px;*/
}
</style>Welcome to Stack Overflow. Please don’t post pictures of code, add it to the body of your question instead. Could you please post the code you’ve tried and be more specific as to what you want the result to look like? It sounds like you may have an
You can always overwrite the owl css with your own, just load it after the owl css or use !important to make sure it gets preference . You can copy the exact class from the inspector(f12) and change it as you want.
What is it you tried to remove with JS ?! and how ?
Hello thanks for help, y tried to add the snippet but i wasnt able to set it right, it doesnt run, also i cant change the file ass scss because I am working with .net core and yeah