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;
}
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 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.
I want to load an image via css that stretches to the entire screen. The css:
body {
background: url(images/reelgoodguide2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: auto;
margin: 0px;
padding: 0px;
}
Which works perfectly in Chrome and Firefox and IE9.
There is a conditional in the html to include an additional css file if the browser is IE8 or IE7. This css contains:
body{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale')";
}
But instead of alphaimageloader stretching the image to the entire screen, the image remains centered and it and does not resize.
Note: when I open developer tools I can see that the css file is there. When I disable the filter property, nothing happens. Any tips to what Im doing wrong?
Thanks in advance.
OKAY... After a grueling bit of fiddling, this is what i figured out:
First:
The filter path to an image is relative to the html document, not the css file. FRUSTRATING
Second:
I got this to work by applying the filter to html instead of body.
I had read that the IE workaround were not to be applied to html but what I noticed was that there was (after I had cleared up the image path problem) a stretched bacground image but it was behind everything else.
I think it's not possible with CSS alone. Search for supersized. You will find some JavaScript libs.
One more useful answer to solve IE8 background issue is:
Download backgroundsize.min.htc and put it inside your project.
Now simply add these lines in your css:
.class_name{
//your other properties
background-size: cover;
-ms-behavior: url(backgroundsize.min.htc);
}
NOTE: use the url according to your project setup.
Enjoy this simple solution. :)
I am using one picture as my background of header of my blog.
CSS i have used is
#header-wrapper {
height:125px;
padding: 0px;
margin: 0;
background: url("http://3.bp.blogspot.com/_lxBSX0YJV58/TOspWPI1r-I/AAAAAAAAA34/uw872WFS3ME/s1600/headerbg.jpg") top center no-repeat;
background-size: 1120px 124px;
}
original width of an image is 990 px and i made it 1120px using property
background-size: 1120px 124px;
It looks okay in firefox 4 and Opera 11 but doesn't work in IE 7, Palemoon etc. image size does not increases and remains 990 px.
You can check my blog HERE
Any help...how can i make it compatible with all browsers ?
Do i need to use another property ?
background-size is a CSS3 property, and as such, it is not understood by ancient browsers. You might like this post, explaining various approaches to scaling background images.
I would suggest making the original image the size you want. Even if all browsers supported this CCS3 feature there is no telling what way they are going to implement it which may leave you with a distorted looking image.
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;
}