A bit of a strange one. The background image (or even when I add a color) to the header on the website, that contains the menu items will not be displayed in IE8. It seems to work on Chrome and Firefox however in IE8 it does not display. The Url is http://www.esfdev.co.uk/emmanuel/ any help will be greatly appreciated.
CSS is below.
div#header {
background-image: url("./images/headerBg.png") !important;
background-position: center bottom;
background-repeat: repeat;
height: 93px;
position: fixed;
width: 100%;
z-index: 10 !important;
}
Thanks
Related
For some reason, background images are not showing up at all in IE11 (Windows 7 Pro).
.home {
position:relative;
height: 620px;
background-image: url(/images/bg_home3.jpg);
background-position: 540px 190px;
background-repeat: no-repeat;
}
Any clues?
If you are trying to set background to HTML5 element there is a chance that it doesn't have some default style in IE11. For example if the element is main try to set display: block to it. You may also try to set width, but without seeing more of your code can't help you more. Look the example below.
.home {
display: block;
width: 100%;
position:relative;
height: 620px;
background-image: url("/images/bg_home3.jpg");
background-position: 540px 190px;
background-repeat: no-repeat;
}
necessary use width: 100px; <= you size px
.home {
position:relative;
height: 620px;
width: 200px;
background-image: url('/images/bg_home3.jpg');
background-position: 540px 190px;
background-repeat: no-repeat;
}
Use a png image as it seems IE 11 cannot display jpg with non web colors.
I think with two easy steps you can eliminate the problem:
Set display: block; The display property specifies the display behavior on your page. IE 8 and upper versions fully supports this property.
Put your url between quotation marks ("").
background-image: url("/images/something.jpg");
I found setting the background size of the image made it display in IE11.
I also had to set the width and height. Setting the value of these attributes to auto it didn't work.
I have background-attachment: fixed; on my hero section and it works in firefox and safari but not in chrome. I can get it to work by changing to position:relative; and z-index: -1; but then the buttons within the hero become unusable and this also creates problems in firefox and safari.
#hero {
padding-top: 60px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
I tried changing the parent positions to static based on other post I found but that didn't work either.
http://bayarddev.com/fca/about-us/
Ok I see it now. On .hero's parent element .off-canvas-wrap and .inner-wrap you are using -webkit-backface-visibility: hidden. If you turn this off the background attachment works fine.
I'm using a filter to the older IE on my sprite, so I used the filters.
The code below isn't working. I know I made a mistake I don't know wich one / where:-/
On Chrome it's ok, the properties is disabled but in IE, the background-size isn't working.
If I disable the "background-size" in Chrome, I see the same BAD screen as in
.icones {
background: transparent url('../contents/homepage/60/icones.png') no-repeat;
display: inline-block;
width: 50px;
height: 48px;
background-size: 60px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale')";
}
#contact{
background-position: 0px -350px;
}
Thanks for your help :-)
background-size: 60px; wasn't applied on IE, so I deletes this line and I made a picture of 60px. This solved my question.
For some reason my tiled image doesn't tile over the whole background. Though it fills the whole background when I resize the window a little bit.
The background is set in css.
body {
background: url(img/tile.gif) #e6e6e6;
width: 100%;
height: 100%;
}
This is in Chrome and Safari, so webkit. Works fine in Firefox.
Try:
body{
background-image: url(img/tile.gif);
background-color: #e6e6e6;
background-repeat: repeat-x;
}
background: url(img/tile.gif) repeat #e6e6e6;
I have a Joomla site that i have created a custom theme. The site is http://esn.teipir.gr/.
I have two images right and left that i want them to have background image fixed.
I use the following CSS rules
div.backgroundboxleft {
background-attachment: fixed;
background-image: url("/images/back_1.png");
float: left;
height: 822px;
top: 40px;
width: 457px;
}
and
div.backgroundboxright {
background-attachment: fixed;
background-image: url("/images/back_2.png");
float: right;
height: 822px;
top: 40px;
width: 457px;
}
If i remove the background-attachment all is OK with the images but when i add with firebug the following code everything messes up.Can you help me making the pages stay fixed without the background color being on top of the image?
Thanks
When you set background-attachment:fixed it fixes the background in relation to the window. So you would then need to adjust the background-position of your images so they appear in the right place. If you replace your backgroundproperties with the css below it will line up properly.
div.backgroundboxleft {
background-image: url("/images/back_1.png");
background-attachment: fixed;
background-position: 0 44px;
background-repeat: no-repeat;
}
div.backgroundboxright {
background-image: url("/images/back_2.png");
background-attachment: fixed;
background-position: 1323px 44px;
background-repeat: no-repeat;
}
Live example: http://jsfiddle.net/tw16/6fZ96/embedded/result/
To clarify background-attachment:fixed stops the background from scrolling with the window. So if your viewport is too small and you have to scroll horizontally or vertically the background will not move (i.e. it will be overlapped). More information can be found here.