This question already has answers here:
Can I set background image and opacity in the same property?
(15 answers)
Closed 2 years ago.
I have these lines In my CSS file:
body {
background: url(https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg);
}
How can I affect this image with transparency? I found a "solution" that looked like this:
img {
opacity: 0.5
}
But I don't really know how to apply It. If I just write It down, nothing happens because I don't know how to connect It to the image I want to use.
You can utilize the rgba() function of the background property and combine it with the url() function. The RGBA has the A for "Alpha" in addition to Red-Green-Blue, which performs just like the opacity property; values range from 0 to 1. The trick to using RGBA in a background image is to use two parallel rgba() functions inside a linear-gradient(). Since rgba() returns a color value, it can be utilized as two color stops in the linear gradient...although they technically aren't color stops, since no transition happens from two like color values. Hackish, but simple and functional.
body {
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url('https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg')
}
You would simply apply it as shown below;
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background-image: url('https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg');
opacity: 0.5;
}
.content {
position: relative;
z-index: 2;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1 class="content">Hey!</h1>
</body>
</html>
The body being your background and the content being your text and other content etc..
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 want to make it stay at the very top and very left, but there's still space.
Can someone tell me how to make it full width ?
My css code
body
{
height:100%;
width:100%;
background : url('4163-16y6220.png');
}
.transbox
{
background : black;
opacity : 0.2;
width : 100%;
margin: 0;
padding: 0;
}
My HTML
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title><link rel="stylesheet" href="style.css">
</head>
<body>
<div class="transbox">Home dasdahbbjb</div>
</body>
</html>
You need to reset your HTML document.
Use a reset like Normalize.css
This will reset all elements to 0.
margin, padding, and more will set to default.
Here is another reset:
/*
* html5 doctor css reset | http://html5doctor.com/html-5-reset-stylesheet
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
More info, here on SO: css-reset
Try making the div with margin-left: -10px;
or whatever suits your needs.
This isnt probably the nicest way to do it but it will do.
Here is a codepen to help.
http://codepen.io/anon/pen/ZGBGrL
Well, all this guys only fix the problem with you code using opacity : 0.2; but in actuality is obsolete because you can use rgba colors w3schools rgba examples
Example
Define different RGB colors with opacity:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
There are many tools on the internet that is not the most recommended use because otherwise you never learn anything, but hey here's a this is the link
css3maker.com
what you can do to the top is a div with style transparent and a div that this under the color of the background you should go
Add padding and margin 0 to body
body
{
height:100%;
width:100%;
background : url('4163-16y6220.png');
padding:0;
margin:0;
}
http://jsfiddle.net/gen7wpkm/1/
Only add
.transbox
{
background : black;
opacity : 0.2;
width : 100%;
margin: 0;
padding: 0;
position:absolute;
top:0px;
left:0px;
}
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 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.
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 9 years ago.
I have 2 divs (outer one id = "BD")(inner one id = "content"). I am trying to make the background-color of my BD be less opaque, yet everything inside my content becomes less opaque as well, the images and texts.
How can i solve this?
Use RGBA. Here's a color converter that will convert to RGBA.
This is half opaque white.
background-color: rgba(255, 255, 255, 0.5);
Substitute the rgb components for the values of your choice.
#bd {
background-color: rgba(255, 255, 255, 0.7);
}
There are a couple options:
Use :before. This allows the use of images (fiddle):
#BD {
position: relative;
}
#BD:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(http://placehold.it/300);
opacity: .7;
}
Use rgba and a gradient filter for older IE versions:
#BD {
background: rgba(0,0,0,.7);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf000000');
}
IE gradient uses hex for alpha as well. And it's the first 2 digits. You can use the hex to rgb converter in one of the other answers to figure it out by doing 255 * opacity, rounding it, and plugging it in for one of the colors.
Children inherit opacity. It'd kinda be weird if they didn't. You could use a transparent image for your background, or set the background-color of BD using RGBa. (a = alpha).
MDN has a great section on rgba().
Like so:
#BD {
background-color: rgba(0, 0, 0, 0.7);
}
Just so you're aware though, a lot of times your question will have been asked before and already received some great answers. Its usually a good idea to do a quick search to make sure your question hasn't already been asked.
A quick search of this topic yields this, this, this, and this, for example.