I've a div with transparent background, this is rendered with a black background when I use, https://www.npmjs.com/package/react-responsive-carousel
How can I modify the CSS to remove the black background?
You should overwrite the css like this:
<!-- add a outer class to parent div -->
<div className="carousel-outer">
<Carousel ...>
</div>
And add these code to css like below:
.carousel-outer .carousel .slide {
background: none;
}
Specially designated css has priority over others.
Related
I'm creating an application that edits the formatting of any webpage. I'm trying to change the background color of all the child divs of a selected div, but my current code makes images within the divs disappear.
.blah *:not(img) {
background-color: #fffdd0 !important;
}
I tried using :not() to make the formatting not apply to images, but it didn't change anything. Is there a way to make the background color not apply to images or not hide images?
i think your imgs are not children but they are grandchildren of your .blahdiv . that's why your code is not working. and so the parent of the img ( .child in my case ) gets the background and so a background appears under the image although the image doesn't get the background-color style
you could try something like this ( don't know your HTML structure or how complex it is )
div *:not(.child) { background-color: #fffdd0 !important;}
.parent > .child *:not(img){ background-color: red !important;}
<div class="parent">
<p>Child Text</p>
<h1>Child Heading</h1>
<div class="child">
<img src="http://placehold.it/350x150">
<p>grandChild Text</p>
</div>
</div>
I tried webfilters to change the white background of this image looking at this:
Change color of PNG image via CSS?
Not sure if this is the way to change the whitebackground of this image:
http://i.stack.imgur.com/AZRrE.png
Is it possible to change this through css?
You need to use a png that has a transparent background - the one you are using has a white background. For example.
.red {background-color:red;}
.blue {background-color:blue;}
.green {background-color:green;}
<div class="red"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
<div class="blue"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
<div class="green"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
If you do a search for radio button png you should be able to find a better one than the one I have used (as mine has some rough edges that are showing up)
Is it possible to change this through css?
No. If the image had some transparency, you could change the background-color (and/or background-image) of its parent element, like so:
<span class="thing"><img src="your-semi-transparent-image.png"></span>
And in the CSS:
.thing {
background-color: aqua;
/* This will show through the transparent region of the image */
}
I have a problem with making header transparent. I have created an image and placed it in the header however there is white background behind it. How I can make this background it transparent or end it after slider?
CSS class: #zo2-header.zo2-sticky
Thank you!
The problem being is that all elements are a child of <section class="wrapper boxed container"> which contains the following:
body.boxed .wrapper {
background-color: #fff;
}
This means that no matter what colour or transparency levels you set to your header, the background will always be white behind it.
You either need to:
Move the section with the id zo2-header-top outside of <section class="wrapper boxed container">
Remove the background colour that has been assigned to body.boxed .wrapper, add something like the following to your CSS file .white { background: #FFF; } tand then assigned class="white" to all sections apart from the header.
rgba(0,0,0,0.4);
that a will handle transparency, adjust the value as required.
As I could see in your template.css line: 2433 there is a rule:
body.boxed .wrapper {
background-color: #fff;
}
You have to remove it and add background-color only to the div that needs to have background.
Hi (little problem im not expert in css) i have a div if i change background color it successfully change it but if i add image then it does not change background color of div here is my code
<div class="Cartoon">
<img src="App_Themes/White/Images/male.png" class="imgMale" />
<div class="male"><p>In a Nutshell|</p>
<span>this is some text</span>
</div>
</div>
<style type="text/css">
.Cartoon
{
background-color: yellow;
}
</style>
(No jQuery and No Javascript only in css)
you can check heres the url parkingticketpal.com/HowItWorks.aspx
You need to clear your .Cartoon div since it contains floated elements.
What methods of ‘clearfix’ can I use?
You will not see your background color because the Image is already on the background. Try
.cartoon{
background: yellow;
z-index: 9999
}
Then the div is above the image so that you can see the background.
Hint: Try making div bigger than the image.
try this
`
<style type="text/css">
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
`
I want the outer div to span to all the page width with the background color #efefef.
The inner div will be centered and have white background with 995px width.
So i have this code:
<div style="background-color:#efefef;width:100%;">
<div id="photoUploadWrap">
Now the photoUploadWrap style is:
#photoUploadWrap{width: 995px;margin: auto;}
And it has tables and more divs inside it. The div gets centered alright but the
outer div doesn't display the #efefef background.
What's wrong here? I also tried to put a border on the outer div with no success.
The outer div has no height (or at least the browser doesn't think so). This is why you don't see the border or the background color. Why not just set the background color on the body tag?
Not sure why this isnt working, but when I changed it to:
<div id="divContainer">
<div id="photoUploadWrap">
aaaa
</div>
</div>
#photoUploadWrap{width: 995px;margin: 0 auto;}
#divContainer { width: 100%; background-color: #efefef; }
it worked.
check it Live