I have a few images similar to this one:
As you can see, there is a large difference between the shadows and highlights in the image. Most of the image is ok to put white text over, but sometimes my text goes over a bright spot, making it unreadable, so I want to lower the brightness of only the image's highlights (like you can do in most standard photo apps) using css, while keeping the shadows and mid-brightnes areas as they are. I can find lots of help on how to darken an entire image, but nothing on how to darken only the highlights. I was thinking background-blend-mode might work, but I have no idea how to use it, or which effect would be right.
You're right, background-blend-mode may be your simplest option! For more information about background-blend-mode, click here, but it more or less combines all of an element's background images by using a set of blend modes. For a description of the different blend modes, click here.
In the example below, the important lines are:
background-image: url("https://i.stack.imgur.com/tMO8g.png"), url("https://i.stack.imgur.com/tMO8g.png"), linear-gradient(hsl(0 0% 50%) 0 100%);
background-blend-mode: color, darken, normal;
These lines do the following:
• It gives the div three images: two that are your image, and one that is a solid color with a lightness of 50%.
• It applies the 'color' blend mode to the first image, the 'darken' blend mode to the second image, and the 'normal' blend mode to the solid color.
This means that the second image's lightest color will match that 50% lightness solid color, and the first image will restore the color that was lost when doing so.
Unfortunately, this does not work with transparent images, as the transparency will most likely be replaced with the solid gray color created by the linear-gradient().
div {
display: flex;
width: 15ch;
height: 12ch;
justify-content: center;
align-items: center;
font-size: 5em;
color: white;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url("https://i.stack.imgur.com/tMO8g.png"), url("https://i.stack.imgur.com/tMO8g.png"), linear-gradient(hsl(0 0% 50%) 0 100%);
background-blend-mode: color, darken, normal;
}
<div>Hello, World!</div>
Hopefully this solution is useful to you!
Related
so im trying to make a gradient like this one but with other colors:
So, im kinda new to css and i don't know how to make this glow effect bellow the gradient, thanks!
A background image can consist of more than one image - the first image in the list overriding those that come afterwards.
Using gradient images this snippet puts a transparent to a sort of dark gray from top to bottom image over a left to right gradient of colors.
Obviously this is just a start which will require you to play around with the parameters and the colors to get the effect you want.
div {
height: 10vh;
background-image: linear-gradient(transparent 0, #404040 40%), linear-gradient(to right, cyan, magenta, yellow);
background-size: 100% 100%;
background-repeat: no-repeat no-repeat;
}
<div></div>
I want to draw a border around a CSS background image, which resizes itself according to window size in a container div. I can draw a border around the div, but not around the image itself.
Can this even be done in this kind of setup?
Rather than post code here, I've made a working example HERE
<style parse-style>#pimg {
background:#FFF url( {{ img }} ) center center no-repeat;
background-size: contain;
height: 100%;
position:relative;
-webkit-transition: All 0.3s ease-in-out;;}
</style>
Thanks in advance.
No, there's no way to do that. You could add a second div that contains the image, but then you wouldn't be able to use background-size: contain.
If you knew that the image dimensions wouldn't change, you could add a second background-image, positioned in the same way, that was simply a transparent png with the border you wanted... but that would be really silly.
Unfortunately I don't have the time to create a working example right now, but a possible workaround may be the use of multiple backgrounds: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
The second background could be an SVG rectangle with a stroke. To avoid possible stroke deformation due to scaling, use non-scaling stroke: https://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
As shipshape said, there's no way to draw border for BG image but I got an idea which may help you. You can use 2 background images and the behind one can be a plaint colored background playing role of the border. See the code below:
#pimg {
border: 1px solid black;
width: 200px;
height: 200px;
background-image: url({{ bg-image.jpg }}), url({{ 1px.jpg }});
background-size: 90% 90%, 100% 100%;
background-repeat: no-repeat, repeat;
background-position: center center, left top;
}
Use 1x1px shim image in your desired color as the border and repeat it.
The background size can control the width of the border. If you increase 90%, the border will be thinner and if you decrease it, the border will be wider.
What's the difference between specifying a background color using background and background-color?
Snippet #1
body { background-color: blue; }
Snippet #2
body { background: blue; }
Premising that those are two distinct properties, in your specific example there's no difference in the result, since background actually is a shorthand for
background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size
Thus, besides the background-color, using the background shorthand you could also add one or more values without repeating any other background-* property more than once.
Which one to choose is essentially up to you, but it could also depend on specific conditions of your style declarations (e.g if you need to override just the background-color when inheriting other related background-* properties from a parent element, or if you need to remove all the values except the background-color).
background will supercede all previous background-color, background-image, etc. specifications. It's basically a shorthand, but a reset as well.
I will sometimes use it to overwrite previous background specifications in template customizations, where I would want the following:
background: white url(images/image1.jpg) top left repeat;
to be the following:
background: black;
So, all parameters (background-image, background-position, background-repeat) will reset to their default values.
About CSS performance :
background vs background-color :
Comparison of 18 color swatches rendered 100 times on a page as small
rectangles, once with background and once with background-color.
While these numbers are from a single page reload, with subsequent
refreshes the render times changed, but the percent difference was
basically the same every time.
That's a savings of almost 42.6ms, almost twice as fast, when using
background instead of background-color in Safari 7.0.1. Chrome 33
appears to be about the same.
This honestly blew me away because for the longest time for two reasons:
I usually always argue for explicitness in CSS properties, especially with backgrounds because it can adversely affect specificity down the road.
I thought that when a browser sees background: #000;, they really see background: #000 none no-repeat top center;. I don't have a link to a resource here, but I recall reading this somewhere.
Ref : https://github.com/mdo/css-perf#background-vs-background-color
With background you can set all background properties like:
background-color
background-image
background-repeat
background-position
etc.
With background-color you can just specify the color of the background
background: url(example.jpg) no-repeat center center #fff;
VS.
background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;
More info
(See Caption: Background - Shorthand property)
One of the difference:
If you use a image as background in this way:
background: url('Image Path') no-repeat;
then you cannot override it with "background-color" property.
But if you are using background to apply a color, it is same as background-color and can be overriden.
eg: http://jsfiddle.net/Z57Za/11/ and http://jsfiddle.net/Z57Za/12/
I've found that you cannot set a gradient with background-color.
This works:
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));
This doesn't:
background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));
There is no difference. Both will work in the same way.
CSS background properties are used to define the background effects of
an element.
CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Background property includes all of this properties and you can just write them in one line.
They're both the same. There are multiple background selectors (i.e. background-color, background-image, background-position) and you can access them either through the simpler background selector or the more specific one. For example:
background: blue url(/myImage.jpg) no-repeat;
or
background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;
The difference is that the background shorthand property sets several background-related properties. It sets them all, even if you only specify e.g. a color value, since then the other properties are set to their initial values, e.g. background-image to none.
This does not mean that it would always override any other settings for those properties. This depends on the cascade according to the usual, generally misunderstood rules.
In practice, the shorthand tends to be somewhat safer. It is a precaution (not complete, but useful) against accidentally getting some unexpected background properties, such as a background image, from another style sheet. Besides, it’s shorter. But you need to remember that it really means “set all background properties”.
Comparison of 18 color swatches rendered 100 times on a page as small
rectangles, once with background and once with background-color.
I recreated the CSS performance experiment and the results are significantly different nowadays.
background
Chrome 54: 443 (µs/div)
Firefox 49: 162 (µs/div)
Edge 10: 56 (µs/div)
background-color
Chrome 54: 449 (µs/div)
Firefox 49: 171 (µs/div)
Edge 10: 58 (µs/div)
As you see - there's almost no difference.
background is the shortcut for background-color and few other background related stuffs as below:
background-color
background-image
background-repeat
background-attachment
background-position
Read the statement below from W3C:
Background - Shorthand property To shorten the code, it is
also possible to specify all the background properties in one single
property. This is called a shorthand property.
The shorthand property for background is background:
body {
background: white url("img_tree.png") no-repeat right top;
}
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long
as the other ones are in this order.
This is the best answer. Shorthand (background) is for reset and DRY (combine with longhand).
background is shorthand property for the following:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
You can detailed info on every property here
Properties order
In most of browser implementation (i think maybe older browser could present issues) the order of the properties does not matter, except for:
background-origin and background-clip: when both of this properties are present, the first one refer to -origin and the second to -clip.
Example:
background: content-box green padding-box;
Is equivalent to:
background-origin: content-box;
background-color: green;
background-clip: padding-box;
background-size must always follow background-position and the properties must be separated by /
if background-position is composed by two numbers, the first one is the horizontal value and the second the vertical value.
I've noticed when generating emails for Outlook...
/*works*/
background: gray;
/*does not work*/
background-color: gray;
You can do some pretty neat stuff once you understand that you can play with inheritance with this. However first let's understand something from this doc on background:
With CSS3, you can apply multiple backgrounds to elements. These are
layered atop one another with the first background you provide on top
and the last background listed in the back. Only the last background
can include a background color.
So when one do:
background: red;
He is setting the background-color to red because red is the last value listed.
When one do:
background: linear-gradient(to right, grey 50%, yellow 2%) red;
Red is the background color once again BUT you will see a gradient.
.box{
border-radius: 50%;
width: 200px;
height: 200px;
background: linear-gradient(to right, grey 50%, yellow 2%) red;
}
.box::before{
content: "";
display: block;
margin-left: 50%;
height: 50%;
border-radius: 0 100% 100% 0 / 50%;
transform: translateX(70px) translateY(-26px) rotate(325deg);
background: inherit;
}
<div class="box">
</div>
Now the same thing with background-color:
.box{
border-radius: 50%;
width: 200px;
height: 200px;
background: linear-gradient(to right, grey 50%, yellow 2%) red;
}
.box::before{
content: "";
display: block;
margin-left: 50%;
height: 50%;
border-radius: 0 100% 100% 0 / 50%;
transform: translateX(70px) translateY(-26px) rotate(325deg);
background-color: inherit;
}
<div class="box">
</div>
The reason this happens is because when we are doing this :
background: linear-gradient(to right, grey 50%, yellow 2%) #red;
The last number sets the background-color.
Then in the before we are inheriting from background (then we get the gradient) or background color, then we get red.
One thing I've noticed that I don't see in the documentation is using
background: url("image.png")
short hand like above if the image is not found it sends a 302 code instead of being ignored like it is if you use
background-image: url("image.png")
There's a bug regarding with background and background-color
the difference of this,
when using background, sometimes when your creating a webpage
in CSS
background: #fff // can over ride a block of Mask image("top item, text or image"))
so its better to always use background-color
for safe use, in your design if its individual
On Yahoo.com, I really like the light gray body gradient background. (Just the gray fade)
However, I can't find the image they use to great this effect.
Does anyone know what image/code Yahoo uses to create this background effect?
It's the image: http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png
If you look at the CSS you'll see:
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
Which is what everybody else is pointing out. However, the part that nobody else has pointed out is that there is also:
background-position: 0px -2335px;
Which defines an offset so that the background you see doesn't actually start till way down the image.
The gradient that is shows is white to grey, then transparent. In order to make the gradient in this manner you have to set the color of the page equal to the last extent of the gradient. So if you look in that CSS you'll also see:
background-color: #E8EDF0;
This completes the gradient you currently see on yahoo.com.
I have also confirmed that #E8EDF0 is the correct hex code for the last non-transparent color on that background image.
in your image app, make a gradient that starts very slightly darker then it ends
Have a look at the Style on the HTML element using something like FireBug or Chrome's Inspect Element or even IE's Developer stuff.
Also a good thing that a lot of beginners don't understand is that you create a gradient image that's for example 100px tall by only 10px wide. then you just use a css style like this:
body { background:
url('backgroundImage/png') repeat-x; }
The repeat-x repeats the image horizontally.
Current yahoo background has the following CSS property
body{
background: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20110124.png) left -2335px repeat-x; /*unsupported fallback*/
background: -moz-linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Firefox*/
background: linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Standard*/
background-color: #dce2e7;
background-attachment: scroll;
}
What I am trying to do is to show both background-color and background-image, so that half of my div will cover the right shadow background image, and the other left part will cover the background color.
But when I use background-image, the color disappears.
It's perfectly possible to use both a color and an image as background for an element.
You set the background-color and background-image styles. If the image is smaller than the element, you need to use the background-position style to place it to the right, and to keep it from repeating and covering the entire background you use the background-repeat style:
background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;
Or using the composite style background:
background: green url(images/shadow.gif) right no-repeat;
If you use the composite style background to set both separately, only the last one will be used, that's one possible reason why your color is not visible:
background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;
There is no way to specifically limit the background image to cover only part of the element, so you have to make sure that the image is smaller than the element, or that it has any transparent areas, for the background color to be visible.
To tint an image, you can use CSS3 background to stack images and a linear-gradient. In the example below, I use a linear-gradient with no actual gradient. The browser treats gradients as images (I think it actually generates a bitmap and overlays it) and thus, is actually stacking multiple images.
background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;
Will yield a graph-paper with light blue tint, if you had the png. Note that the stacking order might work in reverse to your mental model, with the first item being on top.
Excellent documentation by Mozilla, here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
Tool for building the gradients:
http://www.colorzilla.com/gradient-editor/
Note - doesn't work in IE11! I'll post an update when I find out why, since its supposed to.
use
background:red url(../images/samle.jpg) no-repeat left top;
And to add to this answer, make sure the image itself has a transparent background.
Actually there is a way you can use a background color with a background image. In this case, the background part will be filled with that specified color instead of a white/transparent one.
In order to achieve that, you need to set the background property like this:
.bg-image-with-color {
background: url("example.png") no-repeat, #ff0000;
}
Note the comma and the color code after no-repeat; this sets the background color you wish.
I discovered this in this YouTube video, however I'm not affiliated with that channel or video in any means.
Here's an example of using background-image and background-color together:
.box {
background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
width: 100px;
height: 100px;
margin: 10px 0 0 10px;
display: inline-block;
}
<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>
Make half of the image transparent so the background colour is seen through it.
Else simply add another div taking up 50% up the container div and float it either left or right. Then apply either the image or the colour to it.
Gecko has a weird bug where setting the background-color for the html selector will cover up the background-image of the body element even though the body element in effect has a greater z-index and you should be able to see the body's background-image along with the html background-color based purely on simple logic.
Gecko Bug
Avoid the following...
html {background-color: #fff;}
body {background-image: url(example.png);}
Work Around
body {background-color: #fff; background-image: url(example.png);}
Hello everyone I tried another way to combine background-image and background-color together:
HTML
<article><canvas id="color"></canvas></article>
CSS
article {
height: 490px;
background: url("Your IMAGE") no-repeat center cover;
opacity:1;
}
canvas{
width: 100%;
height: 490px;
opacity: 0.9;
}
JAVASCRIPT
window.onload = init();
var canvas, ctx;
function init(){
canvas = document.getElementeById('color');
ctx = canvas.getContext('2d');
ctx.save();
ctx.fillstyle = '#00833d';
ctx.fillRect(0,0,490,490);ctx.restore();
}
Please let me know if it worked for you
Thanks
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;