Jump to content

help with autoscaling backgrounds


Guest edwinsweep

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!
Link to comment
https://forums.phpfreaks.com/topic/8034-help-with-autoscaling-backgrounds/
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]

Archived

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

×
×
  • Create New...

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.