PDA

View Full Version : Backkground fi



Moomenzor
Dec 22nd, 2008, 09:50 PM
So I got the idea from this website www.l2light.com
The BG that they have is large 1600x700 or soo... and the thing is that the background is resizing it self for to to fit to the resolution of ur desktop.

wWhat i was trying to do is the same thing with a 1168x780 background I used this in my CSS:


body { background:url(bg.png) repeat-x; background-position:top center; padding: 0 margin: 0;
}

and my background is in the middle but it's not resizing it self as the one on l2light.com

can u please explain me how can i do it my self. like I really want my BG to resize it self for to fit to the resalution of the dekstop.

Excavator
Dec 22nd, 2008, 10:14 PM
Hello Moomenzor,
I've looked at this in everything I've got... FF3, IE8, IE6 - both on Vista and XP and it's not resizing at all.
It's just so big that it covers pretty much all resolutions.
I just checked it out again. The website breaks it but the bg image alone resizes in FF...
For a resizing background see my example. (http://nopeople.com/CSS/background_image_resize/index.html)

jcdevelopment
Dec 22nd, 2008, 10:14 PM
try adding

width:100%;

to the body property.

Moomenzor
Dec 22nd, 2008, 11:06 PM
okay... so there it is http://lambofgod.webng.com/index.html


when u click on viewe background u see the full background... but like in the browser u see a resized background that fits ur desktops resolution.... thre is a link for the css file for the page... so like how does it works?

how can i do the samething? can please someone help me

Thanks <3

Excavator
Dec 22nd, 2008, 11:43 PM
Did you look at the markup in the example I showed you?
It works like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>sdar</title>
<style type="text/css">
html {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
border: none;
}
#background_image {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
}
#page {
position: absolute;
top: 0px;
left: 2px;
z-index: 2;
height: 100%;
width: 100%;
overflow: auto;
text-align: center;
}
</style>
</head>
<body>
<img src="http://lambofgod.webng.com/images/bg.jpg" alt="big pic" width="1600" height="950" id="background_image" />
<div id="page">
<a href="http://lambofgod.webng.com/css/master.css">ada</a>
<!--end page--></div>
</body>
</html>

That white block in the middle resizes because it's part of the image. You won't want your website resizing like that though - really need a better image. One that could be used as a background only, instead of one that is structural to the layout.

Moomenzor
Dec 22nd, 2008, 11:48 PM
ok, i got it now.

but what u are offering me is to use an image as ur BG... but it makes me difficult to make the divs like I have same BG as the L2luna website has.. and I need the spacing in the middle!

Like im using this CSS for my body atm body {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
background:url(bg.png);
background-repeat:no-repeat;
background-position:top;
and I got the image in center but its not perfect.. as that dudes background... like I wanna have the same BG as he does...

Please can u advice me something? I was working on this BG for the whole day and I reallt mean it FOR THE WHOLE DAY : >

Moomenzor
Dec 23rd, 2008, 01:43 AM
Hello Moomenzor,
I've looked at this in everything I've got... FF3, IE8, IE6 - both on Vista and XP and it's not resizing at all.
It's just so big that it covers pretty much all resolutions.
I just checked it out again. The website breaks it but the bg image alone resizes in FF...
For a resizing background see my example. (http://nopeople.com/CSS/background_image_resize/index.html)

u said that the image is resizes in FF, what is FF? :)