I am wondering if it is possible to change the brightness of:
body{
background-image:url();
}
Using HTML/CSS. The reason I would like to change it, is because I just spent a rather long time making the image, but when I put it on website, it is suddenly about twice as bright. I have compared the original file and the file that is input into the website and they are both very much different colours of blue.
Is there any reason for this, and is there a way I can change the brightness?
Thanks.
You can have more layers in the "background" like this:
.someObj{
background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
url(myBgImage.png);
}
This will put 50% white over the original image making it brighter.
Linear-gradient function has to be used, otherwise it doesn't work.
Alternatively use:
.someObj:after{ content:''; background:rgba(255,255,255,.5); ... }
and this is better for code maintainability.
This would be an option, but it's not very practical and wouldn't work in older browsers:
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,0.1);
pointer-events: none;
}
Or for even better color control, try hsla() colors:
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: hsla(180,0%,50%,0.25);
pointer-events: none;
}
Really, it's better to play with the image in a image editor until you get the browser result you want.
There is no way to do this that works in every browser, but if you want, you can do it in webkit browsers (Chrome, Safari, Opera), by using the filter style:
img.lessBright {
-webkit-filter: brightness(0.8);
filter: brightness(0.8);
}
That results in the brightness being reduced to 80% in webkit browsers. I do recommend just saving another version of your image if you want to do this though.
Create a child div for the background image of the same dimensions.
Set the child divs background colour with RGBA, which includes an alpha channel (opacity).
Set the opacity accordingly between 0 and 1. 1 = Opaque, 0=Transparent, 0.5 =Translucent
HTML:
<div id="primary_feature">
<div class="feature"></div>
</div>
CSS:
#primary_feature{
background-image: url("../assets/images/misc/laptop.png");
}
.feature{
background:rgba(0,0,0,0.6);
}
An update to the other answer.
You can also use the Backdrop Filter for a much better effect. It can use any filter, in this case, the brightness filter.
This means your background will not be washed-out with a colour over the top, rather it will affect the background directly for a sharper more natural look while retaining all detail.
The downside, it isn't currently supported in Firefox, unless experimental settings are turned on. But that should change soon and as of writing this, Firefox is only 6.5% of the market.
however, it is fully supported in Chrome
body {
content: "";
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
backdrop-filter: brightness(120%);
pointer-events: none;
}
I placed a black canvas over the image and changed the brightness:
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0,0,c.width,c.height); //as image size
ctx.fillStyle = "#000000" + brightness;
ctx.fill();
I had the same problem, but it was with a Gif.
My workaround:
I made a very small black square image in PowerPoint and set its transparency to 50% and saved it as a file called "dimmerswitch.png"
Than I referenced that one first in the code:
body {
background-image:url("dimmerswitch.png"), url("YourImage.png");
}
You just do Photoshop to reduce the brightness if there's no other way.
Related
How do I take a image with just white and transparent pixels (example) and recolor to, say, red or orange, using only CSS?
Question below was asked previously -
Change color of PNG image via CSS?
The answer says to use filters, but does not indicate what combination of filters would make it work. Are there any filter combinations that would allow me to change a white-on-transparent image to red?
To clarify: I would like to recolor the white portion of the image, not color the background. For example, I would like it red-on-transparent.
img {
-webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>
I played around a bit and found a possible solution to only paint the white parts:
img {
display: block;
background: black;
-webkit-filter: brightness(.5);
}
.recolor {
position: relative;
display: inline-block;
-webkit-filter: brightness(1) contrast(300%) invert(1);
}
.recolor:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 255, 255, 0.3);
}
<figure class="recolor">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png">
</figure>
How it works:
Make image background black and set its brightness to a half, to make the foreground gray
Create a wrapper element (<figure>) and create an overlay (:after) of the inverted color you wish with a relatively low opacity
Now filter the wrapper element: make it so bright with such high contrast, that the background becomes black, but the foreground color remains.
Now just invert the wrapper to get your foreground color on white
Limits: Transparency gets lost, due to filtering the colors are maybe not exactly the colors you want, browser support is not optimal
Just give background color to image, For Example below.
Use this image
NOTE: Image is transparent
CSS
img{
background-color: red;
}
HTML
<img src="test.png">
It IS possible to "colorise" a white image using filters but the results are imperfect.
The first step is a sepia filter and then a hue-rotate.
A true "Red" may be harder to achieve but you can play with this further.
img {
max-height: 100vh;
width: auto;
-webkit-filter:
sepia(100%)
saturate(2000%)
hue-rotate(222deg);
}
body {
background: green;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>
I meant to use triangle entities ▶ and ◀ in my website as indicating arrows. It appears normal on Chrome OSX in simulation mode.
Desktop:
But it doesn't display properly at mobile end.
Mobile:
Is this some sort of default setting? How can I modify?
if you are using HTML Code or Unicode Hexadecimal arrows,
different browsers interpret differently that kind of code and they have different default settings, so probably the best way to get it working could be to use an image instead.
I always use CSS to create solid color triangles when needed:
div.triangle {
position: relative;
}
div.triangle::after {
content: "";
width: 0;
height: 0;
border-width: 10px;
border-color: transparent red transparent transparent;
border-style: solid;
left: 0;
top: 0;
position: absolute;
}
<div>
<div class="triangle"></div>
</div>
Just use more CSS to place the triangle div as per your requirements.
I'm currently working on a project that involves a circle being randomly filled with a color to a certain point. I used a div with border-radius to create the circle + overflow:hidden and another div to imitate the 'filling'.
See JSFiddle
HTML:
<div class="circleswrap">
<div class="circlediv">
<div class="circle">
<div id="animateddiv1">
</div>
</div>
</div>
</div>
CSS:
.circle {
position: relative;
border-radius: 50%;
-o-border-radius: 50%;
overflow: hidden;
background: #8a8a8a;
width: 165px;
height: 165px;
display: inline-block;
margin: 0 75px;.
}
#animateddiv1 {
background: #63B23A;
position: absolute;
top: 130px;
width: 200px;
height: 165px
}
Awesome works great in my browsers BUT i have to get it to work on a outdated Opera browser which is integrated into a smart display monitor (and practically un-updateable).
As we all know the older versions of Opera did not support the combination of border-radius + overflow:hidden + position: relative/absolute
PS: I Know -o-border-radius is not a 'thing' but i tried it nontheless... a man can always dream :^)
I've been trying to find a solution but i'm out of ideas.
I hope this wonderful community can help me out :)
This is a bit of a shot in the dark, as i don't know the version of opera required. But you can try to use a background-image: linear-gradient();
like this:
setInterval(function () {
var percentage = Math.floor(Math.random() * 100);
$(".circle").css("background-image", 'linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);
This seems to be supported from Opera 11.1
Of course don't foget the browser prefix -o-
So the code could look like this:
setInterval(function () {
var percentage = Math.floor(Math.random() * 100);
$(".circle").css("background-image", '-o-linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);
here is a demo: http://jsfiddle.net/05dkfoxj/2/
Good luck.
The CSS clip-path property lets you specify an SVG shape to use as a mask for HTML content; that is probably the canonical way to do this moving forward.
I assume the version of Opera you're using is too old to support this property, or probably anything else that does what you want in a non-hacky way. If the circle is on a solid colored background, you could superimpose an opaque mask of the same color, i.e. a PNG with a circle cut out of it. More ambitiously, you might be able to use something like this technique to generate the image dynamically on a canvas, which (if it works) would allow for non-solid backgrounds. That would be complicated, though, and probably not feasible if any of the elements involved need to respond to pointer events.
Alternatively, if the content of the circles is just a picture, and not interactive, you could use a canvas to render the entire thing. Even quite old browsers should handle that, and CanvasRenderingContext2D knows how to clip drawing to a shape.
If the circle is against a solid background like in your example, you could create a PNG or SVG with the same colour background with a circle cut out and use it as an overlay. Remove the .circle element and place the image in .circlediv. It should give you the same effect as what you have.
.circlediv
{
width: (image width)
height: (image height)
postition: relative;
}
svg, png
{
z-index: 2;
width: 100%;
height: 100%;
position: absolute;
/* rest of your styling */
}
#animateddiv1
{
z-index:1;
position: absolute;
bottom:0;
width:100%;
/* rest of your styling */
}
I always tend to do this sort of thing because I know it'll work, even though I'd prefer to do it your way. You'll have issue in older versions of IE using border-radius, if you're supporting them.
So, I understand that this is the code for splitting the background in two colors:
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: orange;
}
#bottom {
bottom: 0;
background-color: green;
}
The source of this can be visualized here: http://dabblet.com/gist/2870276.
On my website, rather than 50% and 50%, I have 30% and 70%. How do I make it so that when the browser is adjusted to shrink horizontally, the top 30% doesn't stay at 30% but at the height of the original?
I suggest using a gradient instead of document elements for background effects like this.
Try this:
body {
background-image: linear-gradient(to bottom, orange, orange 50%, green 50%, green);
background-size: cover;
background-repeat: no-repeat;
}
Note that you'll need to make the body element fill the page:
html, body {
margin: 0;
height: 100%;
}
Here is my example: http://dabblet.com/gist/4ba4bde188af953dcdcc
That said, I don't understand what you mean by "shrinking horizontally" or "height of the original" - I hope I've answered what you're looking for.
Update:
According to Albert in the comments the OP wants the 30% to be relative to the height of the viewport when the page is loaded. This is doable, but must be done through JavaScript. I'll give a pure JS implementation without using jQuery.
window.addEventListener("DOMContentLoaded", setBodyGradientOnLoad);
function setBodyGradientOnLoad() {
var heightPx = window.innerHeight;
var gradientStop = Math.floor( heightPx * 0.3 );
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "linear-gradient(to bottom, orange, orange " + gradientStop + "px, green " + gradientStop + "px, green)";
}
Note that you still need the rest of the CSS to apply the background-size and background-repeat options, as well as to provide a fallback for browsers with JavasScript disabled.
Note that my use of "DOMContentLoaded" and the un-prefixed linear-gradient means this will only work in modern browsers (IE 9+, Safari 3.1+ - 2010 or later, basically)
I would suggest to not use two elements to do so. Only use one and set a "split background-color" like so. By the way, doing this purely with CSS will make it responsive to all screen resizing.
I solved this purely with CSS, and with NO EXTRA DOM ELEMENTS! This means that the two colors are purely that, just background colors of ONE ELEMENT, not the background color of two.
I used a gradient and, becuase I set the color stops so closely together, it looks as if the colors are distinct and that they do not blend.
Here is the gradient in native syntax:
background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
Color #74ABDD starts at 0% and is still #74ABDD at 49.9%.
Then, I force the gradient to shift to my next color within 0.2% of the elements height, creating what appears to be a very solid line between the two colors.
Here is the outcome:
And here's my JSFiddle!
Have fun!
Just use Javascript! Convert the "%" to "#pixels" right when the page loads, and then never convert it again, so that even when the user adjusts the size of their page, the height is constant, 30% of what the original height of the page was, not the new height of the page.
(*Note: This won't work on Dabblet.com since it doesn't support Javascript.. here is a JSFiddle version of it operational. http://jsfiddle.net/x35o09m1/ )
<html>
<head>
<div id="bottom" style="position: fixed; left: 0; right: 0; bottom: 0; height:100%; background-color: green;">bottom - 70%</div>
<div id="top" style="position: fixed; left: 0; right: 0; top: 0; background-color: orange;">top - 30%</div>
<script type="text/javascript">
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
document.getElementById("top").style.height = (y*0.3)+"px";
</script>
</head>
</html>
You can always use pixels instead of percentages if you want to keep a particular background color fixed. If its a navigation section you're trying to keep fixed in place, though, you can also use Bootstrap. Here is an example of a fixed nav block: http://startbootstrap.com/templates/freelancer/
I will go on and answer the question, affecting the OP code minimally:
#top{
position: fixed;
left: 0;
right: 0;
height: 30%;
}
#bottom {
position: fixed;
left: 0;
right: 0;
height: 70%;
}
#top {
top: 0;
background-color: orange;
}
#bottom {
bottom: 0;
background-color: green;
}
I have a div with its individual CSS for IE8, it is transparent. How can I prevent IE8 from making content inside this div also transparent? It should be 100% visible and not transparent. Thanks so much for suggestions.
Fiddle (to be watched at in IE8)
.mybox {
position: absolute;
top: 362px;
left: 0;
width: 460px;
height:94px;
overflow: hidden;
text-align: left;
padding-left: 10px;
padding-top: 3px;
overflow:hidden;
background-color:#000000;
/* background: transparent; */
-ms-filter: "alpha(opacity=60)";
/* zoom:1 ; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; */
/*filter: alpha(opacity=60);*/
}
OT: Ok I know this is kind of old school. But still my customer wants this page to be compatible with IE8.
Related resources:
2
3
4
Opacity in inherited to all children, by design. New browsers can use alpha-channel (RGBA) to get around this, IE8 cannot.
All you can really do is use absolute-positioning to place the content you want visible over-top of the transparent bits. You of course need to rearrange the element stacking order to do this.
You can cheat by making a copy of the contents, minus the transparent element, and placing it over top of the existing element using JS.
If the div has the class called .mybox then try and definitively set the opacity perhaps by adding opacity: 1;
Finally, I found an even better solution:
.mybox {
background:none transparent scroll repeat 0 0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#98000000,endColorStr=#98000000);
}
UPDATED: Take a look with IE8
I obviously messed up something with the filter declaration, I am sorry about that... :(