have centered a page in html, but problems with background colour

Hi,

Have an instance where I need to centre an html page on the screen, i.e. both horizontally and vertically. I have achieved this with the below container div. I know that my content is always 650px by 490px. #containerRTA is in my stylesheet and I apply it to a <div> that encapsulates everything in the <body> of my html page. Now with my content centred I want the whole html page to have a yellow background. I do not know how to achieve this. All I manage to do is set the actual background of just the content to yellow, not the margins. So my centred content is centred and the rest of the page is white.

Can anyone show me how to achieve this?



#containerRTA{
background-color: #FFFF00;
width: 650px;
height: 490px;
margin-left: -325px;
margin-top: -245px;
position: absolute;
top: 50%;
left: 50%;  
}
RupertAAsked:
Who is Participating?
 
sivagnanam chandrakanthConnect With a Mentor Technical LeadCommented:
Try

body{
background-color: #FFFF00;
}
0
 
RupertAAuthor Commented:
that worked sivagnanam_c - will leave thread open in case anybody else wants to comment.
0
 
headshockConnect With a Mentor Commented:
<!DOCTYPE html>
<html>
<style>
#containerRTA{
width: 650px;
height: 490px;
border:solid 1px #000;
margin: 0 auto;

margin-top: 50%;

} 
body {background-color: #FFFF00;width:100%;height:100%;position:relative;}
</style>
<body>


<div id="containerRTA">
Your content goes here
</div>
</body>
</html>

Open in new window

adjust the margin-top till you have what you want!
0
 
RupertAAuthor Commented:
That also works. Thank you both very much. I will split points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.