...

View Full Version : Resolution and Background Sizing issues



<(^^<)KIRBY
02-28-2005, 09:23 PM
Alright, so here's my shpeal.

The website I am attempting to create is CSS based, and has two divs. A "left" and a "content". My left div has a picture background which fits the website, and looks good. Here's my problem. If the resolution is different than mine, then the background I am trying to set gets really screwed up, in the sense that it either gets too small, or really big.

At first I had it set by pixel count, and then realized the error of my ways, and tried to change it to percentage. Now, whenever I change resolutions, the picture gets really messed up vertically.

The picture itself is 147x900... does anyone have suggestions as to what measurements I could/should use to make it work?

Here's some example code of what I'm talking about:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<title> Marcon Inc.</title>
<LINK TYPE="text/css" HREF="styles/Marcon.css" REL="stylesheet">

<body>
<div id="left" style="background-image: url(Pictures/crackback.gif); height: 155%; width: 147px; border: 1px solid black;">
<br>
<br>
<img src="pictures/marconLogo.gif">
<br><br>
</div>
</div>
<div id ="content">
<br><br>
<br><br>
<br><br>
<br>
<h1><center>Welcome to MarCon, Inc.</center></h1>
<center>
<img src = "pictures/index.jpg">
</div>
</div>
</body>
</html>

ronaldb66
03-01-2005, 08:25 AM
A look at the page online would really help... Or, if that's not an option, a screenshot at different window sizes?

<(^^<)KIRBY
03-01-2005, 08:17 PM
Well, it's not posted yet, so a link is out of the question.

However, I am having issues getting screenshots small enough to fit, but large enough to be visible... suggestions?

channy
03-01-2005, 10:25 PM
if you want the image to be stuck to the left side and to repeat with larger resolutions what I'd suggest is to move your background image out of the left div and to put it into the body tag:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<title> Marcon Inc.</title>
<style type="text/css">
<!--
body{
margin: 0px auto;
background-image: url(testing.jpg);
/* repeat-y will only repeat down the left side of the page */
background-repeat:repeat-y;
}
#left {
position: absolute;
width: 147px;
}
#content{
margin: 0px 0px 0px 150px;
padding: 0 10px 10px;
}
-->
</style>
<body>
<div id="left">
<img src="pictures/marconLogo.gif">
</div>
<div id ="content">
<br><br>
<h1><center>Welcome to MarCon, Inc.</center></h1>
<center><img src = "pictures/index.jpg"></center>
<!-- content goes in here -->
</div>
</body>
</html>

<(^^<)KIRBY
03-01-2005, 10:35 PM
Well, the good news is that it looks better, however I'm still having issues making it the right length. I've tried using percentages, however it appears as though it is percentages of the picture... either way, it is still too long/short.

Any tips?

channy
03-01-2005, 10:44 PM
Ooooh ok you want the image to be able to strech for a larger page and shrink for a smaller one?

<(^^<)KIRBY
03-01-2005, 10:48 PM
Yeah... Please? I need it to be able to change between an 800x600 and whatever else without looking weird. Thanks!

<(^^<)KIRBY
03-02-2005, 08:47 PM
Wait for it...

Ok, I got it working. That code worked like a charm once I actually implemented it... correctly... hehe

I forgot to take some of the sizing stuff I had tried earlier out, and it kept screwing it up, but now it works GREAT!

You all rock, and don't let anyone else tell you otherwise.

yay! ^_^

Diane
03-02-2005, 08:53 PM
Can you show your finished code? I for one would be very interested to see how this works, as I'm on a learning curve myself!
Thanks!
Diane



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum