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

Background Image Problem

Discussion in 'Website Design Forum:' started by chrismitchell, Mar 31, 2010.

  1. I can't work out how to make my background image 100% wide for all screens (as it seems to leave a white space on the left) and how to make it so that the whole thing doesn't scroll on smaller screens / resolutions.. its my redesign for widdlerswee.

    Widdlers Wee

    its not finished yet but its just an idea at the moment :)
  2. Levi

    Levi Moderator Staff Member

    Is that all one colour or has it got a subtle gradient in it?

    if it's a single colour you could just use
    background-colour: hexnumber; 
    in the css for the background instead of using an image :)

    if it's got a gradient if it's just set it to repeat
    background-repeat: repeat-x
    in your css (might even get away with a smaller image :))
  3. tbwcf

    tbwcf Active Member

    Levis right Chris.

    That image can be cropped at only 1px wide, then in your css:

    body {background:url(images/bg.jpg) repeat-x top #d2e1c0;}

    also this makes your image MUCH smaller - EXAMPLE
  4. ok the Background is sorted.. now its just my bottom bar thats not filling all the way across :(

    thanks for all the help :) just been looking at it for too damn long, going crosseyed! :lol:
  5. Levi

    Levi Moderator Staff Member

    Dont you just need background-repeat: repeat-x again.
  6. tbwcf

    tbwcf Active Member

    The bottom bar/footer doesn't need to be two divs as it is or use any background images as its solid colour.

    #footer {background:#c4d7ac; border-top:solid 20px #98a686;}

    That will give the same effect.
  7. tbwcf

    tbwcf Active Member

    You need to take your width off the footer also and lose the margins left/right. To center your content inside put another div with class="container"
    .container {width:900px; /*or what ever your width is*/ margin:0 auto 0 auto;}
  8. tbwcf

    tbwcf Active Member

    Also your bird would be better positioned absolutely then it won't cock up other elements.
  9. cheers for all the help Levi and Andy :)

    What do you guys think of the redesign by the way?

    I'm going to be adding video to this in the next month or so to go with the recipes :) the post for each recipe will be very different :D
  10. Levi

    Levi Moderator Staff Member

    opinion on it -
    I like where it's coming from but there are some issue which would bug me personally -

    the bird is chopped off in my window (1680x1050) so it either needs pulling down or following the curve round.

    I'm not keen on the menu text, it just seems clunky, might need a lighter weight or smaller size (or both) - might also be worth trying a different colour/font.

    you've got some strange block text (rectangle with 00 over 03 inside it - font issue I think) at the end of the 2 middle text lines. I'm also not keen on the wobbly line widths

    Might need to look at some of the allignments, they seem to be going a little wobbly and it doesn't work too well to me.
  11. yeah I do need to look at all the positioning more for the text.. its on the list of things to fix :) and I agree with the top menu, but I also quite like it chunky as it stands out a bit more. But I will have a looksee and see how it looks being lighter and smaller :) maybe even a different colour :eek: :lol:
  12. tbwcf

    tbwcf Active Member

    Those blocks are due to copying from word or similar, they'll be from line breaks (soft returns) they won't show in the html line you need to find it in the html and delete the extra space.

    I think the design has potential, I think the biggest let down at present is the fonts maybe look into cufon replacement for sections and image replacement for the navigation?

    Header probably takes up more space than it needs too.

    I like the idea of adding video for your recipies!

    Keep at it.
  13. yeah the recipes video thing is really exciting to me :) hopefully i will get enough interest to be able to finally print my recipe book :D and maybe even sell it :D LOL :p
  14. Ok thats now working ok :) but now I have a different problem on my post page, i've made a "video" div and its not showing up at all even though it is a 200px high and 700px wide black box.. any ideas why its not showing up?

Share This Page