Giogram Grammenoudis
Giogram Grammenoudis

Reputation: 13

Table and background img problem

I have a problem with my site.I cant make the table appears on the img. It appears down of the image or up of the image. I need some help with the codes. Actually i dont want the img to reapet and to fit in users window everytime. The code to insert the img is this

<body oncontextmenu="return false;" background="bg_body.jpg">

And the code that a actually helped me but didnt solved the problem 100% because table didnt appears with img is this

<style> <!-- body { margin: 0px; } --> </style>
<img src='whatever' style='width: 100%; height: 100%;' />

Upvotes: 1

Views: 221

Answers (3)

jnkrois
jnkrois

Reputation: 682

There is a couple things here that don't make too much sense:

"oncontextmenu="return false;" are you trying to run some sort of javascript? If so, you need to call a function before the "return false", like so:

<body onload="someFunction() return false;">

Also, I don't think you can set a background for an element the way you did it, it would be more like this:

<table style="background:path/to/my/image/...">

I'd love to help some more, but please explain yourself a little better.

ok, I'd suggest you do something like this:

Whether it is on an external style sheet, or embedded inside the head tags, you can set the image size with some simple CSS, like so:

<style type="text/css">
body{
background-image:url(../path/to/image);
background-repeat:no-repeat;
height:100%;
width:100%;
}
</style>

Try this to see if it works, I'll help you more if it doesn't.

Upvotes: 0

davidsleeps
davidsleeps

Reputation: 9503

if you want a background image to fit the size of the browser (which i'm guessing at, but if you have a 100% height and width on your image, that seems what you're after), you could do something like this:

<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;}
.backgroundlayer { position:absolute;top:0;left:0;z-index:1; }
.toplayer { position:absolute;top:0;left:0;z-index:2; }
</style>

and then in the body of your code...

<body>
    <img src="someimage.png" style="height:100%;width:100%;" class="backgroundlayer" />
    <div class="toplayer">
        my content above the image...it doesn't have to be a div...use a table if you want
    </div>
</body>

Upvotes: 1

Xavier Ho
Xavier Ho

Reputation: 17893

Consider using CSS background properties.

HTML (something like this, un-tested):

<body ... style="background-image:url('bg_body.jpg'); background-repeat: no-repeat;">

If you want your background image to "resize" to the browser, you will have to hack it to work. One common way is probably to use two div tags; the first one will contain the image at 100% size, with absolute positioning. The second one contains your actual body content, with a higher z-value. It is a lot more work than you might think.

For detailed discussion on this, see this thread: http://www.htmlcodetutorial.com/help/ftopic4503.html

Upvotes: 0

Related Questions