Announcement

Collapse
No announcement yet.

Background image / must be able to edit

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Background image / must be able to edit

    Our design requires that a background image populates behind any of the category, product, etc., content.

    And, the merchant requires the ability to edit this image. I am attempting to use extra_field_6 to do so.

    For example: the image would be at the top of the page in the background, and when you load a product page, the breadcrumbs would overlap.

    I placed the following in the desired location in the frame.html:

    <!--START: AAA_IMG -->
    <!--START: AAA_IMG_FORMAT-->
    <tr><td class="frame-AAA" STYLE="background-repeat: no-repeat top right;">[extra_field_6]</td></tr>
    <!--END: AAA_IMG_FORMAT-->
    <!--END: AAA_IMG -->

    In CSS, I have the following...
    frame-AAA{
    background-repeat:no-repeat;
    background-position:right;
    background-position:top;
    }

    The image populates, but pushes everything down on the page by the height of the image.

    I am sure it is something simple that I am missing here! Or perhaps I am approaching wrong?

    If anyone can assist, it would be appreciated!

  • #2
    Need to see more code:
    A BG image needs to go in the head.
    Your BG image is in a cell.
    Did you want the image to go in your main template table?

    It would be best to share your URL so someone may be able to look under the hood.
    .
    Clayton
    Go Live Industries

    Comment


    • #3
      Your thinking on the subject is perfect... its just your css that you need to work on.

      First I would change your template code, make it easy on the person who is putting the link in field 6 if you change it to what i have, all you will have to do is put a link to the image in field 6, you don't have to worry about the image code...


      Code:
      <!--START: AAA_IMG -->
      <!--START: AAA_IMG_FORMAT-->
      <div class="frame-AAA"><img src="[extra_field_6]" border="0" alt="[name]"></div>
      <!--END: AAA_IMG_FORMAT-->
      <!--END: AAA_IMG -->
      the css:
      Code:
      .frame-AAA {
      	position: absolute; 
      	z-index:-1;
      }
      Then you can position it where you want

      Comment

      Working...
      X