Is there any bootstrap class which can remove a background image from the div?
I have this style in css:
background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0));
and i want to remove it like this:
bg-img-none
or something else,
can somebody tell me how to do it?
No, but you can add it yourself.
.bg-img-none {
background-image: none !important;
}
.bg-none {
background: none !important;
}
you can use bg-transparent to make the background transparent. this will not make the background as null but change the transparency of area to 0.
you can check out it at bootstrap documnetation.This documentation is for colour backgrounds.
OR
you can add a custom CSS to remove the background
.bg-img-none{
background-image: none;
background: none;
}
Related
I am using the answer from Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div to achieve fading text at bottom
and a snippet of my code is below
<div className={styles.description}>
{description}
</div>
.description {
position: relative;
overflow: auto;
width: 640px;
height: 495px;
padding-right: 17px;
text-align: justify;
-webkit-mask-image: linear-gradient(to bottom, black 46%, transparent 100%);
mask-image: linear-gradient(to bottom, black 46%, transparent 100%);
}
and the effect is like this
however, the fading effect is fix, so when I scroll to the bottom, it still exist, therefore, some lines in the end of text would eventually unclear.
A simple way to solve this puzzle is add a extra transparent space in the end which large enough to expand the scrollbar, so that the text can get rid of fading out area. However, in my opinion, it seems not very elegant to me, so I wonder if there have methods can disable linear-gradient when scroll to the bottom.
Really appreciate your help, many thanks
I'm trying to change the background color of the sidebar of this React app. This is the source code of the sidebar component. I tried removing the data-color attribute of this element
<div
id="sidebar"
className="sidebar"
data-color="black"
data-image={imagine}>
and adding a CSS rule:
#sidebar {
background-color: #0b7c9c !important;
}
But for some reason, the sidebar still has a black background. I'm pretty sure the background color is being set via JavaScript in a manner that overrides all CSS rules, but I can't figure out how/where.
I'm seeing the background color is coming from :before pseudo-element of sidebar class, so you need to use !important to .sidebar:before background.
.sidebar:before, body>.navbar-collapse:before {
opacity: .33;
background: #f00 !important;
}
I think the .sidebar-background might be causing issues.
.sidebar {
background: #0b7c9c !important;
}
.sidebar-background {
display: none;
}
I'm trying to set a texture background to a container div. My CSS is below:
.container {
background-image: url(..img/texture-one.png) repeat;
}
My problem is, the image isn't showing up. If I make an img tag in my HTML, the image shows up using the same path.
.container {
background-image: url("img/texture-one.png");
background-repeat: repeat-y;
}
background-image can have only image path.
background-image: url|none|initial|inherit;
background is shorthand for multiple background properties.
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
So you need:
.container {
background: url(..img/texture-one.png) repeat;
}
Perhaps just add quotes around image link?
.container {
background-image: url("img/texture-one.png");
}
Can you show the HTML code too?
If you have floated elements inside the container, then the height of the container is 0, so you can't see a thing. In this case, you should use overflow: auto; on the container.
I need to blend the background colors of 2 elements using CSS
I have been fiddling around with the background-blend-mode:multiply but that works only when I have the 2 colors in the same element.
I need to achieve something like this -
I have been searching a lot but haven't been able to figure it out.
Most helpful resource I found was New blending features in CSS which shows how to do it using Canvas.
Is it possible to do the same thing using CSS?
EDIT
The circles above were just an example to show what I needed. As I mentioned, I was looking for blending colors for 2 different elements. I have created a fiddle for my actual shapes that I need to blend.
http://jsfiddle.net/fmgfsr4o/2/
You can combine CSS multiple background with radial-gradients to achieve this effect:
CSS
div {
/* adjust the width of the container to adjust circle's
overlap size and shape */
width: 80px;
height: 50px;
/* for debug purpose only */
border: solid blue 1px;
background:
/* draw the red circle */
radial-gradient(red 0%, red 70%, transparent 70%, transparent 100%) 0 0,
/* draw the green circle */
radial-gradient(green 0%, green 70%, transparent 70%, transparent 100%) 0 0;
/* the red on the left, the green on the right */
background-position: top left, top right;
/* you can make then bigger or smaller */
/* but you have to change width size above too */
background-size: 50px 50px;
/* You want both circles to appears once only */
background-repeat: no-repeat;
/* you can try with other values too */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode */
background-blend-mode: multiply;
}
HTML
<div></div>
I have done a JSFiddle for you to try: http://jsfiddle.net/pomeh/07nLpwwj/
This is the result I get using Firefox 31:
Even if the browser support seems "correct" (see here http://caniuse.com/#feat=css-backgroundblendmode), please note that the background-blend-mode property has the Candidate Recommendation status for now, so be careful when using it (thanks to #Paulie_D for pointing that out).
Try this pure CSS3, although you will need to figure out how to position the circles.
html {
height: 100%;
background:
repeating-radial-gradient(
circle,
transparent,
transparent 3.5em,
tomato 1em,
tomato 4.5em
),
repeating-radial-gradient(
circle,
transparent,
transparent 3.5em,
dodgerblue 3.5em,
dodgerblue 4.5em
);
background-blend-mode: multiply;
background-size: 10em 10em;
background-position:
0 0,
5em 5em,
10em 5em;
}
JSFiddle
So I'm using CSS :hover to replace a submit button background. When I mouse over the button the old background image disappears (so it looks like nothing is there) for a moment and then reappears with the new background. I thought that perhaps the button image file size was too large but its only 1.4kb. Is there a way to prevent this, caching or pre-loading, or something along those lines?
Is this only on the initial page display / hover?
This will be because the image file is only loaded on request - i.e. the hover action.
To avoid this, both button states should be stored in a single file. You then just need to adjust the background-position property to display the correct half of the image for it's current state.
Here's a rough example (note that button.png contains both image states and is 40 pixels high):
button {
background-image: url(button.png);
width: 60px;
height: 20px;
background-position: 0 0;
}
button:hover {
background-position: 0 -20px;
}
You could, maybe, use a technique that's similar in intent, albeit not execution, to Bryn's answer, above.
.button {background-image: url(img/for/hover-state.png)
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
height: 1.5em;
width: 5em;
}
.button span
{background-image: url(img/for/non-hover-state.png);
background-position: top left;
background-repeat: repeat-x;
background-color: #000;
height: 1.5em;
width: 5em;
}
.button:hover span
{background-color: transparent;
background-image: none;
}
The similarity I mentioned is to have both images present on the document in order to avoid the hover-flicker. On hover of the button the background-image of the span will disappear, and reveal the hover state, rather than having to load it on-demand.
The bonus is that, although I specified the height/width above this technique will work for dynamic re-sizing, not relying on fixed-width sizes of images (or it's as fluid as your design can allow it to be).
It's because it takes time for the "hover" image to download before it displays. To prevent this, you can use a sprite image technique.
Example: Using Sprite Images with INPUT for a Hover Effect