Jump to content

Recommended Posts

 

:wtf:

 

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!!

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.

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>

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.