.up { background-image: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat; }
This code is giving me an 'invalid property value' in crome (and safari). I'm using the exact same code on another page, working correctly. I cleared my browser cache. If I remove 50% 50% no-repeat it works fine. Adding either of those 2 properties spikes it again to invalid (testing using developer tools).
I ran it through ProCSSor as well to clean it up, so I'm not sure where I'm screwing it up...
Yep because the background-image property is for the image part only, not the position or repeat properties of the background, use background:
.up {
background: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat;
}
Chrome* will also throw this warning (and doesn't display the bg image), if you have a blank space between url and ( like:
background-image: url ('img/web-bg.png');
^
(Which was the reason for me to search and find this question but no answer and then doing trial and error.)
... maybe depending on the Chrome version, I assume.
Even if you do everything described above, you may get an "invalid property value" in Firefox. The workaround is to convert:
background: url(../img/showcase.jpg) no-repeat top center fixed/cover;
into:
background: url(../img/showcase.jpg) no-repeat top center;
background-attachment: fixed;
background-size: cover cover;
This error also occurs in Chrome when you don't use apostrophes and your file has spaces. Simply change:
background-image: url(../img/file with spaces.png);
to:
background-image: url('../img/file with spaces.png');
Just delete ../ and use it as
background: url(img/showcase.jpg) no-repeat top center;
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 this CSS to show a water mark inside a div:
background-image: url("../Images/Watermark02.png") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
the behavior is shown in the below image, can somebody help me and tell me what is missing to get it to work on Chrome just like FF?
You can fix this by removing background-attachment: fixed. The "fixed" value is relative to the screen, not the you have the background image inside of. Granted it's possible this is due to something else, but I will need to see the rest of your CSS/HTML.
background-attachment: fixed; /* Remove this */
I've set up a jsfiddle for you here: http://jsfiddle.net/HkBh4/
By referring to this website：http://css3pie.com/documentation/supported-css3-features/，
"background-size (will always use the image's intrinsic size) — this is supported as of PIE 2.0 beta"
Based on the documentation, background-size is now supported in PIE 2.0 beta, however, I'm unclear on how to make it works on IE8.
Before making changes:
.navbar-inverse {
background:url('header_images/menu_bg.png');
background-size: 100% 50px;
}
The codes work fine for IE9 and IE10; but I want it works on IE8 too, so I added two lines:
.navbar-inverse {
background:url('header_images/menu_bg.png');
background-size: 100% 50px;
-pie-background: url('header7/header_images/menu_bg.png') no-repeat 100% 100% / 100% 50px;
behavior: url(header7/pie/PIE.php);
}
The background-size is still not functioning. It there anything wrong with my codes?
I ran into a similar issue with CSS3PIE.
I found my fix here
.pie_bg{
background: url("../images/background.jpg") left top no-repeat;
background-size: 100% auto;
-pie-background: url("../images/background.jpg") left top / 100% auto no-repeat;
}
/* NB Image path must be relative to the html doc, not the css file. Alternatively, it can be an absolute path e.g. url("http://mywebsite.com/images/background.jpg")*/
IE8 does not support background-size property.
try out this polyfill from github.
Using this should allow you to use background-size property in IE8 without any issues.
I'm new to CSS and was hoping someone could help me understand what I'm doing wrong. I'm trying to get an image to show up but it seems that no matter what I do it refuses to display on my page. Can someone please explain to me what I'm doing wrong?
Image saved in: Users/NenaH77/assignment/images/sitebg.jpg.
Css file is saved under: Users/NenaH77/assignment/css/style.css
body{
background: url('../images/sitebg.jpg') no-repeat top top #31b8ea;
}
By having ../images I thought the image saved in the folder was suppose to go up 2 levels and into my css folder so I don't understand why my image isn't showing up :(
Your CSS background declaration is invalid:
top top should be top or top left or some other valid combination of positions.
Try :
body {
background: url('../images/sitebg.jpg') no-repeat 0 0 #31b8ea scroll;
}
You need should probably put the background color first.
body { background: #31b8ea url('../images/sitebg.jpg') no-repeat top }
Mr. Slayer gave you the right answer though.
To go up 2 levels do this
background: url('../../images/sitebg.jpg') no-repeat top top #31b8ea;
This will work. You can see the fiddle here.
body { background: url(../../img/image.jpg) no-repeat center center; background-size: cover;}
This will also take you up two levels...
I just ran into this same problem. What worked for me was putting the full path of the image from my pc, instead of from just inside the project folder.
So in this case use
body { background: url('C:/Users/NenaH77/assignment/images/sitebg.jpg')}
Instead of
body { background: url('../images/sitebg.jpg')}
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;
}