Background property browser compatibility - css

I am using background: url('../img/icon_drop.svg') no-repeat 25px 30px / 17px; in one of my websites and it works very well in all browsers. Except Safari, unfortunately in Safari so written css is not recognised. I've already tried to find compatibility but i could not find any. Does anyone know is this supported by Safari?

Update your code like below.
body{
background: url('http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg') no-repeat 25px 30px;
background-size:17px;
}
DEMO

As far as I know, Safari doesn't understand the background size, so you have to do something like:
background: url('../img/icon_drop.svg') no-repeat;
background-size: 25px 30px / 17px

Related

Background url() and linear-gradient() not working on iOS/Safari

I have a page where i use a background-image in combination with a linear gradient, which works well on every system besides safari on iOS. On iOS it only shows the image but not the gradient.
body{
margin: 0 auto;
padding:0;
position: relative;
background-repeat: repeat-y;
background-blend-mode:multiply;
background: url(../images/struktur2.png),
linear-gradient(
#740100,
#942901 ,
#CE7800 ,
#F89300,
#F8D254,
#FFB860,
#FFE997,
#D2FFFF )
}
Anybody know why this isn't working or if there is a workaround?

Angular minification with css and URL background image only in prod mode

Have an image background with a gradient in css using Angular 6 with the CLI template. In dev mode it works fine, but when I do the prod version (ng build "--prod") the css is getting converted to an invalid syntax.
Here is the scss file:
.home-content {
.mountain-header {
margin: 0 auto;
color: #fff;
padding: 30px 10px;
min-height: 110px;
background: linear-gradient(180deg, rgba(0, 174, 199, .8) 0%, rgba(35,97,146,.8) 100%), url("https://cdnsite/background2.jpg") no-repeat !important;
background-size: cover !important;
background-position: center !important;
}
However when it gets minified, the background property is converted to this:
background: linear-gradient(180deg,rgba(0,174,199,.8) 0,rgba(35,97,146,.8) 100%) center!important/cover!important,url(https://cdnsite/background2.jpg) center!important/cover!important no-repeat!important!important!important
When I take out the url, it seems to work find in prod mode (I get background-size and background-position). Its like it’s merging the 3 properties when I have the Url in the background property.
For some reason, if I remove !important in the background property, it seems to fix the issue...

background image wont show in most recent version of ie

body {
background-position: right;
color: #FF7F27;
background-color: transparent;
background-image url('../cityage_background3.png');
background-size: 1386px 861px;
background-repeat: no-repeat;
background-attachment: fixed;
}
The link is just n example. i know the real link works because it show up in cchrome and firefox. Why isnt the background image showing up in internet explorer.
Your error is here:
background-image url('../cityage_background3.png');
It should be:
background-image: url('../cityage_background3.png');
You were missing :
Edit* IE does not like errors.
you forget your : between background-image and url
if it doesn't work, it's because your path is not correct. Make sure your image is in the right place.

using SVG sprites in Opera is rendering badly

I would like to use SVG sprites in Opera, and images are shown well on default zoom level, but when i zoom in they are not rendering properly.
The reason i want to use this is so i can have a simple sprite.png fallback for browsers that do not support SVG.
This works well in other browser, only Opera is giving me trouble...
Example of html and css:
<span class="members-login sprites">Login</span>
.sprites {
background: url("/images/sprites.svg") repeat scroll 0 0 transparent;
}
.members-login {
background-position: 0 -39px;
display: block;
height: 1em;
line-height: 1em;
padding: 0 0 0 16px;
}
Opera is known to cause issues with svg as background images, especialy for sprites. Since you are using fallback png, do that also for opera with opera specific css like this.
doesnotexist:-o-prefocus, .sprites {
background: url('/images/sprites.png') no-repeat 0px 0px;
}
If you find a solution to fix opera issue with svg sprite please post it here.

How do I utilize this semi-transparent png so the caption is easier to read in my Jquery slider? (w/ pic)

I have this Jquery slider plugin for Wordpress, and it's just the jquery cycle plugin by Malsup.
Anyway, I added a caption in each slide. I just can't find a color that shows clearly in each slide. So I made a semi-transparent (50% opacity) png in Photoshop, 5px x 5 px. Currently, my CSS looks like this:
.homepage-slides p {
background: transparent url('images/title-bg.png') repeat top left;
bottom: 0;
left: 0;
color: #000000;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 5px;
position: absolute;
text-align: left;
width: 100%;
}
I also tried using an absolute path to the png, but no go. Here's the result:
As you can see, the caption in the bottom is almost impossible to read. It'd be cool if I could find a way to have like ... this semi-transparent, yellow rectangular box and then have the black caption inside that box, so you could read the caption. Any help with this would be truly appreciated!
Mr.Jason
Try this Html and Css,
<body>
<div class="stroke-effect">
This text should have a stroke in some browsers
</div>
</body>
Css
body{
background-color:#000;
}
.stroke-effect{
font-weight:bold;
color: #000;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
}
Check this http://jsfiddle.net/VqDKp/
Good Luck!
I'd recommend not using images. One reason is that png images with transparent backgrounds don't have transparency in some browsers (I know it maybe only older browsers but still).
Another reason. The image wont be positioned 100% of the background in your script.
I personally like using CSS made backgrounds as they pretty much cover all browsers types. Here's my background example for you :)
background:rgba(200,200,200,0.5); //50% silver-ish background.
You could use an opacity. But I wouldn't recommend that as it would effect the content in your p element as well as. I believe using an alpha filter would do the same but it's been a while since I've used them.
Here's a further example for you :)
background:linear-gradient(top, rgba(0,0,0,0) 0%, rgba(70,70,70,0.5) 30%, rgba(200,200,200,0.5) 100%);
//from top to bottom 100% transparent black.
//Very dark grey 50% transparent at 30% from the top of the element.
//Silver-ish 100% at the bottom at 50% transparency.
using the webkit extensions respectively for the above example :)
I hope this helps.

Resources