scottiesr1 Posted June 24, 2011 Share Posted June 24, 2011 I am trying to get a background picture and then a page wrap text area over it. I get the page wrap area to pop up and then it is covered by the background picture. I hate to admit that I have been working on this for hours...but I have. I have included the code below and I appreciate anyone who may offer some insight as to why the background covers the text! I have the following function that I call to set up the background and the wrap box: <?php function back_pic() { ?> <html><style> img.bg { min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } #page-wrap { position: relative; width: 700px; margin: 100px auto; padding: 20px; background: mistyrose; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } p { font: 15px/2 Georgia, Serif; margin: 0 0 20px 0; text-indent: 20px; } </style> <img src="../images/bckpic.jpg" class="bg"> <div style=" top: 0; left: 20; position: absolute; visibility: show;"> <A HREF="/websitepages/home.php"><IMG SRC="../images/home1.png"> </a> <A HREF="/websitepages/about.php"><IMG SRC="../images/signup1.png"> </a> </div> </html> <?php } ?> ---------------------------------------------------------------------------------- Then I have this code that is supposed to create the page with the text over the picture: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php session_start(); include('../select_packages/pgbac_design.php'); back_pic(); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Page Form</title> <link href="loginmodule.css" rel="stylesheet" type="text/css" /> </head> <div id="page-wrap" > <h1 style="text-align:center;"> <br/><font color="red" size="5"><strong><b> Hello, My Code Doesn't Work </font> </h1> <h2 style="text-align:center;"><font color="black" size="4"> I pop up and then I hide behind the picture....or maybe I just pop up for a second. Users must read really fast to catch me before I disappear. </font> </h2> </div> </html> THANKS!! Quote Link to comment Share on other sites More sharing options...
Pikachu2000 Posted June 24, 2011 Share Posted June 24, 2011 When posting code, enclose it within the forum's . . . BBCode tags. Quote Link to comment Share on other sites More sharing options...
WebStyles Posted June 24, 2011 Share Posted June 24, 2011 I am trying to get a background picture and then a page wrap text area over it. I get the page wrap area to pop up and then it is covered by the background picture. I hate to admit that I have been working on this for hours...but I have. I have included the code below and I appreciate anyone who may offer some insight as to why the background covers the text! I didn't really read through your code, but from the short description this sounds more like a z-index CSS problem, and not php. Quote Link to comment Share on other sites More sharing options...
ryanfilard Posted June 25, 2011 Share Posted June 25, 2011 Try this code <style type="text/css"> img.bg { min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } #page-wrap { position: relative; width: 700px; margin: 100px auto; padding: 20px; background: mistyrose; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } p { font: 15px/2 Georgia, Serif; margin: 0 0 20px 0; text-indent: 20px; } </style> Quote Link to comment Share on other sites More sharing options...
scottiesr1 Posted June 25, 2011 Author Share Posted June 25, 2011 Thank you Ryan. I will try it and let you know!! Quote Link to comment Share on other sites More sharing options...
scottiesr1 Posted June 25, 2011 Author Share Posted June 25, 2011 WOW, Thank you a million!! It worked!! I spent about 4 hours trying everything!! I so appreciate you time and you help!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.