Jump to content

Archived

This topic is now archived and is closed to further replies.

Guest edwinsweep

help with autoscaling backgrounds

Recommended Posts

Guest edwinsweep
hi everybody i am currently creating a website that supposed to have 2 tables with autoscaling background's in them. if somebody is viewing the site with only a 800x600 resolution the table will be less pixels aswell as if you where viewing it with 1024x768.
its just that the background in those table's wont automaticly scale.
if the table becomes less wide the background stay's its own scale and will be twice the size the table is!
is there any way to get this fixxed? either with php or css.
[code]
<?php
echo '<table class="1st" border=0 height=111 width=100%><tr><td background="/pictures/images/shwboven.jpg">1</td></tr></table>';
?>
<style type="text/css">
body{
margin:0;
padding:0;
}
div{
width:100%;
position:absolute;
middle:0;
text-align:center;
}
table.1st{
margin-left:auto;
margin-right:auto;
text-align:left;
}
table.2nd{
margin-left:auto;
margin-right:auto;
text-align:left;
}
</style>
<?php
echo '<align><table align="right" class="2nd" border=1 height=100% width=81><tr><td>1</td></tr></table><align>';

?>
[/code]
thanks in advance guys!

Share this post


Link to post
Share on other sites
Where's the php itself? What you posted is just HTML and CSS (you can drop the echo thing and right it in pure HTML...).

Orio.

Share this post


Link to post
Share on other sites
Guest edwinsweep
i know i am just used to putting all the html tags into php echo function's.
(probably a bad habit).
and the php then css then php thing doesnt make any sence either, i know:)

Share this post


Link to post
Share on other sites
But my question is, how do you know what's the resolution of the user and such... Or are you asking for a script that can find it?
(Btw, I think its better with JS and not sure if PHP can do such a thing)


Orio.

Share this post


Link to post
Share on other sites
Guest edwinsweep
*[b]SOLVED[/b]*
i found a way to do it with css style sheet.
creating 2 layers using the bottom layer as your background and top for the rest.
[code]
<html>
<head>
<title>SHW</title>
<style type="text/css">
body {margin:0px;}
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}
</style>
</head>

<body>

<!-- this creates the background image -->
<div id="bg_image">
<img src="pictures/images/shwbg.jpg" style="width: 100%; height: 99%;">
</div>

<!-- this puts the contents of the page ontop of the background image -->
<div id="contents">
hoi
</div>

</body>

</html>
[/code]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.