Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resolution and Background Sizing issues

    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:
    Code:
    <!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>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link?

    A look at the page online would really help... Or, if that's not an option, a screenshot at different window sizes?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    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:

    Code:
    <!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>
    Channy

    I would love to change the world, but they won't give me the source code...

  • #5
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ooooh ok you want the image to be able to strech for a larger page and shrink for a smaller one?
    Channy

    I would love to change the world, but they won't give me the source code...

  • #7
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah... Please? I need it to be able to change between an 800x600 and whatever else without looking weird. Thanks!

  • #8
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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! ^_^

  • #9
    New Coder
    Join Date
    May 2003
    Location
    South Wales, UK
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •