Background image border

S

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?
 
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;
}
 
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.
 
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.
 
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>
 
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?
 
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!
 
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!
 
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?
 
Hahaha, welcome to website development my friend.
Why don't you try this ;)
body { margin: 0; }
 
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!
 
You must log in or register to reply here.
Back
Top