View Full Version : background size

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 :)

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;

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


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 +/-?

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.

.content {
border: 1px solid #ccc;

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...

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.

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

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.

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




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

11-11-2012, 06:43 PM
Something like this might get you started -
<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)
<div id="container">
<div id="content">
Your interesting website goes here
<!--end content--></div>
<div id="bottom"></div>
<!--end container--></div>

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