Jump to content

Backgrounds And Screen Resolution


bellringr
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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:

post-167-1080190735_thumb.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...