How do I have a large image as my web page background without having the horizontal scrollbars appear?
Here is the web page I am referring to:
http://70.38.38.174//where-does-this-drain-to/where-does-this-drain-go.html
Here is my css:
body {
background: #3F3F3F url(bg.jpg) no-repeat center top;
color: #222222;
font-family: "Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
font-size: 75%;
}
Thanks in advance!
M
I'm not seeing a horizontal scroll bar, probably because I'm using wide-screen(?) Trying setting your margins to auto so the page is adjusted no matter what the screen size is. Add this into your body code:
margin:0px auto;landing has a width of 760px.
INSIDE it is contentMain, with a width of 950px
contentNotMain is also inside landing and also has a width of 950px.
So contentMain is forcing landing to be wider and sticks out to the right side of it.
When I deleted the width declaration for contentMain and contentNotMain it got rid of the scroll bar until the page is smaller than you map.
Also, the css says for contentMain top:-290px; (why???)
then the inline styles you have applied say to use for contentMain top:0px;
Perhaps I'm being a bit picky, but that's quite a change!
Also you have used three nested divs to hold the first bit of text - WHY???
<div id="contentMain" style="left: 52px; top: 0px; height: 195px;">
<div id="landingDesc" style="height: 192px">
<div id="landingDescPad">
<h1>Where does this drain go to?</h1>
<p>Find out the impacts on the environment when something nasty
gets spilled. Select a season. Then, click on the map where the
spill occured. The map will show you where your spill went, and,
let you know how much damage to the environment the spill caused.
Click the "Drains On" button to show the underlying drainage network<br>
</p>
<form name="Season">
<p>Rainy Season<input checked="checked" class="styled" name="GetSeason" type="radio" value="Rainy Season" />
Dry Season<input class="styled" name="GetSeason" type="radio" value="Dry Season" /></p>
</form>
<p></p>
</div>
</div>
</div>You only need one div, with the correct css, to get the text in the correct place with the right styles.
PS a horizontal scrollbar shows up if your viewport is less than 1241px, so if you can't see it, just resize the browser itself.
PPS I get the same result every time I try you where does it go instructions - is that right?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.