Skip navigation
Currently Being Moderated

Add a Background-Image to an Editable Region

Apr 4, 2012 8:52 AM

I would like to add a background image at the bottom of this page (www.theram.com/drink_specials.html). The 'body' editable region is where I would like to add it but I am not sure how to...could you help me out? I don't want this image to show up on all template pages, just this page.

 

I added this code in the head section for only this page but obviously it is not correct because I don't see the image.

 

<style type="text/css">

<!--

body {

          background-image:url(/images/backgroundStoli_web.jpg);

          background-repeat: no-repeat;

          background-position: bottom;

}

</style>

 

Thanks for your help!!

 
Replies
  • Currently Being Moderated
    Apr 4, 2012 9:17 AM   in reply to npolen

    Not sure where you want this to display, but this is what's in the head of your linked page

     

    <style type="text/css">

    <!--

    body {

    background-color: #333;

    margin: 0 auto;

    padding: 0px;

    margin-left: 0px;

    margin-right: 0px;

    }

    .navbar_center {

    text-align: center;

    }

    -->

    </style>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 4, 2012 9:20 AM   in reply to npolen

    It's most probably there but youre not seeing it as its hidden behind the  table <td> cell which is colored white:

    <th width="675" align="left" valign="top" bgcolor="#FFFFFF" scope="col">

     

     

    To make sure the image IS there add the absolute link path: (as below)

     

    body {

        background-image:url(http://www.theram.com/images/backgroundStoli_web.jpg);

        background-repeat: no-repeat;

        background-position: bottom;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 4, 2012 10:21 AM   in reply to npolen

    Since you are using table elements as containers, apply the style to the desired table element

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 4, 2012 10:36 AM   in reply to npolen

    npolen wrote:

     

    I'm sorry, I don't think I was very clear on where I wanted this...I would like it to be in the white part of 'body' editable region that has the drink pictures and descriptions in it. How do I add a background image to that part of the page? Thanks!

    In that case add an 'id' to the <th> cell that the drinks table is inserted into (see below - id="bg_1")

     

    <th width="675" id="bg_1" align="left" valign="top" bgcolor="#FFFFFF" scope="col">

     

    Then amend your 'body' css selector to #bg_1 (as below)

     

    #bg_1 {

        background-image:url(/images/backgroundStoli_web.jpg);

        background-repeat: no-repeat;

        background-position: bottom;

    }

     

    I don't know if /images requires a leading slash infront of it. If the background image does not show up get rid of the leading slash /

     

    Not sure why youre using a <th></th> table cell to insert the drinks table into. A <th></th> tag is a table header tag.......you should really be using a <td></td> tag.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 4, 2012 12:32 PM   in reply to npolen

    You will only add the styling block in the head section of page(s) where you want the effect to appear.

    That, in combination with the ID attribute on the cell tag, will apply only on pages where you insert it.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points