Page 1 of 1
CSS: Bottom right image in div getting in way
Posted: Fri Jul 20, 2007 9:17 pm
by Skara
Alright, I need an image in the bottom right corner of the screen as a background. Setting it as a background doesn't quite work, as it's not always in the bottom right. I solved this by...
Code: Select all
#bg {
position: absolute;
right: 0;
bottom: 0;
}
The problem is, if something ends up in the bottom right corner, it's covered up by the image. It
wouldn't be that big of a deal, as the image is a very transparent png, but I can't select text below it or edit a form...
I thought perhaps z-index might help, but setting it to -1 makes the image disappear. O.o
Ideas...?
Posted: Fri Jul 20, 2007 9:25 pm
by feyd
Why is setting it as a background not in the bottom right (if set properly)?
Posted: Sat Jul 21, 2007 10:38 am
by Skara
well, I suppose I might not be setting it properly... But if the text only comes halfway down, then so too does the background, leaving the background halfway up the window.
This is for an order tracking system, not a website, and quite a few of the pages are really short. The background (an image of a hydra) is kinda big, and generally gets clipped off.
I can take a screenshot later if it would help.
Posted: Sat Jul 21, 2007 11:00 am
by superdezign
Sounds like an abuse of absolute positioning. :-p
Maybe you're not setting the background to the correct element.
Posted: Sat Jul 21, 2007 11:22 am
by feyd
Is a link to the page or the full code available?
Posted: Sat Jul 21, 2007 11:33 am
by Skara
Code: Select all
#bg {
position: absolute;
right: 0px;
bottom: 0px;
width: 466px;
height: 542px;
background-image: url('/hydra/bg.png');
background-repeat: no-repeat;
background-position: bottom right;
}
Code: Select all
<div id='bg'> </div>
</body>
</html>
screenshot:
http://williamlitwa.com/cantclick.php
Posted: Sat Jul 21, 2007 11:35 am
by superdezign
Maybe if you make it the background image of the body, and give the html and body elements of height of 100%...?
Posted: Sat Jul 21, 2007 11:38 am
by superdezign
And if that doesn't work:
Code: Select all
body * {
position: relative;
z-index: 1;
}
#bg {
position: absolute;
right: 0px;
bottom: 0px;
width: 466px;
height: 542px;
background-image: url('/hydra/bg.png');
background-repeat: no-repeat;
background-position: bottom right;
z-index: 0;
}
That may do it. I forgot if z-index works on relatively positioned elements.
Posted: Sat Jul 21, 2007 11:41 am
by Skara
superdezign wrote:And if that doesn't work:
Code: Select all
body * {
position: relative;
z-index: 1;
}
#bg {
position: absolute;
right: 0px;
bottom: 0px;
width: 466px;
height: 542px;
background-image: url('/hydra/bg.png');
background-repeat: no-repeat;
background-position: bottom right;
z-index: 0;
}
That may do it. I forgot if z-index works on relatively positioned elements.
whoohooo! worked. Thanks a lot!
Posted: Sat Jul 21, 2007 11:43 am
by nickvd
you cant click it be cause you're putting the layer above the content... it's like the sneeze guards on the salad bar
Just set the bg image to the lowest container (<html>, <body>, containing <div>) and you should be alright...
Posted: Sat Jul 21, 2007 11:47 am
by superdezign
I'm with nick. I gave you a temp fix, but you should most certainly use a background. And, looking at it, you may even want to make it fixed so it doesn't scroll.
Posted: Sun Jul 22, 2007 5:41 pm
by Skara
I like the sneeze guard analogy, but I already knew what the problem was, just not how to fix it.
I would rather it scroll.
Anyway, it works and I'm happy. If I get issues, I'll worry about it then.