Custom Theme Help

www.searchingforthereal.com

I put this Drupal theme together with psd2cssonline. I've gotten everything to look and work just about right except for when the image is over 1300px and you have an option to scroll down, the transparent bar running vertically will cut off with the browser. It is sizing to 100% of the browser not the image.

I posted the problem on a thread here

http://forums.digitalpoint.com/showthread.php?t=2032600#post15458914

The guy on that thread told me set up my background image differently.

What I am trying to do now is to place this code into my .php

<img src="background.jpg" class="bg" alt="" width="" height="" />

Code (markup):

and then for my css...

img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
display:none;}


@media screen and (max-width: 1024px){
img.bg {left: 50%;margin-left: -512px; }}

Code (markup):

The problem I'm having is getting the image to show up at all. I'm not extremely familiar with php so there is probably a really simple solution to this.

Here is the code for the page I am trying to display.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title><?php print $head_title ?></title>


<meta name="description" content="Put the description of this page here" />
<meta name="keywords" content="Put keywords for this page here separated by commas" />
<meta name="generator" content="psd2css Online - Dynamic Web Pages from your Photoshop Design in seconds" />

<!-- The CSS Reset from Eric Meyers -->
<!-- <link rel="stylesheet" type="text/css" href="<?php print $base_path ?>sites/all/themes/psd2css/cssreset.css" media="screen" /> -->

<!-- Some Drupal Defaults -->
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>

<!-- This is Drew Diller's PNG fix script that fixes the PNG
transparency problem with IE6.  It's available from here:
http://www.dillerdesign.com/experiment/DD_belatedPNG -->
<!--[if lt IE 7 ]>
<script type="text/javascript" src="<?php print $base_path ?>sites/all/themes/psd2css/DD_belatedPNG_0.0.8a-min.js"></script>
<![endif]-->

</head>
<body>

[B]<img src="background.jpg" class="bg" alt="" width="" height="" />[/B]



 <!-- This is 'topbar' -->
  <div id="Layer-1" class="topbar"  >
    <img src="<?php print $base_path.$directory ?>/Layer-1.png" width="100%" height="133" alt="topbar" class="pngimg" />
    
  </div>

 <!-- This is 'leftbar' -->
  <div id="Layer-2" class="leftbar"  >
    <img src="<?php print $base_path.$directory ?>/Layer-2.png" width="171" height="100%" alt="leftbar" class="pngimg" /></div>


</div>

