Backgrounds And Screen Resolution

**bellringr** · March 25, 2004

I recently took a look at my site on a 1024 x 768 monitor (I use 800x600 here and at work) and found one page in particular that just doesn't look good because of the background I use (http://www.gryfalia.com/travels/index.htm).

Is there any way to make that work on a smaller resolution or am I just going to have to deal with it if I want to keep the background?

Kristi

**purplespider** · March 25, 2004

I'm afraid the only way I can see of doing it is to create a table 800pix wide with 3 columns. Then set the bg for the left and right columns and put your content in the middle column.

That is presuming that you wish to have the pattern at each side of your content. If you'd just like the pattern to the left, you could either do the same but with only 2 colums or just increase your background images's width to have more white on the right hand side so it does not repeat itself so early.

Hope that helps, if you don't understand what I mean let me know and I'll make a couple of pages for you to show ya.

James

**TCH-Rob** · March 25, 2004

I would set the table at 100%, this will fit the borders to the edges no matter the screen resolution.

**schussat** · March 25, 2004

You could also experiment with some stylesheet stuff. I tinkered with it for a few minutes and got a little bit of success with this:

><html>

<head>
<style type="text/css">
<!--
#headleft 
{
 position: absolute;
 top: 0;
 left: 0;
 background-image: url(test.jpg);
 background-repeat: repeat-y;
 height: 100%
}

#headright 
{
 position: absolute;
 top: 0;
 left: 70%;
 background-image: url(test.jpg);
 background-repeat: repeat-y;
 height: 100%
}

#center
{
 text-align: center;
}

#center p
{
 text-align: center;
 width: 40%;
 padding-left: 40$;
}
-->
</style>
</head>

<body>



<div id="headleft">
 
</div>

<div id="center">
<p>This is text.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum est eu mauris. In volutpat blandit felis. Suspendisse eget pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
</p>
</div>

<div id="headright">
 
</div>

</body>
</html>

It's a little wonky because I haven't tuned any of the widths; you'd definitely have to work with those. But it looks okay. I agree with Rob and purplespider that just putting the two backgrounds into a table is easier. This is kind of cool, though, too. :rolleyes:

Sign In

Backgrounds And Screen Resolution

Recommended Posts

bellringr

purplespider

TCH-Rob

schussat

Join the conversation

Hosting