I'm just starting to build a website, and am just fleshing out the css.
Two problems:
I'm using rgba to get a transparent background, and using a transparent png to emulate this in older browsers. I'm using a cascade like this:
rule {
background: url(/media/img/white_0.9_pixel.png);
background: rgba(255, 255, 255, 0.9);
}
In IE these backgrounds don't cover the whole of the sections they are applied to... Any ideas why?
The drop down menu is incorrectly placed in IE. I'm positioning it absolutely, but adding a margin to shove it into the right place in Webkit - guessing that's the wrong way to align a drop down, and it's not working across browsers. Any suggestions there?
Thanks a lot - just writing questions on here helps me to think!
A link to the site : http://bit.ly/11GGCx
Which IE versions exhibit the problems?
As with many IE bugs, try giving layout to the elements with improperly rendered backgrounds.
When you don't specify the "left" property of an absolutely positioned element, IE rarely generates the value you want. According to the CSS 2.1 spec, "left" should be set to the static position, but the browser can guess this position so it's best to be explicit. The standard method is to give the menu items relative positioning to create a containing block for each submenu and set "top" and "left" for the submenus.
.nav li {
position: relative;
/* note: don't set a box offset (e.g. "left") here */
}
.nav ul {
position: absolute;
top: 1em;
left: 0;
}
Did you specify background-repeat?
Have you tried with css opacity concept?
Try the below code.
rule {
background: #fff;
opacity: .5;
-moz-opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* for IE8 *//* Comes First to apply optacity in all ie versions*/
filter: alpha(opacity=50); /* for IE5-7 *//* Comes second to apply opacity in all ie versions*/
}
Note: Don't change the order of above lines. Also i recommend not to use rgba background.
Try this. Hope this helps
Related
I am trying to apply a filter on the entire webpage for creating an inverted view of the page. The page has fixed-positioned elements (some buttons and block). So the easiest way is to invert the color of each element on the webpage, including fixed position buttons. To invert the colors I use the following css code:
html {
filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
-webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
}
This works fine in chrome, but not in firefox. The inverting works but it changes the position of two buttons that are defined as follows:
#topbtn {
display: none;
position: fixed;
width: 40px;
height: 40px;
overflow: hidden;
outline:none;
bottom: 20px;
right: 20px;
z-index: 99;
}
I have tried to change the filters but no luck. No error is shown. I know this may be duplicate of similar issues in Firefox. But, the other questions are mostly to deal with some div or some element inside another element.
IMO, this question is different as the filter applies to the entire page and I don't want to apply the filter to each element one-by-one too naive.
I hope someone has already encountered and solved the problem for Firefox (especially the dark mode theme guys).
I want an Vista/7-aero-glass-style effect on a popup on my site, and it needs to be dynamic. I'm fine with this not being a cross-browser effect as long as the site still works on all modern browsers.
My first attempt was to use something like
#dialog_base {
background:white;
background:rgba(255,255,255,0.8);
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}
However, as I should have expected, this resulted in the content of the dialog being blurred and the background staying clear. Is there any way to use CSS to blur the background of a semitransparent element instead of its contents?
OCT. 2016 UPDATE
Since the -moz-element() property doesn't seem to be widely supported by other browsers except to FF, there's an even easier technique to apply blurring without affecting the contents of the container. The use of pseudoelements is ideal in this case in combination with svg blur filter.
Check the demo using pseudo-element
(Demo was tested in FF v49, Chrome v53, Opera 40 - IE doesn't seem to support blur either with css or svg filter)
The only way (so far) of having a blur effect in the background without js plugins, is the use of -moz-element() property in combination with the svg blur filter. With -moz-element() you can define an element as a background image of another element. Then you apply the svg blur filter. OPTIONAL: You can utilize some jQuery for scrolling if your background is in fixed position.
See my demo here
I understand it is a quite complicated solution and limited to FF (element() applies only to Mozilla at the moment with -moz-element() property) but at least there's been some effort in the past to implement in webkit browsers and hopefully it will be implemented in the future.
In recent versions of major browsers you can use backdrop-filter property.
HTML
<div>backdrop blur</div>
CSS
div {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
or if you need different background color for browsers without support:
div {
background-color: rgba(255, 255, 255, 0.9);
}
#supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
div {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
}
Demo: JSFiddle
Docs: Mozilla Developer: backdrop-filter
Is it for me?: CanIUse
You can use a pseudo-element to position as the background of the content with the same image as the background, but blurred with the new CSS3 filter.
You can see it in action here: http://codepen.io/jiserra/pen/JzKpx
I made that for customizing a select, but I added the blur background effect.
There is a simple and very common technique by using 2 background images: a crisp and a blurry one. You set the crisp image as a background for the body and the blurry one as a background image for your container. The blurry image must be set to fixed positioning and the alignment is 100% perfect. I used it before and it works.
body {
background: url(yourCrispImage.jpg) no-repeat;
}
#container {
background: url(yourBlurryImage.jpg) no-repeat fixed;
}
You can see a working example at the following fiddle: http://jsfiddle.net/jTUjT/5/. Try to resize the browser and see that the alignment never fails.
If only CSS element() was supported by other browsers other than Mozilla's -moz-element() you could create great effects. See this demo with Mozilla.
Use an empty element sized for the content as the background, and position the content over the blurred element.
#dialog_base{
background:white;
background:rgba(255,255,255,0.8);
position: absolute;
top: 40%;
left: 50%;
z-index: 50;
margin-left: -200px;
height: 200px;
width: 400px;
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}
#dialog_content{
background: transparent;
position: absolute;
top: 40%;
left: 50%;
margin-left -200px;
overflow: hidden;
z-index: 51;
}
The background element can be inside of the content element, but not the other way around.
<div id='dialog_base'></div>
<div id='dialog_content'>
Some Content
<!-- Alternatively with z-index: <div id='dialog_base'></div> -->
</div>
This is not easy if the content is not always consistently sized, but it works.
In which way do you want it dynamic? If you want the popup to successfully map to the background, you need to create two backgrounds. It requires both the use of element() or -moz-element() and a filter (for Firefox, use a SVG filter like filter: url(#svgBlur) since Firefox does not support -moz-filter: blur() as yet?). It only works in Firefox at the time of writing.
See demo here.
I still need to create a simple demo to show how it is done. You're welcome to view the source.
One liner code -
backdrop-filter: blur(5px);
I am applying an overlay effect to a webpage with the CSS shown here:
.jqifade{
position: relative;
background-color: #000000;
height:2315px !important; /*set to page height*/
}
This CSS overlays the entire webpage with a color (black) which is later set to 30% opacity with JS. I would like to exclude a div with id="noOverlay" so that the CSS is NOT applied to this div. Is this possible? And if so... how??
It may be possible to make the z-index of that certain element higher than the overlay. Also for the overlay you might consider using rgba for the opacity.
.jqifade{
position: relative;
background-color: rgba(255, 255, 255, .3);
height:2315px !important; /*set to page height*/
}
Just watch for browser compatibility with this.
The simplest solution is removing class jqifade from div with id noOverlay:
$("#noOverlay").removeClass("jqifade").
Or use CSS3 :not selector (works in all modern browsers):
.jqifade:not(#noOverlay) {}
EDIT:
Another solution: apply css styles using jQuery:
$(".jqifade:not(#noOverlay)").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;
I have a problem with the IE (what else?):
I generate content with CSS which has also a background-image.
I looks like that:
#nav ul li:after {
content: "--";
position: relative;
z-index: 99;
background: transparent url(image.png);
color: transparent;
}
The text color is in non-IE-browsers transparent, but in all IE browsers (IE6-IE8) it's black and you could see it.
How could I make the text transparent/unvisible?
I tried already: visibility - opacity - filter - text-indent ...
But none did his job right, either it disappears (with it background which I need) or the attribute doesn't apply.
if what you're trying to do is show the image as background and not showing the text use
font-size:0px
it works!
what about using line-height
line-height:0;
it worked in my case.
I get it: With the correct padding and a zero font-size! Set the padding-left value to be one pixel beyond the image width.
If this doesn't work in Internet Explorer 8
font-size: 0;
make sure you're using a valid doctype:
<!DOCTYPE html>
This should work. If it doesn't add display: block or inline-block
.transparent {
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
I think no versions of IE support color: transparent
Perhaps you could try to do it with jQuery or something like that.
I assume you already fixed this, but lately i've used a very large line-height, when text-indent is giving me layout problems, combined with overflow: hidden to hide the text.
IE doesn't support li:after consistently. Which IE are you talking about? IE6? IE7? Both?
For me color:transparent was not working in IE8, and it was showing text with default color. I used visibility:hidden; for IE8 only as the text was not required to display.
Hope this help in case, if the element is not required to display.
I see you're using a PNG as your background image. Normally, if you're using IE 6, there is a fix for PNG transparency (http://www.twinhelix.com/css/iepngfix/). Even so, this will not work with background-images. So if you're using IE 6, there really isn't a fix.