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 border

Discussion in 'Website Coding & Programming Forum:' started by SeedySteve, Mar 28, 2013.

  1. SeedySteve

    SeedySteve Member

    I'm trying to build a single page scrolling site, bit like http://www.fullstopinteractive.com/
    On each section i'm trying to add a different background colour, but unless i use the 'body' background, i get a white border. I've reduced all border / margins to 0px and it's still now working.
    So far I've tried placing images with 100% width in div or section tags and I'm getting nowhere...
    Any tips?
     
  2. Astarin

    Astarin New Member

    Have you got the CSS on hand for the images?
     
  3. SeedySteve

    SeedySteve Member

    The html is:

    <head>
    <link rel="stylesheet" type="text/css" href=".//stylesheet/stylesheet.css">
    </head>


    <body>

    <section id="background-image">

    </section>

    The Css:

    #background-image {background-image: url("../images/homebk.gif");}

    #background-image{
    width: 100%;
    padding:0px;
    height:700px;
    border:0px;
    }
     
  4. Astarin

    Astarin New Member

    Hmm, that should be okay, I'd assume it wouldnt be a margin causing it.
    Have you got a CSS reset running before it all? Could be worth trying that if you haven't.
     
  5. SeedySteve

    SeedySteve Member

    no, I've not used one - I'll check it out. thanks for getting back
     
  6. UK US Marketing

    UK US Marketing New Member

    I use Webplus X6 to design websites for small businesses. Yes, it may not be suitable for some large companies but creating the effect you are looking for is so easy, I bet I could do it in half the time.
     
  7. SeedySteve

    SeedySteve Member

    Hi,
    Thanks for replying - I'll check it out. I'm hoping to code the site from scratch, so might not be what I'm after.
     
  8. Squiddy

    Squiddy Guest

    Hi Steve :)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    #one { background: #0f0; }
    #two { background: #F00; }
    #three { background: #FF0; }
    .centre { width: 800px; margin: auto; text-align: center; }
    </style>
    </head>
    <body>
    <div id="one">
    <div class="centre">
    Divs will stretch to fit the content, no need to set 700px height<br />
    </div>

    </div>
    <div id="two">
    <div class="centre">
    Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />
    </div>
    </div>
    <div id="three">
    <div class="centre">
    Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />Divs will stretch to fit the content, no need to set 700px height<br />
    </div>
    </body>
    </html>
     
  9. SeedySteve

    SeedySteve Member

    Hi Sqiiddy,
    Thanks for that.
    I'm not getting it though - if I'm effectively having 4 pages set up in 1 html.doc, would I not need to set some sort or parameter. The content of each section may not add up to a complete page worth, so I'd end up with the bottom of one page on the screen and the top of the one below?
     
  10. Squiddy

    Squiddy Guest

    I have absolutely no idea what you're talking about, lol. Perhaps you're over thinking this? It's just one page with the content equivalent of 4.
    EDIT: If you don't have enough content to fill a design like this, then perhaps you should utilise a different layout? There is a reason all of these designs rely on heavy vertical spacing!
     
  11. SeedySteve

    SeedySteve Member

    I probably am over-thinking it - I've literally sat here all day doing it.
    I get the vertical fill, where the content goes, but i still have a little gap on the top, left and right. The code you sent me above has this same white line.
    If you look at the navigation bar on the full stop site, it fills the screen left to right - it's opaque as well! How have they done that?!
    haha - I'm having a nightmare today - I will crack it!
     
  12. Edger

    Edger New Member

    I've just had a little look over this and I can't seem to see any white line you are referring to? Have you cracked it?
     
  13. Squiddy

    Squiddy Guest

    Hahaha, welcome to website development my friend.
    Why don't you try this ;)
    body { margin: 0; }
     
    SeedySteve likes this.
  14. SeedySteve

    SeedySteve Member

    Legend Squiddy! - that's so simple.
    ffs.
     
  15. Squiddy

    Squiddy Guest

    No problem, yeah there's a lot of stuff which isn't very logical when it comes to web development, luckily there isn't too much of it to remember.
    Speaking of illogical issues, when the time comes, and it will, when you're trying to float one div left and another right, ( <div one> | <div two> ) you need to put them in a container div and apply the following CSS to it:
    .container { overflow: hidden; }
    good luck with the website!
     
    SeedySteve likes this.
  16. SeedySteve

    SeedySteve Member

    Thanks bud,
    I'm sure I'll be back before it's finished :)
     
  17. Squiddy

    Squiddy Guest

    No problem, I look forward to seeing the finished site!
     

Share This Page