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!! Link to comment https://forums.phpfreaks.com/topic/240337-background-image-covers-my-page-wrap-text/ 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. Link to comment https://forums.phpfreaks.com/topic/240337-background-image-covers-my-page-wrap-text/#findComment-1234513 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. Link to comment https://forums.phpfreaks.com/topic/240337-background-image-covers-my-page-wrap-text/#findComment-1234514 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> Link to comment https://forums.phpfreaks.com/topic/240337-background-image-covers-my-page-wrap-text/#findComment-1234574 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!! Link to comment https://forums.phpfreaks.com/topic/240337-background-image-covers-my-page-wrap-text/#findComment-1234602 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!! Link to comment https://forums.phpfreaks.com/topic/240337-background-image-covers-my-page-wrap-text/#findComment-1234605 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.