/    Sign up×
Community /Pin to ProfileBookmark

Help with background image

Copy linkTweet thisAlerts:
Feb 27.2008

I’m still very new to css. I”m working with Dreamweaver and usually do a google search to find answers to problems that I run into.
I have a site that I’m trying to convert to css with divs and get rid of tables. What I’m working on now is basically a template with backgound images and everything that will be in every page on the site. The parent div is a set width that is centered on the page with a height of 100% to expand as needed. Within the parent I have four divs from top to bottom all centered within the parent. The main content div I have set to auto height to expand as needed when content is added.
The parent div has a background image that is set to tile vertically. The problem I’m having is the tiled image stops at the bottom of the visible window of the browser. If there is enough content to require scrolling down, the background image doesn’t continue down to fill the page.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@gtcwayauthorFeb 27.2008 — Here is the css


[code=html]html, body {
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}

a:link {
color: #000000;
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #666666;
}

a:hover {
text-decoration: underline;
color: #000000;
}

a:active {
text-decoration: none;
}

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #FFFFFF;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
}

h3 {
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}

h4 {
}

p {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.3em;
text-align: justify;
margin-left: 30px;
margin-right: 30px;
}

#background {
width: 955px;
position: relative;
background-image: url(../images/pagebackground.gif);
background-repeat: repeat-y;
z-index: auto;
margin-right: auto;
margin-left: auto;
height: 100%;
left: auto;
right: auto;
}

#head {
position:relative;
width:620px;
height:auto;
z-index:auto;
text-align: center;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 35px;
}

#navigation {
position:relative;
width:620px;
height:32px;
z-index:auto;
text-align: center;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 25px;
}

#footer {
position:relative;
width:400px;
height:60px;
z-index:auto;
text-align: center;
font-size: 12px;
margin-right: auto;
margin-left: auto;
padding-top: 50px;
padding-bottom: 20px;
}

#index_rendering {
position:absolute;
left:132px;
top:173px;
width:690px;
height:301px;
z-index:1;
text-align: center;
}

#content {
position:relative;
width:700px;
height:auto;
z-index:102;
background-image: url(../images/box_middle.gif);
background-repeat: repeat-y;
text-align: center;
margin-right: auto;
margin-left: auto;
}

#content img {
padding-bottom: 0px;
}

#background #content #topimage {
background-position: center;
margin-bottom: 12px;
}

#background #content #map {
padding-right: 20px;
padding-left: 20px;
padding-top: 25px;
padding-bottom: 10px;
}[/code]
Copy linkTweet thisAlerts:
@CentauriFeb 27.2008 — Setting the height of #background to 100% means just that - it will be locked to 100% height of the parent, which in this case is the screen height, and cannot get any bigger (except in IE6 which stuffs this up) - any extra content will spill out the bottom. You need min-height, but still need to feed height to IE6 :[CODE]#background {
width: 955px;
position: relative;
background-image: url(../images/pagebackground.gif);
background-repeat: repeat-y;
z-index: auto;
margin-right: auto;
margin-left: auto;
[COLOR="Red"]min-height[/COLOR]: 100%;
left: auto;
right: auto;
}

[COLOR="Red"]* html #background {
height: 100%;
}[/COLOR][/CODE]
Copy linkTweet thisAlerts:
@gtcwayauthorFeb 28.2008 — Thank you. I don't have access to IE6 right now but it seems to be working fine in Firefox and IE7.
×

Success!

Help @gtcway spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.14,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...