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?
Related
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...
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.
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
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.
hi i have looked to some questions here which have same subject
as here but didnt understand how he fixed it with html as he said.
and here
but didnt understand how to implement it to work ,
anyway i have tried mine to test it but it doesnt seem to work.
<style>
.foo {
font-size : 14px ;
background-size: 832px 578px;
background-image: url("al0-2.png");
background-repeat: no-repeat;
width: 831px;
height: 590px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="al0-2.png",
sizingMethod="scale");
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='al0-2.png',
sizingMethod='scale')";
}
</style>
any help to fix this .
im wanting to let background-size works good in all IE also as FF do
EDIT>
my html code
<div class="foo" ></div>
I made this fiddle for you to experiment.
It works nicely in ie7/ff.
Although, note that in IE7, there will be 2 backgrounds : 1 from the background and 1 from the filter. You should remove the background one in someway (exemple : conditionnal comments).
In your code, if no image are displayed, maybe your image links are broken.
fiddle css :
#foo {
border:2px solid red;
font-size : 14px ;
background-size: 832px 578px;
background-image: url('/img/logo.png');
background-repeat: no-repeat;
width: 831px;
height: 590px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/img/logo.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/img/logo.png',
sizingMethod='scale')";
}