/    Sign up×
Community /Pin to ProfileBookmark

Background Color Size and Positioning

Copy linkTweet thisAlerts:
Aug 31.2009

First of all, I am just starting to learn about CSS, so my question may sound very basic. I have my text in the center and I am want to have the background of that section colored white. Now when I add the background-color code that I have below it only colors a small section in the middle of the page but it does not cover all the way down the page. I have started to look at background values like position, repeat etc. but I can;t find an example on how to stretch the color vertically down the entire length of the page.

I have included a link to a page that I have been using as reference for learning CSS. If anyone has a better page, mainly for a beginner, please post it. The problem I have found about learning CSS is the old “Where do I begin.”

[url]http://www.codertools.com/css_help_guide/css_background-color.aspx[/url]

#box {
position:absolute;
top:20%;
right:20%;
bottom:20%;
left:20%;
padding:25px;
margin:25px;
text-align: center;
background-color:#b0c4de

}

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@webdeveloper074Sep 01.2009 — If you could paste some code...
Copy linkTweet thisAlerts:
@cujo_77authorSep 01.2009 — Below is almost the entire code from one of my pages. I do not have that much code in between the <p> tags because I had to take out some of the stuff that related to one of my clients business. In reality I will have much more information in that area.

<html>

<head>

<title>This is Where the Title Goes</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<meta name="generator" content="CoffeeCup HTML Editor 2008 - www.coffeecup.com">

<meta name="description" content="">

<meta name="keywords" content="">

<!-- This is the code for the CSS -->

<style type="text/css">

#box {

position:absolute;

top:20%;

right:20%;

bottom:20%;

left:20%;

padding:25px;

margin:25px;

text-align: center;

background-color:#b0c4de

}

</style>



</head>

<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000" background="sand.jpg">


<div id="box">

<!-- Below is the code for the menu -->

<script language="javascript" src="scripts/menu.js"></script>

<!-- Below is the code for the text -->

<font size="5"><b>LEASES</b></font>

<p>

<font size="4">

There is the main area where my text will go and this is the area that I want to have white in the background.

</font>

</div>

</body>

</html>
Copy linkTweet thisAlerts:
@webdeveloper074Sep 04.2009 — #box {

position:absolute;

top:20%;

right:20%;

bottom:20%;

left:20%;

padding:25px;

margin:25px;

text-align: center;

[B]background-color:#FFFFFF[/B]

}

try this
×

Success!

Help @cujo_77 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 5.4,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

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