PDA

Click to See Complete Forum and Search --> : background image - centered

stephank
11-16-2006, 02:46 PM
Dear list

I am working on an html site that is about 600pixels wide and 550 pixels in height. Center / Top align. The site will not appear as a popup so I don't have control over the resize functionality or the scrollbars of the browser window.

I would however like to control the appearance of the left and right and bottom parts of the page if additional images (they're not repeatable backgrounds, but rather 500x800pixel gif images) in case the user resizes the window manually.

How do I do that without having the scrollbars appear?

Thanks

stephank
KDLA
11-16-2006, 03:19 PM
If you're using them as background elements, you can use the background-position style.
Reference: http://www.w3schools.com/css/css_reference.asp

KDLA
stephank
11-17-2006, 02:05 AM
Dear KDLA

Thanks you very much for your post. The link was very helpful. I looked into it but I am doing something wrong cause I am dealing with the same issues.

Let's say I have three images that are next to each other aligned on the top of the browser:

[a] [b] [c]

Image [b] should always be 600 pixels. Image [a] and [c] should resize depending on the browsersize, so that image [b] remains centered at all times. So if the browser window is 1200pixels images [a] and [c] should both be 300 pixels.

image [a] should align top right.
image [b] should always be centered.
image [c] should align top left.

Here is the code I have so far:

Any help appreciated.

thanks

stephan

-------------------------------

<style type="text/css">
<!--

#a{
background-color: #00078;
background-image: url(images/lines_01.gif);
background-repeat: no-repeat;
background-position: top right;
position: static;
height: 600px;
width: 300px;
}

#b{
background-color: yellow;
background-image: url(images/lines_02.gif);
background-repeat: no-repeat;
background-position: top center;
position: static;
width: 700px;
height: 600px;
}

#c{
background-color: yellow;
background-image: url(images/lines_03.gif);
background-repeat: no-repeat;
background-position: top left;
position: static;
height: 600px;
width: 300px;
}




-->
</style>


</HEAD>
<BODY BGCOLOR="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="a"></div></td>
<td><div id="b"></div></td>
<td><div id="c"></div></td>

</tr>
</table>
</td>
</tr>
</table>


</BODY>
stephank
11-17-2006, 02:07 AM
oh... and yes there should be no horizontal scroll bars... that's what I'm having trouble with. Do I need to implment some sort of even onresize and then clip the images somehow with styles? is that possible?

I am looking for a simple solution for this though...
KDLA
11-17-2006, 07:52 AM
Why do you have your table set to as an absolute value over 1300px in width? You do know that most people's screens will not accommodate this?

I suggest using widths based on equal percentages (they will be based on the screen's size) for the sides and an absolute value for the center.
stephank
11-17-2006, 08:59 AM
The problem with absolute widths is that the horizontal scrollbar will appear. Image [b] contains the main content which should remain centered at all times...

I tried percentages as widths for [a] and [c], but the two images completely disappear if I do that. I tried 5%, 30%, 50% and even 80%... neither worked... I kept image [b] at 700pixels...
stephank
11-19-2006, 02:00 PM
Based on another discussion I started digging into javascript, which I'm fairly new to. But it seems to work in mozilla on PC. I think I need to do a sepearte code for explorer. No scrollbars. however when it refreshes the width and the position of the images I sometimes get a one pixel line between the images. Not sure how to avoid that...?

I'll try it this way and test it in all the browsers. If I get decent results I'll stick with it, otherwhise I might need to switch to flash, (which would be unfortunate, just to accomodate the background design...)

any thoughts?

thanks

stephan


------------------------------------------------------------------

<script type="text/javascript">

function updateView() {
if (document.getElementById("bg1")) {
var bg1 = document.getElementById("bg1");
var bg2 = document.getElementById("bg2");
var bg3 = document.getElementById("bg3");

var bg1_origWidth = 600;
var bg2_origWidth = 700;
var bg3_origWidth = 600;

var scrWidth = window.innerWidth;
var scrHeight = window.innerHeight;

bg3.style.width = (scrWidth-bg2_origWidth)/2;

bg1.style.left = ((scrWidth-bg2_origWidth)/2)-bg1_origWidth;
bg2.style.left = (scrWidth-bg2_origWidth)/2;
bg3.style.left = ((scrWidth-bg2_origWidth)/2)+bg2_origWidth;

}
}
</script>






<STYLE TYPE="text/css">
<!--

#bg1 {
position:absolute;
height: 600px;
width: 600px;
background-image: url('images/lines2_01.gif');
background-repeat: no-repeat;
}
#bg2 {
position:absolute;
height: 600px;
width: 700px;
background-image: url('images/lines2_02.gif');
background-repeat: no-repeat;
}
#bg3 {
position:absolute;
height: 600px;
width: 600px;
background-image: url('images/lines2_03.gif');
background-repeat: no-repeat;
}




-->
</STYLE>





</HEAD>
<BODY onload="updateView();" onresize="updateView();" STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<DIV ID="bg1"></DIV>
<DIV ID="bg2"></DIV>
<DIV ID="bg3"></DIV>