<!-- This is 'title' -->
    <div id="Layer-49" class="title"  >
      <img src="<?php print $base_path.$directory ?>/Layer-49.png" width="905" height="67" alt="title" class="pngimg" /></div>

  <!-- This is 'bg_empty' -->
  <div id="Layer-3" class="bg empty"  >

    <!-- This is 'linkbox_empty' -->
    <div id="Layer-26" class="linkbox empty"  >

            <!-- This is 'Home_linkover' -->
      <div id="Layer-46" class="Home linkover"  >
        <a href="http://alaskatrailjournal.com/node/1"><img src="<?php print $base_path.$directory ?>/Layer-46.png" width="125" height="33" alt="Home" class="pngimg" border="0" /></a></div>

      <!-- This is 'Home_link' -->
      <div id="Layer-45" class="Home link"  >
        <a href="http://alaskatrailjournal.com/node/1"><img src="<?php print $base_path.$directory ?>/Layer-45.png" width="125" height="33" alt="Home" class="pngimg" border="0" /></a></div>

      <!-- This is 'Bio_linkover' -->
      <div id="Layer-44" class="Bio linkover"  >
        <a href="http://alaskatrailjournal.com/node/2"><img src="<?php print $base_path.$directory ?>/Layer-44.png" width="125" height="33" alt="Bio" class="pngimg" border="0" /></a></div>

      <!-- This is 'Bio_link' -->
      <div id="Layer-43" class="Bio link"  >
        <a href="http://alaskatrailjournal.com/node/2"><img src="<?php print $base_path.$directory ?>/Layer-43.png" width="125" height="33" alt="Bio" class="pngimg" border="0" /></a></div>

      <!-- This is 'Media_menu' -->
      <div id="Layer-39" class="Media menu"  >
        <img src="<?php print $base_path.$directory ?>/Layer-39.png" width="89" height="100" alt="Media" class="pngimg" />
        <!-- This is 'Music_link' -->
        <div id="Layer-42" class="Music link"  >
          <a href="http://alaskatrailjournal.com/node/3"><img src="<?php print $base_path.$directory ?>/Layer-42.png" width="58" height="18" alt="Music" class="pngimg" border="0" /></a></div>

        <!-- This is 'Videos_link' -->
        <div id="Layer-41" class="Videos link"  >
          <a href="http://alaskatrailjournal.com/node/4"><img src="<?php print $base_path.$directory ?>/Layer-41.png" width="68" height="18" alt="Videos" class="pngimg" border="0" /></a></div>

        <!-- This is 'Pictures_link' -->
        <div id="Layer-40" class="Pictures link"  >
          <a href="http://alaskatrailjournal.com/node/5"><img src="<?php print $base_path.$directory ?>/Layer-40.png" width="78" height="18" alt="Pictures" class="pngimg" border="0" /></a></div>

      </div>

      <!-- This is 'Media_linkover' -->
      <div id="Layer-38" class="Media linkover"  >
        <a href="http://alaskatrailjournal.com/node/1"><img src="<?php print $base_path.$directory ?>/Layer-38.png" width="125" height="33" alt="Media" class="pngimg" border="0" /></a></div>

      <!-- This is 'Media_link' -->
      <div id="Layer-37" class="Media link"  >
        <a href="http://alaskatrailjournal.com/node/1"><img src="<?php print $base_path.$directory ?>/Layer-37.png" width="125" height="33" alt="Media" class="pngimg" border="0" /></a></div>

      <!-- This is 'Store_linkover' -->
      <div id="Layer-36" class="Store linkover"  >
        <a href="http://alaskatrailjournal.com/node/6"><img src="<?php print $base_path.$directory ?>/Layer-36.png" width="125" height="33" alt="Store" class="pngimg" border="0" /></a></div>

      <!-- This is 'Store_link' -->
      <div id="Layer-35" class="Store link"  >
        <a href="http://alaskatrailjournal.com/node/6"><img src="<?php print $base_path.$directory ?>/Layer-35.png" width="125" height="33" alt="Store" class="pngimg" border="0" /></a></div>

      <!-- This is 'Blog_linkover' -->
      <div id="Layer-34" class="Blog linkover"  >
        <a href="http://alaskatrailjournal.com/node/7"><img src="<?php print $base_path.$directory ?>/Layer-34.png" width="125" height="34" alt="Blog" class="pngimg" border="0" /></a></div>

      <!-- This is 'Blog_link' -->
      <div id="Layer-33" class="Blog link"  >
        <a href="http://alaskatrailjournal.com/node/7"><img src="<?php print $base_path.$directory ?>/Layer-33.png" width="125" height="34" alt="Blog" class="pngimg" border="0" /></a></div>

      <!-- This is 'Events_linkover' -->
      <div id="Layer-32" class="Events linkover"  >
        <a href="http://alaskatrailjournal.com/node/8"><img src="<?php print $base_path.$directory ?>/Layer-32.png" width="125" height="33" alt="Events" class="pngimg" border="0" /></a></div>

      <!-- This is 'Events_link' -->
      <div id="Layer-31" class="Events link"  >
        <a href="http://alaskatrailjournal.com/node/8"><img src="<?php print $base_path.$directory ?>/Layer-31.png" width="125" height="33" alt="Events" class="pngimg" border="0" /></a></div>

      <!-- This is 'Contact_linkover' -->
      <div id="Layer-30" class="Contact linkover"  >
        <a href="http://alaskatrailjournal.com/node/9"><img src="<?php print $base_path.$directory ?>/Layer-30.png" width="125" height="33" alt="Contact" class="pngimg" border="0" /></a></div>

      <!-- This is 'Contact_link' -->
      <div id="Layer-29" class="Contact link"  >
        <a href="http://alaskatrailjournal.com/node/9"><img src="<?php print $base_path.$directory ?>/Layer-29.png" width="125" height="33" alt="Contact" class="pngimg" border="0" /></a></div>

      <!-- This is 'myspace_link' -->
      <div id="Layer-28" class="myspace link"  >
        <a href="http://myspace.com/searchingforthereal"><img src="<?php print $base_path.$directory ?>/Layer-28.png" width="42" height="43" alt="myspace" class="pngimg" border="0" /></a></div>

      <!-- This is 'facebook_link' -->
      <div id="Layer-27" class="facebook link"  >
        <a href="http://facebook.com/pages/Searching-For-The-Real/163824553644309"><img src="<?php print $base_path.$directory ?>/Layer-27.png" width="42" height="43" alt="facebook" class="pngimg" border="0" /></a></div>

    </div>

</div>

  <!-- This is 'musicplayer_drupal' -->
  <div id="Layer-47" class="musicplayer drupal editable"  >
<?php print $musicplayer ?>
<!-- This is a spacer that mitigates some margin issues with all sorts of drupal elements -->
<p class="drupal-fix">&nbsp;</p>
  </div>

  </div>


  <!-- This is 'left_drupal' -->
  <div id="Layer-48" class="left drupal editable"  >
<?php print $left ?>
<!-- This is a spacer that mitigates some margin issues with all sorts of drupal elements -->
<p class="drupal-fix">&nbsp;</p>

  </div>

  <?php print $closure ?>

<!-- This is the p2cedit Text Stylizer dialog and tools.  It will not exist
in the code for your final page. -->
<div id="p2c-edit" style="display: none;"></div>
<script>$('#p2c-edit').load('/app/p2cedit/p2cedit.html');</script>
<div id="contents">
</div>


</body>
</html>

Code (markup):

Am I doing something way wrong here?

Any help would be appreciated, thanks.

Log in or Sign up

Advertising (learn more)

Custom Theme Help

abourne Peon

Icecold153 Peon

Log in or Sign up

Advertising (learn more)

Custom Theme Help

abourne Peon

Icecold153 Peon

Useful Searches