IE doesn't show my bottom background-image - css

I created a webpage that uses two images as a background - one for the top and one for the bottom. Chrome, Safari and Firefox display the page without issue but, in IE the background at the bottom doesn't show. Here is the code I'm using:
html {
font:100%;
background:url(../images/test8-300.jpg) repeat-x, url(../images/Html-background-Bottom2.png) no-repeat bottom;
background-color:#d7d7d7;
}
If you need to have a look to understand better, this is the address: doggiestime.co.uk. At the bottom, you should be able to see some dogs.

Try
background:#fff repeat-x no-repeat bottom;
background-image:url(../images/test8-300.jpg), url(../images/Html-background-Bottom2.png);

you need to set your background image to the <body> tag not <html>
body {
font:100%;
background:url(../images/test8-300.jpg) repeat-x, url(../images/Html-background-Bottom2.png) no-repeat bottom;
background-color:#d7d7d7;
}

Related

Background issues in Mobile Browser

I have a background image that covers the entire screen. It works like a charm in web. However when I click an input field in mobile browser, the background shifts (I believe so) and shows a white colour. Since my input fields are also white, I can't see them when things get messed up as such.
Attaching the screenshot of both states before clicking the input field and after clicking it as well on mobile.
CODE HERE:
<body class="details_step1-1">
<div>
...........
</div>
</body>
CSS HERE:
.details_step1-1{
background-image: url("../images/img_foldbg.png");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:100%;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}
TRIED FIXES:
1. Adding min-height to the background image, html, body as 100% together as well as separately.
2. Adding height as 100vh to the background image, html and body.
You can apply overflow:auto on both your html tag and your body tag, and that will fix your white space issue.

using multiple image on background

I am getting problems on using multiple images in the background of my web pages. I used the following codes for it:
body{
background-image: url(images/img1.png), url(images/img2.png); }
The code I used gives me two images on background but I want to keep one of the image exactly on the center. How can it do so using CSS?
Yeah, you can do it like this
body {
background-image: url(images/img1.png), url(images/img2.png);
background-repeat: no-repeat, repeat-x;
background-position: center, top left;
}
Check a demo here.

background position IE9

In my CSS I am placing a background like so,
background:url(/media/images/body-background.png) bottom left repeat-x;
The is a gradient that runs from white to grey, and I am wanting it start at the bottom of my <body> and repeat across the screen, however in IE it seems to sit no where near the bottom of my body, is there any reason for this?
URL - http://apigroup.factoryagency.co.uk
Sico87Just because you are dealing with IE I would avoid doing short hand css, I haven't used it too much but in the past this was an issue with IE. Also, while looking at your site I notice you are giving the body a height of 100%, this might be unnecessary, remove the body height Then try this:
body {
background-image: url("/media/images/body-background.png");
background-position: left bottom;
background-repeat: repeat-x;
font-family: Arial,Helvetica,Tahoma,sans-serif;
}
I hope this helps.
By the way, nice job with the site design ;)
You could try changing the order of the values like this:
background:url(/media/images/body-background.png) repeat-x left bottom;

background-image with tr and th

I have 'tr' with background-image and on 'th' I want to show a image on its right corner to indiect if this column is sorted. I have css style like following:
tr.header {
background-image: url(../Images/bg.gif);
background-repeat: repeat-x;
}
th.sort {
background-repeat: no-repeat;
background-position: center right;
background-image: url(../Images/sort_bg.gif);
}
This works well on IE8 and firefox3, but not on IE7.
Anyone has any idea of how to make it working on IE7?
Try adding this doctype to the top of your page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
are both classes not working or just one of the classes not working?
.header { background: url(../Images/bg.gif) repeat-x; }
.sort { background: url(../Images/sort_bg.gif) no-repeat right; } /* should default to middle */
...
This is way old, however it comes up at the top of google when you search for 'th background image css', so it's worth getting an answer in here.
I think you are out of luck with multiple bg images on a single element in IE7:
http://www.w3schools.com/cssref/pr_background-image.asp
"Note: IE8 and earlier do not support multiple background images on one element."
not sure why it was workng for you in IE8 at all.
If I actually come up with a solution I'll post it.

CSS Properties for Background Image do not work on FireFox

I have a webpage where I want to show the background image # the bottom right corner of the page. For this I have the following code:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:bottom right;
}
This code works fine in IE. But in FireFox, the image is shown at the 'top' right.
Please suggest.
Regards
- Ashish
html, body { height:100%; }
body {
background:url(img_tree.png) no-repeat bottom right;
}
I think it's just that your page isnt taking up the full viewport height, which the 100% height on body/html does.
I usually just use
background: url(img_tree.png) right bottom no-repeat;
This works fine in IE and firefox

Resources