...

View Full Version : Background and Resolution compatibility, My background gets cut off



Funion
12-04-2005, 12:37 AM
Hi, I made a background which is about 1000x500 and was wondering how I can fit the background into all resolutions like 800x600 and 1024x768 and so on. When i tried to test my background in different resolutions, it get cut off or thrown into the wrong places. how can i fix this?

_Aerospace_Eng_
12-04-2005, 09:59 AM
Well you can't really resize a background, and using JS to detect their resolution can't be relied on because the user might have js disabled. Your best bet would be to use some css to center the background image.

<style type="text/css">
body {
margin:0;
padding:0;
background:#000000 url(yourimage.jpg) center no-repeat fixed;
}
</style>
Add the above in between you head tags. The hex value should be a dominant color in your image.

mark87
12-04-2005, 12:40 PM
There is a method which uses a DIV containing an image for the background. It's not really the best solution though because on large resolutions the background will end up pixelated. Take a look at this though -


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<style type="text/css">

body, html, #background, #background img {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

#content {
position: absolute;
top: 0;
left: 0;
font-family: Verdana;
color: #FFF;
padding: 20px;
}

</style>

</head>

<body>

<div id="background">
<img src="http://debianusers.org/albums/album02/Bliss.sized.jpg" alt="">
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nunc mauris, molestie eget, condimentum vitae, ornare ultricies, magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sem. Maecenas in sem eget arcu auctor malesuada. Proin tellus. Pellentesque imperdiet ipsum quis eros euismod dignissim. Nulla at quam. Ut iaculis pede id risus. Nunc aliquam. Vestibulum at tellus ut odio cursus fringilla. Integer egestas lacinia massa. Duis velit. Curabitur vel lectus. Vivamus posuere arcu eu orci. Duis sed quam. Nam sagittis metus molestie erat.</p>

<p>Donec orci wisi, convallis eget, scelerisque a, aliquam sit amet, tortor. Nam hendrerit velit vitae metus. Etiam id purus. Duis vitae augue sed magna dignissim porttitor. Suspendisse potenti. Nunc non felis. In hac habitasse platea dictumst. Aenean sed est in leo aliquam consectetuer. Fusce semper, tortor ac molestie suscipit, orci purus malesuada dui, id aliquet libero velit ac nulla. Donec sollicitudin est. Ut vulputate magna a urna. Phasellus ut magna congue lacus ornare aliquam. Curabitur porttitor scelerisque diam.</p>

<p>Sed auctor ultrices ipsum. Aenean suscipit est eget lacus. Sed sit amet turpis et nulla elementum vestibulum. Etiam molestie. Nullam laoreet consectetuer magna. Maecenas convallis. Aenean malesuada mauris eget orci. Ut rutrum ipsum ut libero. Cras sodales, ante a cursus elementum, enim metus varius nunc, non aliquet massa odio sed lacus. Proin ante. Proin tristique ultricies odio. Duis vel purus sed ipsum dictum sodales. Sed eros. Praesent ac nisl non mauris iaculis auctor. Fusce egestas lacinia neque. In elementum quam non purus. Praesent felis. Sed sit amet justo. Nulla at tortor. Suspendisse potenti.</p>
</div>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum