Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: background size

  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    background size

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello stront,

    I'm not sure this is what you're looking for -
    Code:
    #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 -
    Code:
    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 -
    Code:
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    stront (11-11-2012)

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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 +/-?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.

    Code:
    #site_content,
    #sidebar_container,
    .content {
      border: 1px solid #ccc;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    but how can i see the page size? -.- i just want to know the height of all my pages...

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by stront View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Oct 2012
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Oct 2012
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Something like this might get you started -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You might be interested in this method too - http://nopeople.com/CSS%20tips/slider/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •