How do I add a url background image to the gradient and position it specifically?
Because the gradient is treated as an image in itself
CSS
background: linear-gradient(to bottom, #98cb01 2%,#60a822
100%)!important;
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
Multiple background images is a cool feature of CSS3. The syntax is
easy, you just comma separate them. I find it's easiest/best to use
the background shorthand property so you can declare the position and
repeating and whatnot and keep them all grouped together. What isn't
obvious while looking at the syntax is which image is on top in the
vertical stacking order when those images overlap. The spec is clear
in this regard and browser implimentations follow. The first is on top
and they go down from there.
CSS
background:
url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */
url(thingy.png) 10px 10px no-repeat, /* like z-index: 3; */
url(Paper-4.png); /* On bottom, like z-index: 1; */
It's like z-index but this isn't z-index, it's parts of one single
element.
I think it's slightly confusing, since it's the opposite of how HTML
works naturally. If all elements have the same z-index (and are
positioned in some way and overlap) the last element will be on top,
not the first. Not that big of a deal though, just need to learn it
once.
The big thing to remember is that if you were to use one of the
background for a fully opaque / fully repeating image, list that one
last not first, otherwise it will cover all the others up.
Also remember that while multiple backgrounds is totally radical, the
fallback for browsers that don't support it is that it displays
nothing at all for the background, so be careful there. The best way
to handle it, as always, is Modernizr. They even use it as the demo
right on the homepage of their site (adjusted for clarity):
CSS
.multiplebgs body
{
/*
Awesome multiple BG declarations that
transcend reality and impress chicks
*/
}
.no-multiplebgs body
{
/* laaaaaame fallback */
}
So for your example, you could do:
background:
url(number.png) 600px 10px no-repeat,
linear-gradient(to bottom, #98cb01 2%,#60a822 100%)!important;
Related
I have two background images-a and b. Automaticly A is in front of B. Can I change this using Z-index?
You can have multiple background images...but the stacking order is determined by the order they are listed in your CSS.
background:
url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */
url(thingy.png) 10px 10px no-repeat, /* Middle like z-index: 3; */
url(Paper-4.png); /* On bottom, like z-index: 1; */
CSS-Tricks Article
It's not a good idea because Z-index requires that the image is Absolutely positioned which can cause other layout problems in different browsers. it's better if you put the image in as a background image using CSS and transition for changing background. Here you have a sample of background transition.
background: -webkit-linear-gradient(#FFFFFF, #EAEAEA);
background: -o-linear-gradient(#FFFFFF, #EAEAEA);
background: -moz-linear-gradient(#FFFFFF, #EAEAEA);
background: linear-gradient(#FFFFFF, #EAEAEA);
What I basically want to do, is to have some sort of minimum and maximum gradient length (for instance, the gradient can't be smaller than 500px, even if the background is, and neither can it be bigger than 500px, even if the background is). I have tried using this method:
background-size:500px;
(aswell as combining it with background-repeat:y-repeat), but that doesn't work, since the gradient later on repeats itself from top (and what I would like is for it to maintain its ending-color through the rest of the element).
So shortly, I'm wondering if there's a way to stop a gradient after a certain height, only allowing it to cover a part of the element (hence, preventing it from looking different on all pages, with different sized elements), without using images as background. However, I'd also like to know if using this method is worth it, both when it comes to compatibility and effort.
Thanks!
You just need to add color stops to your gradient, like so:
Working Example
body, html {
height:200%;
}
body {
background: -moz-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
background: -webkit-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
}
MDN Documentation for Linear-gradient
So I made the following test fiddle, and it seems that if you specify a background-size then the gradient will be resized to that size regardless of the element dimensions (note that you have to explicitly define a width and a hight for background-size to work properly in Firefox).
http://jsfiddle.net/myajouri/y4b3Z/
I have checked this in latest Chrome, Safari and Firefox and looks the same in all three borwsers.
This question already has answers here:
CSS: Background image and padding
(9 answers)
Closed 3 years ago.
I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/ example:
http://jsbin.com/umuvud/edit#javascript,html,live
Thanks!
Updated Answer:
It's been commented multiple times that this is not the correct answer to this question, and I agree. Back when this answer was written, IE 9 was still new (about 8 months old) and many developers including myself needed a solution for <= IE 9. IE 9 is when IE started supporting background-origin. However, it's been over six and a half years, so here's the updated solution which I highly recommend over using an actual border. In case < IE 9 support is needed. My original answer can be found below the demo snippet. It uses an opaque border to simulate padding for background images.
#hello {
padding-right: 10px;
background-color:green;
background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
background-origin: content-box;
}
<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>
Original Answer:
you can fake it with a 10px border of the same color as the background:
http://jsbin.com/eparad/edit#javascript,html,live
#hello {
border: 10px solid #e8e8e8;
background-color: green;
background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
no-repeat scroll right center #e8e8e8;
}
this is actually pretty easily done. You're almost there, doing what you've done with background-position: right center;. What is actually needed in this case is something very much like that. Let's convert these to percentages. We know that center=50%, so that's easy enough. Now, in order to get the padding you wanted, you need to position the background like so: background-position: 99% 50%.
The second, and more effective way of going about this, is to use the same background-position idea, and just use background-position: 400px (width of parent) 50%;. Of course, this method requires a static width, but will give you the same thing every time.
Method 1 (99% 50%)
Method 2 (400px 50%)
There is actually a native solution to this, using the four-values to background-position
.CssClass {background-position: right 10px top 20px;}
This means 10px from right and 20px from top.
you can also use three values the fourth value will be count as 0.
you can use background-origin:padding-box; and then add some padding where you want, for example: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}
This way you attach the image to the div padding box that contains it so you can position it wherever you want.
In case anyone else needs to add padding to something with background-image and background-size: contain or cover, I used the following which is a nice way of doing it. You can replace the border-width with 10% or 2vw or whatever you like.
.bg-image {
background: url("/image/logo.png") no-repeat center #ffffff / contain;
border: inset 10px transparent;
box-sizing: border-box;
}
This means you don't have to define a width.
first off, to be a bit of a henpeck, its best NOT to use just the <background> tag. rather, use the proper, more specific, <background-image> tag.
the only way that i'm aware of to do such a thing is to build the padding into the image by extending the matte. since the empty pixels aren't stripped, you have your padding right there. so if you need a 10px border, create 10px of empty pixels all around your image. this is mui simple in Photoshop, Fireworks, GIMP, &c.
i'd also recommend trying out the PNG8 format instead of the dying GIF... much better.
there may be an alternate solution to your problem if we knew a bit more of how you're using it. :) it LOOKS like you're trying to add an accordion button. this would be best placed in the HTML because then you can target it with JavaScript/PHP; something you cannot do if it's in the background (at least not simply). in such a case, you can style the heck out of the image you currently have in CSS by using the following:
#hello img { padding: 10px; }
WR!
To add space before background image, one could define the 'width' of element which is using 'background-image' object. And then to define a pixel value in 'background-position' property to create space from left side.
For example, I'd a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state. Further, the active link also had a background-color to show, and this background-color had approximate 15px padding both on left and right side of link item (so on left, it includes bullet icon of link too).
While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text. The padding-left only added to space between link text and bullet.
So I took the width of background-color object from PSD design (for ex. 82px) and added that to li element (in a class created to show active state) and then I set background-position value to 20px. Which resulted in bullet icon shifted inside from the left edge. And its provided me desired output of having left padding before bullet icon used as background image.
Please note, you may need to adjust your padding / margin values accordingly, which may used either for space between link items or for spacing between bullet icon and link text.
I think the answer is no, but can you position a background image with CSS, so that it is a fixed amount of pixels away from the right?
If I set background-position values of x and y, it seems those only give fixed pixel adjustments from the left and top respectively.
background-position: right 30px center;
It works in most browsers. See: http://caniuse.com/#feat=css-background-offsets for full list.
More information: http://www.w3.org/TR/css3-background/#the-background-position
It is possible to use attribute border as length from the right
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
There is one way but it's not supported on every browser (see coverage here)
element {
background-position : calc(100% - 10px) 0;
}
It works in every modern browser, but it is possible that IE9 is crashing. Also no coverage for =< IE8.
As far as I know, the CSS specification does not provide for exactly what you're asking, outside of CSS expressions, of course. Working off the assumption that you don't want to use expressions or Javascript, I see three hackish solutions:
Make sure your background image matches the size of the container (at least in width) and set background-repeat: repeat or repeat-x if only the width is equalized. Then, having something appear x pixels from the right is as simple as background-position: -5px 0px.
Using percentages for background-position exhibits special behaviour that is better seen than described here. Give it a shot. Essentially, background-position: 90% 50% will make the right edge of the background image line up 10% away from the right edge of the container.
Create a div containing the image. Explicitly set the position of the containing element position: relative if not already set. Set the image container to position: absolute; right: 10px; top: 10px;, obviously adjusting the final two as you see fit. Place the image div container into the containing element.
Try this:
#myelement {
background-position: 100% 50%;
margin-right: 5px;
}
Note though that the code above will move the whole element (not the background image only) 5px from the right. This might be ok for your case.
You can do it in CSS3:
background-position: right 20px bottom 20px;
It works in Firefox, Chrome, IE9+
Source: MDN
Image workaround with transparent pixels on the right to serve as right margin.
The image workaround for the same is to create a PNG or GIF image (image file formats that support transparency) which has a transparent portion on the right of the image exactly equal to the number of pixels that you want to give a right margin of (eg: 5px, 10px, etc.)
This works well consistently across fixed widths as well as widths in percentages.
Practically a good solution for accordion headers having a plus/minus or up/down arrow image on the header's right!
Downside: Unfortunately, you cannot use JPG unless the background portion of the container and the background color of the CSS background image are of the same flat color (with out a gradient/vignette), mostly white/black etc.
If you happen to stumble on this topic in these days of modern browsers you can use pseudo-class :after to do practicaly anything with the background.
.container:after{
content:"";
position:absolute;
right:20px;
background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}
this css will put background to bottom right corner of ".container" element with 20px space on the right side.
See this fiddle for example http://jsfiddle.net/h6K9z/226/
The most appropriate answer is the new four-value syntax for background-position, but until all browsers support it your best approach is a combination of earlier responses in the following order:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
If you want to specify only the x-axis, you can do the following:
background-position-x: right 100px;
Just put the pixel padding into the image - add 10px or whatever to the canvas size of the image in photohop and align it right in CSS.
I was trying to do a similar task to get a dropdown arrow always on the right side of the table header and came up with this which seemed to work in Chrome and Firefox, but safari was telling me it was an invalid property.
background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;
After doing a bit of messing around in the inspector, I came up with this cross-browser solution that works in IE8+, Chrome, Firefox, and Safari, as well as responsive designs.
background: url(http://goo.gl/P93P5Q) no-repeat 95% center;
Here is a codepen of how it looks and works. Codepen is written with SCSS - http://cdpn.io/xqGbk
You can position your background image in an editor to be x pixels from the right side.
background: url(images_url) no-repeat right top;
The background image will be positioned in top right, but will appear to be x pixels from the right.
Works for all real browsers (and for IE9+):
background-position: right 10px top 10px;
I use it to RTL WordPress themes.
See example: temporary website or the real website will be up soon.
Look at the icons at the big DIVs right corners.
Another solution I haven't seen mentioned is to use pseudo elements and I do believe this solution will work with any CSS 2.1 compliant browser (≥ IE8,≥ Safari 2, ...) and it should also be responsive :
element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}
Example: The element eg. a square sized 100px (without considering borders) has a 10px padding and a background image should be shown inside the right padding. This means the pseudo-element is a 80px sized square. We want to stick it to the right border of the element with right:-10px;. If we'd like to have the background-image 5px away from the right border we need to stick the pseudo-element 5px away from the right border of the element with right:-5px;...
Test it for your self here : http://jsfiddle.net/yHucT/
If the container has a fixed height:
Tweek the percentages (background-position) until it fits correctly.
If the container has a dynamic height:
If you want a padding between your background and your container (such as when custom styling inputs, selects), add your padding to your image and set the background position to right or bottom.
I stumbled on this question while I was trying to get the background for a select box to fit say 5 px from the right of my select. In my case, my background is an arrow down that would replace the basic drop down icon. In my case, the padding will always remain the same (5-10 pixels from the right) for the background, so it's an easy modification to bring to the actual background image (making its dimensions 5-10 pixels wider on the right side.
Hope this helps!
Tweaking percentages from the left is a little brittle for my liking. When I need something like this I tend to add my container styling to a wrapper element and then apply the background on the inner element with background-position: right bottom
<style>
.wrapper {
background-color: #333;
border: solid 3px #222;
padding: 20px;
}
.bg-img {
background-image: url(path/to/img.png);
background-position: right bottom;
background-repeat: no-repeat;
}
.content-breakout {
margin: -20px
}
</style>
<div class="wrapper">
<div class="bg-img">
<div class="content-breakout"></div>
</div>
</div>
The .content-breakout class is optional and will allow your content to eat into the padding if required (negative margin values should match the corresponding values in the wrapper padding). It's a little verbose, but works reliably without having to be concerned about the relative positioning of the image compared to its width and height.
Its been loong since this question has been asked, but I just ran into this problem and I got it by doing :
background-position:95% 50%;
Solution for negative values. Adjust the padding-right to move the image.
<div style='overflow:hidden;'>
<div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>
</div>
</div>
Better for all
background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;
This works in Chrome 27, i don't know if it's valid or not or what other browswers do with it. I was surprised about this.
background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;
I'm attempting to use a CSS gradient in a div containing some text. With Gecko and Webkit, the text displays fine. In IE7 & IE8 the text appears aliased (jaggy).
I came across this blog stating: "we decided to disable ClearType on elements that use any DXTransform".
IE Blog:
http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
That was back in 2006; 3.5 years later, I assume this bug would be fixed, but it's not. Is there a way to do this in IE8 without resorting to stuffing a repeating background image in the div?
Here's an example of what I mean.
<style>
div
{ height: 50px;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
</style>
<div>Hello World</div>
<p>Normal text</p>
In IE, the text in the div is aliased (jaggy), and the text in the paragraph is not.
Any solution that doesn't involve images would be greatly appreciated.
There's no good solution to this problem.
Worse yet: progid:DXImageTransform.Microsoft.gradient is horribly buggy so mouse events (hover, click, etc.) pass right trough it - a click on such an element also triggers a seperate click on whichever element that happens to be positions behind it. Beware!
Regardless, you better start considering which fallbacks/workarounds/NastyHacks feel acceptable to you.
Here are a few ideas off the top of my mind - in order of my personal preference:
Just fall-back to a plain solid background-color in IE and move on with your life. (Be sure to place that background rule first for it to be safely overridden/ignored by FF and Webkit.)
Use a background-image in IE. (Again place that CSS rule at first)
Keep using the gradient hack and simply 'suck it up' and accept the jaggy text for IE.
use Javascript (or IE's proprietary CSS expression() syntax) to inject an empty element, apply the gradient to it and place it behind the text.
div {
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
behaviour: expression( jQuery(this).wrapInner('<div class="ie-wrap"/>').prepend('<div class="ie-gradient"/>'); this.runtimeStyle.behaviour='none'); /* disable repeat runs */
position: relative;
}
div div.ie-wrap {
position: relative;
}
div div.ie-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: expression( this.runtimeStyle.height=this.parentNode.clientHeight+"px" );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
(Warning: above code is untested pile of crap. and will probably not work as is.)
Keep using the gradient hack and use Cufon to replace the jaggy text with VML rendered text. (Rests on the assumption that your site is using a typeface that allows font-embedding.)
You could try using an IE css 3 html component, like PIE (http://css3pie.com,) which does a fairly decent job of rendering gradients. (Though this is essentially using javascript)
Wrap the content with a DIV then add this to the DIV's css style...
position: relative;
http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html
I had a situation where I wanted backgrounds of text areas to be certain colours fading horizontally to white and defined by hexadecimal in the CSS. I wanted to avoid making colour background images in case a non-developer member of my company wanted to add a new colour with hexadecimal only.
The solution I found was to make a 24-bit PNG of white gradienting into transparent set to the width of the area I was making.
I then used this IE-only hack to get the CSS to render a background colour of my choice that fades to white:
background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9;
(the hack could be improved, but it works for me, including IE9)
I found another inexpensive (bit opaque) solution. The text becomes anti-alised back again, when wrapping the text node and setting each element to relative position. Do not ask why...
Lets assume:
<html>
<head>
<title>IE8 filter problem causing jagged fonts</title>
<style>
html, body, div, span, b, i, ul, li, h1, h2, h3 ... to be continued {
position: relative;
}
.gradient {
filter:
progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#e6e6e6');
}
</style>
</head>
<body>
<div class="gradient">
<div>I am wrapped, therefore not jagged</div>
</div>
</body>
</html>
Hope that helps anyone out there. In this case it's not necessary to use background images or derivates.
Working example in jsfiddle: http://jsfiddle.net/SLZpE/2/
This may not count as elegant (or working) solution, but how about using Cufón for IE?
Yes, that's a problem with IEx.
Try using a solid background color:
/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc
Now, no need to use the expression "...stuffing a repeating background image", since there's nothing wrong with using a background image and repeat it, we should be thankful that we can not only do that, but we can repeat it in X and Y.
Of course, you want to make your repeating background image as efficient as possible, so make it small/thin (depending on your design) and use it, rest assured, you are not doing anything wrong or against any standards or best practices.