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.
Related
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?
I'm pulling my hair out on this and I've been going over the CSS for the last few hours. I can not figure out how to get the background color on the slider at the top of this website to have the same transparent effect that I have on all the other parts of the page. Any help from someone smarter than me would be greatly appreciated. Here is the page:
http://rattletree.com/wordpress2/
I have put this CSS in just about every div that I can tell is associated with the slider and still no luck. Any help would be greatly appreciated.
Here's what I have tried so far:
.et_pb_fullwidth_code.et_pb_module{
background:transparent!important;
background: rgba(0,90,100,0.4)!important;
}
.recent-post-slider.design-4 .post-image-bg{
background:transparent!important;
background: rgba(0,90,100,0.4)!important;
}
.slick-slider{
background:transparent!important;
background-color: rgba(0,90,100,0.4)!important
}
.et_pb_section_0{
background:transparent!important;
background-color: rgba(0,90,100,0.4)!important
}
I check you code and find some answers to your problem.
1) You set the background color to several elements so it overlap and finish with full opacity. So first thing keep only one background-color
2) The background-image is not the background of all the article but only the content, So we need fix that too.
this code may fix your problem :
/* FIX BACKGROUNDS */
.et_pb_fullwidth_code.et_pb_module{
background:transparent!important;
background: rgba(0,90,100,0.4)!important;
}
/* FIX BACKGROUND_IMAGE */
.et_parallax_bg et_pb_parallax_css {
background-image: none;
}
.et_pb_section.et_pb_section_parallax.et_pb_section_1.et_pb_with_background.et_section_regular {
background-color: transparent;
}
article#post-37 {
background-image: url(http://rattletree.com/wordpress2/wp-content/uploads/2015/09/91815-JoelLavioletteandRattletree-Rattletree-027.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
background-attachement: fixed;
}
Have a nice day, you should really use IDs in your html.
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
In my server logs, I get many errors such as this:
File does not exist: /my/path/-moz-linear-gradient(top,white,
This is apparently due to the following piece of Bootstrap CSS, where some browsers must interpret -moz-linear-gradient as a background image to be downloaded:
.btn{
/* some code... */
background-color: whiteSmoke;
background-image: -webkit-gradient(linear,0 0,0 100%,from(white),to(#E6E6E6));
background-image: -webkit-linear-gradient(top,white,#E6E6E6);
background-image: -o-linear-gradient(top,white,#E6E6E6);
background-image: linear-gradient(to bottom,white,#E6E6E6);
background-image: -moz-linear-gradient(top,white,#E6E6E6);
background-repeat: repeat-x;
/* more code...*/
}
How can I prevent such errors from happening?
Thank you!
You should use background: instead of background-image: because with background-image you need to set the path of the image and you are not using an image.. but a gradient as background.
This is a Tool that you can use http://www.colorzilla.com/gradient-editor/ to make the gradient and copy the code if you want, all to make it easier and fault free.
Update after all the comments:
You could use a fallback image of the gradient. Like here:
/* fallback image */
background-image: url(images/fallback-gradient.png);
And that should fix your problem to.
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')";
}