1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

100% width background solution?

Discussion in 'Web Design' started by iliketurtles, Jul 13, 2010.

  1. iliketurtles

    iliketurtles Regular Member

    Joined:
    Dec 10, 2008
    Messages:
    283
    Likes Received:
    10
    Home Page:
    I wanna make a site that looks like this: http://twittermarketingbook.com/wordpress/

    ...but I understand that 100% width doesnt work yet because of crappy browsers.

    So what to do? I`ve been looking for an answer for 2 days, still no closer to a solution.
     
  2. nomore

    nomore Newbie

    Joined:
    Oct 2, 2009
    Messages:
    46
    Likes Received:
    9
    I'm not sure I understand the problem. That kind of background is pretty easy to setup.

    Just find the background you want, resize it to a pretty big size (1700 px across is the size of the one in your link), set it as the background image, center and no-repeat it, and you should be good to go. Are you trying to find an image too small and stretch it so it fills 100% of the screen?
     
    Last edited: Jul 15, 2010
  3. dimedesign

    dimedesign Newbie

    Joined:
    Jan 7, 2010
    Messages:
    16
    Likes Received:
    1
    Yeah nomore is right, you just need to make the background image very large and set it as the background image without repeating it.
     
  4. ijake

    ijake Registered Member

    Joined:
    Aug 19, 2008
    Messages:
    73
    Likes Received:
    7
    Occupation:
    Web Developer
    Location:
    UK
    Make a big background, and if you want it to get smaller if the browser is resized, do min-width: 100%; :)
     
  5. likeskoolaid

    likeskoolaid Regular Member

    Joined:
    Dec 27, 2009
    Messages:
    352
    Likes Received:
    104
    Occupation:
    \˚ㄥ˚\
    Location:
    \ᇂ_ᇂ\
    also use the following css code so the image stays in place and when you scroll down the page to view the content the background image will always be in the background and you wont see any of the teal color at all.

    <style type="text/css">
    <!--
    BODY {
    background-image: url(image.jpg);
    background-attachment: fixed;
    }
    -->
    </style>