I am currently having an issue with background color and background images. The project i am working on must use both a color and a background image. For example the image will fill up half of a div and the color will fill up the other half.
Now normally to do this i would use the following piece of CSS:
background: blue url('img.png) right no-repeat;
and this works perfectly but on this project in particular the user can set the background image themselves using a CMS system. So to apply the background images i am using an inline style on each of the divs then the div has its own color in an external stylesheet like so.
stylesheet.css
.bg-color {
background: blue;
}
index.html
<div class="bg-color" style="background:url('img.png') right no-repeat;">
</div>
Now when doing this the background image overrides everything, is there a way for me to achieve the results i am looking for dynamically?
Thanks
the default value of the background shorthand you have on style= is transparent and that is overwriting the color you give in the class bg-color. try:
.bg-color {
background-color: blue !important;
}
In your CSS try using:
.bg-color {
background-color: blue;
}
instead of only background: blue;.
Here is a solution
You may use shorthand notation to incorporate both backgrounds.
<div style="background: url(http://scienceblogs.com/gregladen/files/2012/12/Beautifull-cat-cats-14749885-1600-1200.jpg) no-repeat, green;
background-size: 50%;"></div>
Related
here is a tough one. Let's imagine I have div, with a specific size (width and height), and a background-color: pink;. Now let's say I have a icon, a png file (or svg or anything), and I want the image to "dig" into the background color.
In other words, I want the icon to be displayed in transparent, and the pink all around it. Like this:
It is just like the mask-image property, just the opposite.
Details:
There's no need about browser compatiblity (it's not for production use)
I can't use Javascript nor JQ (html / css)
And of course I can't edit the png file (to invert transparency and color ;))
Here are two PNG to match with the background-color:
Related:
This is not like the png was simply a character: codepen.
This is not just using mask-image: jsfiddle
https://tympanus.net/codrops/css_reference/mask-image/
https://alligator.io/css/masking-with-mask-image/
https://codepen.io/yoksel/full/fsdbu/
Do you guys have any clue to achieve this behaviour?
Let me know if you need more details.
You may want to use filter: invert(1); on the image when inside the div:
The image does not dig inside the div, but that visually works if the color behind the div is the same.
(I've added a different color on the body to illustrate that unwanted behavior)
body{
background: #ddd;
}
div {
width: 200px;
height: 140px;
background-color: pink;
}
div img {
/* You may want to add brightness(0) before invert for some images */
filter: invert(1);
}
<body>
<div class="img_container">
<img src="https://image.flaticon.com/icons/png/128/61/61072.png" />
</div>
<p>Original image:</p>
<img src="https://image.flaticon.com/icons/png/128/61/61072.png" />
</body>
Note that I didn't use your images because it's not only black and transparent.
I am using an image background using css :
tbody
{
width: 100%;
background-image: url("http://pattern.png");
background-repeat: no-repeat;
background-size: 800px;
}
and in the HTML file I am trying to add a style in this div (tbody). The style will be an overlay color filter. The reason I want to add this in the HTML and not the CSS is that it is going to be dynamic.
The RGB of the filter will be like that :
<tbody style="background-color: rgb( {Query.Visits_Color_R},{Query.Visits_Color_G},{Query.Visits_Color_B},0.5);">
I guess I have to use something similar to -webkit-filter:
Two things:
If you want alpha to be affected you want to use rgba() not rgb().
Inline styles override linked styles in a stylesheet. Add your background image into your inline style e.g.
Your top-most layer should be at the front See: https://developer.mozilla.org/en/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
I just created this code.
As you can see, on the left side you have a red background color behind a grey icon, but the red background doesn't fill the whole left side of the button.
Is there any way I can fill the whole left side of the button with red background in the demo above?
just add this to the .button's css
background-color:the color;
Check this updated cssdeck. Added background-color to your button class (.button) and hover effect (on background-color).
There are namely two CSS properties to do this:
background-color:
Use this attribute if you just want to fill the background with a single color. You can do this with the name of the color or with an HTML color code:
background-color: red;
background-color: #ff0000;
background:
Use this attribute to assign multiple effects at once, such as:
background: red url("some-image.png") no-repeat;
This will set your background to use the image "some-image.png" for it's entire size and then fill in the empty spaces the image does not reach with red.
background will also work in the same way as background-color:
background: red; /*<-----This is valid CSS*/
You also use background to implement gradients, which can be created easily at Colorzilla.
You can change the background: #f5f5f5; to
background-color: red;. See if it works. :)
I'm helping a friend with this site:
http://smashingdivas.info/
No matter what style I apply to the gray background of the content div, I can't make it transparent (in any browser), so that the background image of the page shows through.
I've tried all of the following:
background-color: transparent;
background: transparent;
background-color: none;
background: none;
and nothing seems to work.
Thanks for your help!
If it's the div with class 'container' it's because you have a rule in your HTML that is overwriting your CSS:
.container,
.sliderGallery { background-color: #111111; }
If you want to apply transparency just on the background there are 2 options:
1) you can set the "alpha" channel on RGB ie.
background:rgba(255,255,255,0.5)
but this won't work on IE
2) create a simple transparent png image and set it this way
background:url(transparentIMG.png) repeat;
Have you tried applying the opacity property ?
like for eg.
opacity:0.5;
Works for me, at least. I guess you're overriding the background properties via CSS due to some later rule again.
Just remove following rule:
.container, .sliderGallery {
background-color: #111111;
}
I want to create an html page with a watermark. I set the background-image on the body. However I have some elements that are not allowing the background image to bleed through. They define their own background-color (but not background-image), overriding the color in the body. This surprised me. They didn't override the image, just the color.
It seems reasonable to have a visible watermark on a page with elements having different background colors.
How do I get the effect I want using standard html/css?
Here's some sample code that shows the problem. Note the white block obscuring my watermark image.
<html>
<head>
<style type="text/css">
.everything
{
background: url(/images/shield-25.png) blue no-repeat center;
}
table, div{ width: 100% }
#table2 { background-color: white }
#div2 { background-color: white }
</style>
</head>
<body class="everything">
<table id="table1"><tr><td>Top</td></tr></table>
<!-- This table put a big white line over my watermark image. -->
<table id="table2"><tr><td>Middle</td></tr></table>
<table id="table3"><tr><td>Bottom</td></tr></table>
<div id="div1"><tr><td>Top</td></tr></div>
<!-- Thought maybe it was a table thing but nope, divs do it too. -->
<div id="div2"><tr><td>Middle</td></tr></div>
<div id="div3"><tr><td>Bottom</td></tr></div>
</body>
</html>
Unfortunately for you, this is the intended behavior. background-image and background-color are sub-properties of the background property. Since you defined a background on #table2 and #div2, you can't see "through" them to the page background anymore.
CSS3 allows you to set the opacity of the background using the rgba() expression, but IE doesn't support this (Firefox 3 and Safari/Webkit do). To get an rgba()-like effect in IE, you can use a filter: rule such as the following:
#table2 {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff80,endColorstr=#ffffff80); /* IE proprietary */
background-color: rgba(255, 255, 255, 0.5); /* CSS3 standard */
}
Note how the startColorstr and endColorstr parameters have a fourth value for alpha.
There is no way to accomplish what you want to do without some clever HTML/CSS hacks. If you set the background color of an element it's not going to allow images underneath it to "bleed through".
You can look into setting the CSS opacity here: http://www.quirksmode.org/css/opacity.html
However, I believe (not tested) that this would apply to any text inside the elements as well so you would likely need a second class to set the opacity back to 1 for the text inside the table, etc.
You're setting the background-image for the body element. The divs and the table are not transparent, and they are in front of the body element, that's why they cover your watermark.
If you want to apply the watermark to each element individually, you should do something like this:
#table1, #table2, #table3, #div1, #div2, #div3 {
background: url(/images/shield-25.png) blue no-repeat center;
}
or maybe
table, div {
background: url(/images/shield-25.png) blue no-repeat center;
}