mghayes82 Posted December 13, 2006 Share Posted December 13, 2006 Hi,I'm very new with CSS and with building websites for that matter. I'm trying to build a site that will allow me to place a text box on top of an image so that the image will show up behind it. I tried the z-index sample from www.w3schools.com tutorials and it sort of worked with absolute positioning but it turned the image I was using into a grey box and I want a little more flexibility with the actual position. I'm wanting to use relative positioning to keep everything centered and lined up. Is it possible to place a text box over an image if it's relative positioning? I need all the help I can get. Thanks. This is what I have for the HTML code.<head><link rel="stylesheet" type="text/css"href="sgr_sample.css" /><title>Untitled Document</title></head><body><div align="center"><img class="header" src="page_layout/sgpagetest01_01.jpg" width="749" height="118" /> <img class="background" src="page_layout/sgpagetest01_02.jpg" width="749" height="448" /> <p>This is where I want the text box to be in the code but I want the text to show up on top of the "sgpagetest01_02.jpg"</p> <img class="footer" src="page_layout/sgpagetest01_03.gif" width="749" height="37" /> </div></body> This is what I have for the CSS code.body {background-color: #000000;color: White;}img.footer {position:relative;horizontal:center;top:0px;z-index:-1}img.background {position:relative;horizontal:center;top:0px;z-index:-1}img.header {position:relative;horizontal:center;top:0px;z-index:-1} Please help if you can! Link to comment Share on other sites More sharing options...
PrateekSaxena Posted December 14, 2006 Share Posted December 14, 2006 I would say that you can make a <div> with the background image as the image that you want then place the text area inside it. Or make the background image of the textarea as that image. Link to comment Share on other sites More sharing options...
ste Posted December 14, 2006 Share Posted December 14, 2006 html: <div id="content"><p>This is where I want the text box to be in the code but I want the text to show up on top of the "sgpagetest01_02.jpg"</p></div> css: #content {width: 749px; height: 448px; background-image: url(page_layout/sgpagetest01_02.jpg);} Link to comment Share on other sites More sharing options...
mghayes82 Posted December 14, 2006 Author Share Posted December 14, 2006 Thanks for the code. It's got me on the right track but I'm running into a small problem with it. I used <div align="center"> to get the header and footer centered, so that works. The "content" has to fit between the header and the footer but when I drop it in there, the text becomes controlled by the <div align="> function. I want the background image to line up with the header and footer which it does when it falls under the <div align="> but then the text is thrown off. What can I do to fix that problem? I'm trying to stay away from using tables and frames. Oh there is also a gap between the header and the "content". How do I "tighten" it up so the gaps are gone? Any suggestions? Thanks. CSSp.leftmargin {margin-left: 5cm;}#content {position:relative;width: 749px;height: 448px;background-image: url(page_layout/sgpagetest01_02.jpg);} HTML<body><div align="center"><img class="header" src="page_layout/sgpagetest01_01.jpg" width="749" height="118" /><div id="content"> <p class="leftmargin">This is where I want the text box to be in the code but I want the text to show up on top of the "sgpagetest01_02.jpg" sdfkjbfdgsi jknfgaauiwer oiasfnaskf ahal asuhaf f aishalafaijgapg fguhpa9srwe dsflmfgaga </p> </div><div align="center"> <img class="footer" src="page_layout/sgpagetest01_03.gif" width="749" height="37" /> </div></div></body> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now