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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: Background

  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background

    Hi there
    Just wondering if anyone can provide me with the basic CSS to setup a background similar to the following sites:

    http://www.bikes.com/main+en+00_100+home.html?zone=1
    http://psd2cssonline.com/

    In a nutshell... the background consists of a top portion, middle portion and the bottom portion.

    What I would like to do is create a top portion, say in "blue" colour, make the bottom "grey" and then the middle portion would be a graphic that blends in the blue and the grey...

    Any idea how to accomplish this?

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    What that site has used is a giant image for the background. One of them.
    If you want to create a background using more than one image like you say. You would have to make it as one in Photoshop, then slice it with the slicing tool.

    Make a giant background image in Photoshop, then split it into 3 how you want.
    You should do this for graphics for a site usually.

    Here I found you some links, they're all useful.

    http://www.google.co.uk/search?hl=en...e+Search&meta=

    Good luck
    Last edited by Millenia; 11-09-2008 at 10:17 PM.

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    wouldn't making one giant image take forever for the site to load?

    If I were to slice it, how would I code it into the background? Would I just create a background image in that particular DIV?

  • #4
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by losse View Post
    wouldn't making one giant image take forever for the site to load?

    If I were to slice it, how would I code it into the background? Would I just create a background image in that particular DIV?
    Yes, you would add the background to the div that you want it to.
    Or if you don't have a div that's convenient enough to slap a background image onto it, make a new one.

    like

    Code:
    .bgimage {
    background-image: url('something.png');
    some more properties;
    }
    et cetera

  • #5
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    any hints on the CSS to have a 100% background but the content be fixed width? Say 900px?

  • #6
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by losse View Post
    any hints on the CSS to have a 100% background but the content be fixed width? Say 900px?
    Do you mean:

    Have a fixed background image at the top.
    One that stretches in the middle.
    and have a fixed on at the bottom?

  • #7
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Just like that first link: http://www.bikes.com/main+en+00_100+home.html?zone=1

    The background would stretch to 100% of the browser but in terms of the content inside (let's say the width of the header and the columns holding the content) would be 900px rather than also 100%...

    Let me know if that's still unclear

  • #8
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh... I guess, yeah the images would stretch... I'd make them wide enough for 1024x768 resolution and hope for the besT!

  • #9
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by losse View Post
    Just like that first link: http://www.bikes.com/main+en+00_100+home.html?zone=1

    The background would stretch to 100% of the browser but in terms of the content inside (let's say the width of the header and the columns holding the content) would be 900px rather than also 100%...

    Let me know if that's still unclear
    You could have 1 big background in the back.

    So:

    Code:
    body {
    other stuff;
    background-image: url('something.png');
    }
    that's for you're background, then you can have another background image on the div that's holding the content.

    That way the background image on the content div, will be placed on top of the actual background one.

  • #10
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So I don't need to specify their widths? how do I make sure it's 100% of the browser?

  • #11
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by losse View Post
    So I don't need to specify their widths? how do I make sure it's 100% of the browser?
    I'm not sure about that, I don't work with backgrounds much. You might have to google it. Sorry

  • #12
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great thanks!!

    By the way... is there a certain size image that should be kept in mind for the background? Or should I just slice it up?

  • #13
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by losse View Post
    Great thanks!!

    By the way... is there a certain size image that should be kept in mind for the background? Or should I just slice it up?
    Well I'm thinking of it from a logical point now, not a designer:

    If you have a background image that is bigger than the max height resolution on any monitor, you will get a vertical scroll bar in any browser on any resolution. So if you're content is more than a page then you can just do that, and you're background will always occupy all the browser

    But if you have little content, you might want to slice it up.

  • #14
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    If you have little content, then wouldn't you put
    Code:
    height: 100%
    ?

    Or am I just talking rubbish?
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #15
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by BabyJack View Post
    If you have little content, then wouldn't you put
    Code:
    height: 100%
    ?

    Or am I just talking rubbish?
    But you can't really change the height of an image at will like that. It will distort it.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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