...

View Full Version : background size



stront
11-10-2012, 10:05 PM
so ppl this is my site: http://z-gfx.co.cc/

now i want to change the background and make it fixed, but all my pages have different sizes...

i want to make a background like this sites background http://www.roccat.org/home/ but i need to know which size to use for my site(for all pages)

and could you also tell me how to leave a space between the top and the beginning of the body like on the roccat.org site

thx in advance :)

Excavator
11-10-2012, 10:55 PM
Hello stront,

I'm not sure this is what you're looking for -
#main {
background: none repeat scroll 0 0 transparent;
height: 800px;
margin: 25px auto;
overflow-x: hidden;
overflow-y: scroll;
padding-bottom: 30px;
width: 930px;
}

Maybe some js for your background is what you really need - http://johnpatrickgiven.com/jquery/background-resize/

There are many ways to put a space at the top of your body:
1 -
body {
background-attachment: fixed;
background-color: #222222;
background-image: url("sitebackground.png");
background-position: center 25px;
background-repeat: no-repeat;
color: #AAAAAA;
font: 0.8em arial,sans-serif;
}

2 -

body {
font: normal .80em arial, sans-serif;
color: #AAA;
background-attachment: fixed;
background-color: #222;
}
#main {
margin: 25px auto;
width: 930px;
background: transparent;
padding-bottom: 30px;
background-image: url(http://z-gfx.co.cc/images/sitebackground.png);
background-repeat: no-repeat;
background-position: center top;
}

stront
11-11-2012, 01:44 AM
i want to make it look like this

http://i.imgur.com/6Wwzu.png?1

but i need height and width sizes... and they arent the same for all pages :S and i cant find it in the script(i didnt make the script, i just extremely edited it)

and when i will make it look like that will it fit on all type of screens and will it become smaller/bigger when ppl will press ctrl and +/-?

Excavator
11-11-2012, 02:14 AM
Maybe you can start with something like this. Then add some border radius, some heading borders ... experiment with it and see what you come up with.


#site_content,
#sidebar_container,
.content {
border: 1px solid #ccc;
}

stront
11-11-2012, 04:20 PM
but how can i see the page size? -.- i just want to know the height of all my pages...

Excavator
11-11-2012, 04:44 PM
but how can i see the page size? -.- i just want to know the height of all my pages...

I'm not sure what you're asking. If you look in FireBug for FireFox under the layout tab, it will tell you the height of whatever element you click on.

stront
11-11-2012, 05:34 PM
i think that i know the height, i took a screenshot of the whole page

but now that i tried to change the background it didnt work :S maybe its because the new background size is bigger
now i need help with this :S

this is the new background
http://i.imgur.com/pXShY.jpg

Excavator
11-11-2012, 05:46 PM
So you need all your pages to fit inside that box?

You should look at a more flexible height layout than that. If you take 3 slices from that image, a header img, a footer img and a slice out of the middle that could be repeated on the y axis, you could make a border around any of your different height pages.

stront
11-11-2012, 06:01 PM
like this?

http://i.imgur.com/z7G82.png

http://i.imgur.com/5isHZ.png

http://i.imgur.com/0xhi1.png

and could u tell me how to do it like that?
actually i just want to edit the backgrounds in photoshop to make them fit on all pages...

but atm my problem is that my background isnt working :S

Excavator
11-11-2012, 06:43 PM
Something like this might get you started -
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #999;
}
#container {
width: 1125px;
margin: 50px auto;
overflow: auto;
background: #999 url(http://i.imgur.com/z7G82.png) no-repeat top
}
#content {
width: 1085px;
margin: 14px 0 0;
padding: 5px 20px;
background: url(http://i.imgur.com/5isHZ.png) repeat-y
}
#bottom {
height: 14px;
width: 1125px;
background: url(http://i.imgur.com/0xhi1.png)
}
</style>
</head>
<body>
<div id="container">
<div id="content">
Your interesting website goes here
<!--end content--></div>
<div id="bottom"></div>
<!--end container--></div>
</body>
</html>

Excavator
11-11-2012, 06:45 PM
You might be interested in this method too - http://nopeople.com/CSS%20tips/slider/index.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum