I want to position a background of an label element to the left but it is never on the left in ie9+.
My code is similar to this
label {
background-image: url('some-image.svg');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}
This is working in all the browsers but (of course) in the ie9+, strangely it is working in ie8.
I hope someone can help because I can't simple position it fixed with a negative background offset.
I got the solution. It was related to the SVG Images I was using in newer versions of IE and Safari that caused the error. It seems that SVGs always have a with of 100% even as backgrounds.
So If you need to positon an image for eg a checkbox or radiobutton like me, you should have a fallback to PNGs for such Browsers.
Related
Here's the CSS. I tried the shorthand that is commented and the long form and none work in IE. I'm even using the latest version of IE. For some reason the image won't display. I tried with multiple images, even just jpgs.
main{
/* background: url(../images/mosaic-min.png) repeat fixed center center;*/
background-image: url(../images/mosaic-min.png);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
}
I know there is a bug if you don't have a space by the url and the next declaration in the shorthand, but there is a space there. Not even the long form works, though. It is a very large area to cover with the image. Maybe IE automatically prevents this?
I have the very simple task of applying a background image to a DIV. I can view the image with every other browser except Safari. Can someone take a look at my CSS and site and tell me what I'm doing wrong.
CSS:
#intro2services {
background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed;
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Site:
www.designedbysheldon.com
I played around with your site for a few minutes, and I suggest breaking up your styles for the background rather than condensing some while having others declared on their own. Change your CSS to:
#intro2services {
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
background-attachment: fixed;
}
That removed the repeat, applied the gradient, and applied the cover sizing correctly. This is tested and working in Chrome and Safari. Firefox only works when the -moz vendor prefix is added. You can add the other vendor prefixes to be safe, but gradients are implemented in the other major browsers at this point.
This is a know issue with Safari. Most of the time, adding a negative z-index to your style, will solve the issue.
z-index:-1:
Apparently Safari--or at least some versions of it--refuses to apply CSS to form fields, so if you have a clever little search box like I do, Safari won't render any CSS applied to it. I thought it was specific to my use of SVGs and then I thought it had something to do with the short code. I was stuck until I found an obscure post on GitHub from a MarcHaunschild from 2011 discussing this behavior. Anyway in the case that you're trying to style a field such as a search box, here's the fix.
Add the following to your CSS:
input[type="search"] {
-webkit-appearance: textfield;
}
I am having a weird problem with ie8 and lower. I apply a backgound image and color to the body element with CSS. The background is, however, painted white in IE8 and lower when I load the page.
In the moment i resize a little bit the window the background is correctly applied.
body {
background-image: url(../images/main.gif);
background-repeat: repeat-x;
background-position: top left;
background-color: #6e9b68;
}
A live site suffering this problem.
Any idea how to solve this issue?
It's a bug in the version of jQuery you're using (v1.6.1).
I came across the same problem in this question, it has all the info you need: Weird IE8 layout glitch - why does the body background disappear?
Is there a way to assign multiple backgrounds to a single element DIV.
The idea being to have rounded corners on the top and bottom of a div with a straight background image in the middle.
Two images --
cbmain.png has the corners and cbmains.png is a straight image. They are both transparent and I hope there is a way of managing this in CSS.
Something like ::
background-top:url(example.com/images/cbmain.png) 960px 10px;
background:url(example.com/images/cbmains.png) 960px;
background-bottom:url(example.com/images/cbmain.png) 960px 10px;
With CSS3 you can do something like:
background-image: url(example.com/images/cbmain.png), url(example.com/images/cbmains.png);
background-position: 960px 10px, 960px;
This will work in Firefox 3.6+, Chrome, Safari, IE9. For earlier releases of IE, you can use CSS3 Pie.
Unfortunately multiple-background is a CSS3 thing. I already tested and worked with it on IE9, Firefox, Chrome, Opera, Safari. Your code with the CSS3 syntax would be something like:
background-image: url(example.com/images/cbmain.png), url(example.com/images/cbmain.png), url(example.com/images/cbmains.png);
background-position: 960px top, 960px bottom, 960px top;
background-repeat: no-repeat, no-repeat, repeat-x;
Also I suggest you a graceful degradation using Modernizr for those old IE:
.no-multiplebgs #element { background: url(example.com/images/cbmains.png) 960px; }
Another approach (that I don't like) is using any polyfill to force IE6, IE7 and IE8 to work as IE9. Wich can cause problems, memory leaks, etc, etc, etc.
Yes but only with CSS3 support. Otherwise, you have to cheat with DIVs within DIVs in your markup, and assign a different background to each.
Ok so I have set a background-position property on an element through a class declaration. And for some reason chrome, and I'm assuming all webkit browsers, ignore the background-position property.
I have like so
.buttonholder {
background-position: -175px 0px;
}
and
<span class='buttonholder'>
<a href='index.php'>Home</a>
</span>
I took out the firebug type tool in chrome and for some reason the tag comes up like so:
<span class='buttonholder' style='background-position: 0% 0%; '>
Even though there is no specific style declaration inside the elements tag. Any advice would be greatly appreciated
Edit: Apparently people think I am trying to use this as a way to position the element. Which is false. I'm trying to position a background image.
Add this:
background-position-x: -175px;
background-position-y: 0px;
Also see:
http://code.google.com/p/chromium/issues/detail?id=57963
In chrome, to solve this bug, you need to use percent in background position.
When change position will works fine.
Hope its help
Incidentally, I had a similar issue to this, where I use JavaScript to dynamically reposition an element using the jquery('[element]').css('background-position') property and it wasn't showing up in Chrome.
I found that I had also had the element declared in the CSS in an external stylesheet:
[element] {
background: #becfd3 url([background image]) no-repeat 140px 60px;
}
I ended up removing the 140px 60px part of the element in the stylesheet and it worked for me. Maybe it'll work for you?
If you wanna positionate something check for position: absolute | relative | fixed | static, and add top, and left according to w3c standard. I have no idea of background-position, but I'm pretty sure that what you do with this property can also be handle with my opinion.
The background-position property is used to position background images only, not the elements themselves. If you'd like to learn CSS positioning in ten steps, see http://www.barelyfitz.com/screencast/html-training/css/positioning/
Reference for background-position: https://developer.mozilla.org/en/CSS/background-position (info applies to Mozilla and Webkit)
I was playing around with this and found chrome and other webkit browsers to render background positions without any issues. I used a single background declaration like this:
background: url(http://www.example.com/image.png) -175px 0;
Perhaps you could declare the style in the same way and see if that works.
This one almost works for me. It positions the element to the right side, but it doesn´t take the .3rem into consideration in Chrome browser.
The background-position-y works in Chrome as well.
#email.active {
background-image: url(./images/icon-error.svg);
background-repeat: no-repeat;
background-position-x: right, .3rem !important;
background-position-y: center;
}
In Safari it has worked in the following way for me, I didn´t have any issues with the positioning in Safari.
#email.active {
background-image: url(./images/icon-error.svg);
background-repeat: no-repeat;
background-position-x: right .3rem !important;
background-position-y: center;
}