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.
Related
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>
I'm using PrinceXML to create PDF reports in my .Net application. I've created the report in HTML and it has few areas with background color. But when generating the PDF report using PrinceXML, those background colors are missing. I've tried replacing the background color with background image with width and height. Still they're not showing. It's like it has completely removed that CSS area.
Anyone came across any issues like this before? The PrinceXML documentation mentions that they support the background color and image.
Background Color
Prince seems to recognise border-color, but not color (text color) or background-color or background-image.
You can simulate a background color by using an after pseduo-element and a thick border. Prince renders this correctly.
CSS
.bgRED:after {
content: "";
display:block;
border-top: 25px solid red;
margin-top: -25px;
}
.bgRED-ib {display: inline-block;}
HTML
<p class='bgRED'>This is a p with a red background</p>
<span class='bgRED bgRED-ib span6'>This is a span with a red background</span>
This requires that you know the height of the element in pixels to make it work.
Background Images
I'm trying a similar thing with making a background image 'water-mark' across the whole page
Prince ignored CSS like this:
background-image: url(HUGE_sunset.jpg)
However I managed to get it to work using something like this:
HTML
<img class="behind" src='HUGE_sunset.jpg'>
<div class="infront">
<p>with the lights out, it's less dangerous, here we are now entertain us </p>
</div>
CSS
.behind {position: absolute; width:100%; height:100%; z-index:1;}
.infront {position: absolute; z-index:500;}
In the Prince docs it mentions that background-color defaults to transparent, and that color defaults to black. On a whim I tried adding the !important directive to my color/background-color styles and it worked.
I do not know what Prince has applied as its default style selectors in these cases, but it appears that it either applies its base styles after (or with some other more specific selectors) that necessitates this unpleasant !important war.
Without any way to inspect the applied styles it's a bit opaque, or I'd definitely recommend going a different route. Fortunately in my case the styles I need are specific to the Prince-generated pdf only. If you have styles you need to use both for Prince and web, I'd recommend posting it as a bug in the Prince forum and hope they fix it.
Here is a css of backgorund image for Prince Pdf
<style>
#page{
background: url(background.png) #ffffff;
-webkit-background-size: 100%;
prince-background-image-resolution: 72dpi;
background-position: 0px 0px;}
</style>
by the way if you want to use bootstrap , use version 3.7
I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
Some strange behavior about background image
HTML
<body>
<div id="divGaLL">
<ul id="ulGaLL">
<li>...</li>
<li>...</li>
</ul>
</div>
</body>
CSS
body{
background:url(img/back01.jpg); //works
}
#divGaLL{
background:red; // works
background:url(img/back01.jpg); //doesn't work
}
#ulGaLL{
background:url(img/back01.jpg); //works
}
Why I can't set back01.jpg as background for #divGaLL?
That is because you are using the same property and different values. When you are using background: you can write color and image in same line
#divGaLL{
background:url(http://cdn1.iconfinder.com/data/icons/free-scuba-diving-icon-set/128/fish.png) red;
}
DEMO
The background property is a shorthand for setting a bunch of properties, including background-image. If you want to specify the background colour, or a background image, without overriding anything else, you should spell out background-color and background-image in full:
#divGaLL {
background-color: red;
background-image: url(img/back01.jpg);
}
See "background" on MDN.
Try
background:red url(img/back01.jpg) no-repeat;
You need to use
background-image: url('img/back01.jpg');
or e.g.
background: red url('img/back01.jpg') left top no-repeat;
Try to stick with this order of the "arguments" if possible ;)
I prefer to use the second way, however sometimes when you just need to change one thing it is better to use only the first approach.
It's always a good practice to define height and width and redeclare that this element is a block and not an inline style etc. if possible to prevent unwanted behaviour so use something like:
display: block;
width: 150px;
height: 150px;
background: red url('img/back01.jpg') left top no-repeat;
if #ulGaLL has a background image which completely covers it then you wouldn't see the background of #divGaLL.
Solution:
#divGaLL{
width:200px; /* Width of back01.jpg */
height:200px; /* Height of back01.jpg */
background-image:url('img/back01.jpg');
}
If you put the image in your HTML, u can use something like this:
#divGaLL img{ background-color:red;}
It will take only the IMG instead of the whole div.
And yes, do not only use background for a deffinition, since background is used for all kind of different things then only img or color.
So always use background-color, background-image or whatever you want with it
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;
}