CSS Z-index for Background Images - css

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.

Related

How do I achieve responsive linear gradient without changing the positioning units of other elements?

What I mean by responsive is that the gradient transition of the background would be always at the height of a select transparent element, because it would be a design feature to have the gradient transition in the background of the transparent element.
If I view this codepen snippet in chrome code inspector and emulate a view in a different resolution, the transition would be below or above the transparent element.
How do I get the transition exactly under the transparent element on all resolutions without changing the positioning unit type of the transparent element?
I tried to use also % for the gradient stop, but it won't be responsive.
I used a heading as a transparent element for the sake of simplicity, but it's a flexbox row actually, just below the website header and above the page content, so changing the positioning units of that row it seems impossible.
h1 {
padding-top: 35px;
padding-left: 50%;
font-size: 10vh;
color: #00000020;
}
div {
height: 700px;
background: linear-gradient(to bottom, #f19585, #f19585 20vh, #f9e314 26vh, #f9e314 60vh, #9a080f 61vh, #9a080f);
}
<div>
<h1>Hello</h1>
</div>
(codepen)

Z-index on multiple DIV containers and transparency not working

I have a page that contains multiple div containers. The first one is a page container and the next one is a Modal container. Within the Modal container, I have first window container. Outside of the Modal container, I have another DIV container for buttons.
What I want is to have both Modal container and button container at a different level(both at the same level) and the rest in the lower layer, with a transparency between them.
I have tried to capture the situation in(filter idea i got from seaching stackoverflow questions):
http://jsfiddle.net/Q2CNz/
#Modalcontainer {
position:absolute;
z-index :9999;
background: transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
/* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
/* IE6 & 7 */
zoom: 1;
}
I am running into couple of problems in IE:
a) Stuff in first window and and button container are not on the same level. This may be something to do with postion? I tried a few combos and nothing worked
b) There is no transparency between the stuff at the higher level and the one at lower level.
This stuff is used in predominently IE6 onwards.
Please let me know , how I can achieve this. Please don't ask me to use jQuery, our mandate dpes NOT allow that.
I'm not quite sure what you mean by a "transparency" between them.. what you've got in your code is a gradient (though it's starting from the same color as it's ending on), not an opacity (transparency) setting.
Also as far as them being both at the same level - yet on different levels? you wrote:
What I want is to have both Modal container and button container at a different level(both at the same level)
do you mean lined up alongside each other instead of overlapping?
Since I'm not quite sure what you mean, I changed your example around and added an opacity on the modal container as well as a black to white gradient, and a background color on the page container so you can see the opacity.
http://jsfiddle.net/YCLnj/
#Pagecontent {
background-color:#663333;
}
#Modalcontainer {
width:70px;
height:70px;
padding:30px;
border:2px solid #000;
z-index:9999;
filter: alpha(opacity=70);
opacity:0.7;
-moz-opacity:0.7;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#FFFFFF));
background:-webkit-linear-gradient(center top, #000000, #FFFFFF);
background:-moz-linear-gradient(center top, #000000, #FFFFFF);
background:-o-linear-gradient(center top, #000000, #FFFFFF);
background:linear-gradient(center top, #000000, #FFFFFF) repeat scroll 0 0 transparent;
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#FFFFFF)";
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000, endColorstr=#FFFFFF)";
/* IE6 & 7 */
zoom: 1;
}
#buttonContainer {
position:relative;
z-index:9999;
background:transparent;
padding:10px;
width:100px;
border: 2px dotted #CC33FF;
}
If you meant for the divs to be overlapping each other, you would just change the position to absolute on each of them and adjust the z-index accordingly, with the lowest number being placed at the bottom and highest on top. You would probably want to put the button layer on the top in that case, as otherwise the user won't be able to access the buttons to click.

CSS : Background Image with Background Gradient

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;

Offset a background image from the right using CSS

Is there a way to position a background image a certain number of pixels from the right of its element?
For example, to position something a certain number of pixels (say, 10) from the left, this is how I'd do it:
#myElement {
background-position: 10px 0;
}
I found this CSS3 feature helpful:
/* to position the element 10px from the right */
background-position: right 10px top;
As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.
See Can I use for details on the supported browsers.
Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/
Update:
This feature is now supported in all major browsers, including mobile browsers.
!! Outdated answer, since CSS3 brought this feature
Is there a way to position a background image a certain number of pixels from the right of its element?
Nope.
Popular workarounds include
setting a margin-right on the element instead
adding transparent pixels to the image itself and positioning it top right
or calculating the position using jQuery after the element's width is known.
The easiest solution is to use percentages. This isn't exactly the answer you were looking for since you asked for pixel-precision, but if you just need something to have a little padding between the right edge and the image, giving something a position of 99% usually works well enough.
Code:
/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
background: url("/images/source.jpg") 99% center no-repeat;
}
Outdated answer: It is now implemented in major browsers, see the
other answers to this question.
CSS3 has modified the specification of background-position so that it will work with different origin point. Unfortunately, I can't find any evidence that it is implemented yet in any major browsers.
http://www.w3.org/TR/css3-background/#the-background-position
See example 12.
background-position: right 3em bottom 10px;
As proposed here, this is a pretty cross browser solution that works perfectly:
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
I used it since the CSS3 feature of specifying offsets proposed in the answer marked as solving the question is not supported in browsers so well yet. E.g.
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+ */
A simple but dirty trick is to simply add the offset you want to the image you are using as background. it's not maintainable, but it gets the job done.
This will work on most modern browsers...apart from IE (browser support). Even though that page lists >= IE9 as supported, my tests didn't agree with that.
You can use the calc() css3 property like so;
.class_name {
background-position: calc(100% - 10px) 50%;
}
For me this is the cleanest and most logical way to achieve a margin to the right. I also use a fallback of using border-right: 10px solid transparent; for IE.
Ok If I understand what your asking you would do this;
You have your DIV container called #main-container and .my-element that is within it. Use this to get you started;
#main-container {
position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
position:absolute;
top:0;
right:10px;
}
/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
float:right;
margin-right:10px;
}
By the way, it better practice to use classes if you referencing a lower level element within a page (I assume you are hence my name change above.
background-position: calc(100% - 8px);
The CSS3 specification allowing different origins for background-position is now supported in Firefox 14 but still not in Chrome 21 (apparently IE9 partly supports them, but I've not tested it myself)
In addition to the Chrome issue that #MattyF referenced there's a more succinct summary here:
http://code.google.com/p/chromium/issues/detail?id=95085
If you have proportioned elements, you could use:
.valid {
background-position: 98% center;
}
.half .valid {
background-position: 96% center;
}
In this example, .valid would be the class with the picture and .half would be a row with half the size of the standard one.
Dirty, but works as a charm and it's reasonably manageable.
If you would like to use this for adding arrows/other icons to a button for example then you could use css pseudo-elements?
If it's really a background-image for the whole button, I tend to incorporate the spacing into the image, and just use
background-position: right 0;
But if I have to add for example a designed arrow to a button, I tend to have this html:
Read more
And tend to do the following with CSS:
.read-more{
position: relative;
padding: 6px 15px 6px 35px;//to create space on the right
font-size: 13px;
font-family: Arial;
}
.read-more:after{
content: '';
display: block;
width: 10px;
height: 15px;
background-image: url('../images/btn-white-arrow-right.png');
position: absolute;
right: 12px;
top: 10px;
}
By using the :after selector, I add a element using CSS just to contain this small icon. You could do the same by just adding a span or <i> element inside the a-element. But I think this is a cleaner way of adding icons to buttons and it is cross-browser supported.
you can check out the fiddle here:
http://codepen.io/anon/pen/PNzYzZ
use center right as the position then add a transparent border to offset it?
If you have a fixed width element and know the width of your background image, you can simply set the background-position to : the element's width - the image's width - the gap you want on the right.
For example : with a 100px-wide element and a 300px-wide image, to get a gap of 10px on the right, you set it to 100-300-10=-210px :
#myElement {
background:url(my_image.jpg) no-repeat -210px top;
width:100px;
}
And you get the rightmost 80 pixels of your image on the left of your element, and a gap of 20px on the right.
I know it can sound stupid but sometimes it saves the time... I use that much in a vertical manner (gap at bottom) for navigation links with text below image.
Not sure it applies to your case though.
my problem was I needed the background image to stay the same distance from the right border when the window is resized i.e. for tablet / mobile etc
My fix is to use a percenatge like so:
background-position: 98% 6px;
and it sticks in place.
yes! well to position a background image as though 0px from the right-hand side of the browser instead of the left - i use:
background-position: 100% 0px;

Position a CSS background image x pixels from the right?

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;

Resources