Hey guys,
I want to place an image on the right bottom of a page, I have the following, but it is not working properly.
the image is in the correct corner, but it is too far down, there is now a scrollbar and the page is only half full with content.
css:
| Code: |
html {
height: 100%;
}
body {
height: 100%;
background-image: url(images/image.gif);
background-position: bottom right;
background-repeat: no-repeat;
}
|
I have the following doc type:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
what am I doing wrong? What happens if you remove both "height: 100%" lines?
then it shows in the middle (height) of the page
probably becos thats the end of the content.
I don't know if this will be the solution of your problem, but your system doesn't know where the text ends. So if you want to replace the image not so far down, I should work with a div structure. Then you will be able to add your image to the back of your div container and add your text inside it. Another option you could try is to work with margins, but I doubt if that will work like you want.
Could you just put the image in a div and then change the z-index? This may not work this is just what came to mind when I thought about it.
| Code: |
Html: <div id="bgimg" ><img src="image.png" alt="bgimg" /></div>
Css:
body {
z-index: 1;
}
#bgimg {
z-index: 0;
position: absolute;
bottom: 0;
right: 0;
}
|
I haven't actually tested this but I know the position:absolute will work, just unsure as to the z-index. Kk, well, I'm not sure what your problem is. Do you have an example online?
*confuzzled*
You could try putting it in the background....
You'd add this to the BODY tag in the css.
| Code: |
| background:url(image-url) bottom right no-repeat-x #hex-color; |
sorry, double post. Got rid of this one.
Last edited by welshsteve on Wed Apr 30, 2008 1:08 pm; edited 2 times in total
height: 100% is not an ideal way of doing this. It is generally treated as 100% of the html document height, and not the screen height (which obviously depends on the visitors screen), and therefore if nothing else is on the page, the height of the document is the height of the image.
The best way to achieve it is to use absolute positioning on the image. Here's an example
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Place an image in the bottom right of the screen</title>
</head>
<body>
<img src="#" style="position:absolute;bottom:0;right:0;width:50px;height:50px;background:#aaa;border:1px solid #000;" />
</body>
</html>
|
