I'm not quite sure how to do this. I have seen people say use linear gradient in the css under the background image url and add the rgba values but for some reason when I put linear-gradient in the css it doesn't work. When I type the code into my cms, it is white, while all the other working properties turn grey. (just to explain that it doesn't work) Here is my code. Hope this makes sense.
.topInfo {
background-image: url('/CMS_Static/Uploads/313864614C6F6F/miami beach-1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 684px;
linear-gradient: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85)),
}
You can do it by setting 2 backgrounds on the same element. First background needs to be a little transparent, so that you can see the other one below the first one. Linear background can also be a background, just like regular image. You can set multiple backgrounds with ,.
Example:
body {
background-image:
linear-gradient(0deg, rgba(0,255,0,0.4), rgba(255,0,0,0.2)),
url(https://upload.wikimedia.org/wikipedia/commons/4/41/Sol454_Marte_spirit.jpg);
}
You can see full example in action here.
You can read and learn about background-image here.
You can read and learn about linear-gradient here.
linear-gradient is the property of background it should be something like
background: linear-gradient(rgba(249, 119, 76,.75), rgba(128, 42, 12,.85));
Refer more at https://www.w3schools.com/css/css3_gradients.asp
This is definitely possible, though not exactly the way you are trying to approach it. Check out this answer for applying multiple backgrounds to an element. Note that the order in which these backgrounds are applied has an effect.
Pay attention to your color definitions. rgba accepts colors defined in RGB, not HEX values like you use. I converted your colors to RGB values:
#F9774C = rgb(249,119,76)
#802A0C = rgb(128,42,12)
Adding your desired alpha values to these and changing the format from rgb to rgba, your linear gradient is:
linear-gradient(rgba(249,119,76,.75), rgba(128,42,12,.85))
Check it out here, but please give the answer linked above a read. It has useful information on browser compatibility and fallbacks.
Related
Im trying to create a cool effect in html5 where a element in one side of the gradient has a diffrent color then the other side. Like this:
example
I tried using mix-blend-mode: difference; but it i dont know how to controll the colors on the diffrent sides of the gradient. Codepen: https://codepen.io/powerkuu/pen/eYRYJVb
Change background: #ffff00; to background: #ecd54f;. It fits a little better.
Just change the hex-decimal value of background property in &:after to background: #ffff00; Try to find a fine color adjustment from changing the hex value. (#ffff00 is the value of pure yellow.)
The Screenshot I have taken from your Codepen after I edited tour code. Wish you all the best.
Are CSS shorthands like background property working with a value-gap? I tried it with background. I wanted to set some background values static and the backgorund image dynamicly.
I did the following:
background: no-repeat contain center;
The background-image should be added later dynamicly. Did i something wrong? The shorthand like i used isn't working. Do i have to use the single attributes (background-repeat, background-size, background-position ...) to realise that?
The problem isn't the missing background-image. The problem is with the background-size and background-position values. Unlike the rest of the longhands, values for those two have a very specific grammar: background-position followed by a / followed by background-size. See the spec.
This is what it should look like:
background: no-repeat center / contain;
You can always set a background-image separately.
Some other shorthands do have mandatory values. For example, font requires a font-size and a font-family. background does not have any mandatory values.
Is it possible to program CSS's background with raw values for both its background background-color shorthand? I.e., body { background: white rgb(0, 255, 127) }
I was able to use a clever hack, which was use a 1x1 white pixel, background.png, i.e., body { background: url("background.png") rgb(0, 255, 127) }
And I think I can put a raw data:image/png;base64, but when I uploaded the same 1x1 white pixel online, it generated like a 500 character code, which seems insane for a 1x1 white pixel.
Is there another method to achieve the same effect using just background? The effect being a white foreground and green background. Demo live at (zaydek.github.io). To see effect, drag up and down on the webpage.
I know I can do so with divs, etc., but I am curious about just CSS properties on one element, i.e., body or a combination of html and body. Thanks.
Found a viable anwser at http://proger.i-forge.net/Компьютер/[20121112]%20The%20smallest%20transparent%20pixel.html
The winner is 1-color GIF – 35 bytes. Data URI for white 1×1 image:
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
I have a dark/black background image and a white input field. I gave the input field an opacity of 50% and I want the text/value to be solid white(#fff). BUT when I apply the opacity it effects both the background of the input element and the text. How to I only change the background of the input field?
For that you could use background-color: rgba(0, 0, 0, 0.5). The first three numbers are the background color in rgb (red, green, blue) format and the fourth number is the opacity level on a scale from 0 to 1.
From what you say, you only want the background to be affected.
For backgrounds to be (partially) transarent, you have to use a
a) PNG background
or
b) a RGBa background- see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
Like so: background:rgba(0,0,0,0.2);
This is not supported in IE8 and below.
The problem is that you are changing the opacity on the entire element. As such, all child elements strictly inherit the transparent properties.
There are a few things you can do.
You could target only the background and set it to an RGBA value:
background: rgba(255, 255, 255, 0.5);
This wont work in IE8 and before, so you can use a workaround using linear gradient filters:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 );
You will notice that the first 2 hexadecimal places are #80. This is not a mistake and is not a decimal value. Hexadecimal is base 16, this makes #80 the median point therefore setting your opacity to 50%. It's a little confusing, I know!
You could remove styling from the input field and, instead, add a wrapper around your input fields and style that instead.
You could use a semi-transparent PNG as the background image and set it to repeat.
Why not simply make a half-transparent png and use that as background image instead of setting the input opacity? Or if you don't have to support IE8- you can also use rgba().
It is quite popular question, I think.
I am looking for crossbrowser CSS solution for black opaque layer. Which will hide all stuff under it.
My example: http://jsfiddle.net/pb9jv/. But it is not crossbrowser. (IE 6+ is the pain in my ass).
Try adding this the the CSS style you apply to the fadeover (In your example : #black)
filter: alpha(opacity = 50);
EDIT : You want it to be opaque or transparent like the given example?
Have a look at this, it does work on IE 6
Use a simple div and apply a background-image to it with a 1px size image of your color. Just a simple png with your black color.
.overlay
{
background-image:url('myoverlaycolor.png');
}
It will repeat itself across the complete div.
Edit
Come to think of it, IE6 doesn't support png right? Maybe you could just take a look in sources like slimbox.
David is right - that is the syntax.
However your fiddle will not work in IE6 since you have no size values.
Here is an example:
http://jsfiddle.net/4Aw4Q/
If you remove the sizing the element will not show.
#Marnix If you use proper filters IE6 does support PNG. Try this for starters
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pngimage.png', sizingMethod='scale');
Set the above filter in as a class for the span or div element containing the image and make sure the width and the height of the image are set.
Set this class also for the span or div element containing the image.
.PNGTrans img{
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
So the above to classes will have to be called for the parent containing the png image.
#fl00r : Have a div element with higher z-index with screen.width and screen.height as its widht and height respectively. You can either use an image or you can play with opacity filters.