[EMAIL PROTECTED] wrote:
Hello,
I am trying to get a 200x200 pixel image to show up on the upper left
and of a page.
I have tried the following methods:
- using an <img> tag then setting its margins so it sticks on the
upper left corner (margin-top: -200;). (this has worked)
- putting the image in the body via CSS.
- and several other methods having to do with the <Div>s already on the page.
Now these methods have some problems. The first one worked but it
messed up the margining of other <Div>s. I could obviously fix those
margins by using negative values but this image will be put in and
taken out a lot and going back to fix those margins every time is a
hassle.
The second method did not work because there are a few <Div>s sitting
right on top of the image's position.
I am looking for a solution along the lines of putting the image in
the body { } and having it stick on top of everything else on the page
ignoring everything that is on top of it (kinda like how photoshop's
layers work, I want the background to be the top layer instead of the
bottom).
Another solution having to do with the <img> tag that does not mess up
other elements on the page would also be great if there is one.
And lastly, all other possible solutions are welcome.
I will state the problem again: I would like to have a 200x200 pixel
image show up on the upper left hand corner of a page -- on top of all
other elements -- without interfering with those elements (i.e.,
messing up their margins).
Thank you.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Hi,
You can put the image in the background of the body, like
this:
body {
background: url(img_url_goes_here) no-repeat left top;
}
The other method would be using the absolute positioning
and a div or anything:
*in css*
#themeimg {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
}
*in html*
<div id="themeimg">
<img src="yourimgurl" />
</div>
Probably there is no need for that additional div here,
you could also try to apply the rules to img wich has the
id="themeimg".
You can also hide the image on overflow, so that if the
screen size is decreased, the content is visible over the
image.
Best regards,
Kaspars
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
