CSS: Bottom right image in div getting in way

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

CSS: Bottom right image in div getting in way

Post 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...?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Why is setting it as a background not in the bottom right (if set properly)?
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Sounds like an abuse of absolute positioning. :-p

Maybe you're not setting the background to the correct element.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Is a link to the page or the full code available?
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Post 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'>&nbsp;</div>
</body>
</html>
screenshot: http://williamlitwa.com/cantclick.php
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Maybe if you make it the background image of the body, and give the html and body elements of height of 100%...?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Post 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!
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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 :D

Just set the bg image to the lowest container (<html>, <body>, containing <div>) and you should be alright...
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Post 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.
Post Reply