Skip navigation
bex43
Currently Being Moderated

How do I ensure page background stays within table for different browser settings?

Jul 16, 2012 8:37 AM

Tags: #cs4 #dreamweaver #tables #backgrounds

see www.londongynaeconsultancy.co.uk which shows background image which is moving dependng on which browser it it used on ... looks fine on my mac but image slips on my laptop?  Really appreciate any help?

 
Replies
  • Currently Being Moderated
    Jul 16, 2012 8:41 AM   in reply to bex43

    When you say your background slips can you describe what is happening?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 16, 2012 8:51 AM   in reply to osgood_

    Ok I see why its 'slipping' out of position now. DON'T attach the background image to the 'body' tag css attch it to the <td> cell that you want the image to appear in.

     

    Create a new css class called .flowerImage (or whatever name you like):

     

    .flowerImage {

        background-image: url(assets/DARKERGRADlilybackground894x567.jpg);

        background-position: bottom, bottom;

        background-repeat: no-repeat;

    }

     

     

    Then attach the class to the <td> cell:

     

    <td width="894" height="563" id="flowerImage"><p class="mainbodycopy"> </p>

          <p class="mainbodycopy"> </p>

          <p class="mainbodycopy"> </p>

          <p class="mainbodycopy"><span class="mainbodycopyheader">Welcome to the London Gynae Consultancy</span></p>

    <p class="mainbodycopy"> </p>

          <p class="mainbodycopy"> </p>

          <p class="mainbodycopy">We are a medical service dedicated to all your gynaecological needs. We offer an excellent </p>

          <p class="mainbodycopy">range of services with both English and Arabic doctors and a female gynaecologist.</p>

    <p class="mainbodycopy"> </p>

          <p class="mainbodycopy">Our range of servcies include the management of:</p>

          <p class="mainbodycopy"> </p>

          <p class="mainbodycopy">Heavy periods, fibroids, entometriosis and pelvic pain, colposcopy and smear abnormalities,</p>

    <p class="mainbodycopy">infertility and polycystic ovarian syndrome, urinary incontinence, prolapse and problems</p>

          <p class="mainbodycopy">of the menopause.</p>

          <p class="mainbodycopy"> </p>

          <p class="mainbodycopy">Womens health problems are often troublesome and embarressing, interfering</p>

          <p class="mainbodycopy">with your way of life. We understand the sensitive issues surrounding</p>

          <p class="mainbodycopy">the gynaecological problems you may be experiencing and offer</p>

          <p class="mainbodycopy">fully comprehensive assessments, investigations and treatments</p>

          <p class="mainbodycopy">in a comfortable and confidential environment.</p>

          <p class="mainbodycopy"> </p>

          <p class="mainbodycopy"> </p>

          <p class="mainbodycopy"> </p>

    <p class="mainbodycopy"><span class="mainbodycopyendline">Visit us </span><span class="mainbodycopyendline">to experience </span></p>

        <p class="mainbodycopy"><span class="mainbodycopyendline">medical excellence</span> <span class="mainbodycopyendline">at its best</span></p>

        <p class="mainbodycopy"> </p>

        <p class="mainbodycopy"> </p>

        <p class="mainbodycopy"> </p></td>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 16, 2012 8:57 AM   in reply to osgood_

    See all those 'mainbodycopy' classes. You can get rid of those and just target the paragraph tags in the .flowerImage <td> cell by doing the following:

     

     

     

    .flowerImage p {

     

    css attributes go here;

     

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2012 7:46 AM   in reply to bex43

    May we please see your attempted CSS code for the td?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 6:19 AM   in reply to bex43

    I was just asking for this, and I found it in your online CSS

    .backgroundimage {

        background-image: url(assets/backgroundunderconstr894x570.jpg);

        background-repeat: no-repeat;

        background-position: center bottom;

    }

     

    I think your problem is that you also have that BF image in your body CSS try removing it from the body CSS

     

    body {

        background-repeat: no-repeat;

        font-family: Verdana, Geneva, sans-serif;

        vertical-align: middle;

        outline-style: none;

        height: 700px;

        width: auto;

        padding-top: 0px;

        margin-top: 20px;

        margin-left: 0px;

        padding-bottom: 0px;

        background-image: url(assets/backgroundunderconstr894x570.jpg);

        text-align: left;

        float: none;

        border-right-color: #CB1269;

        border-left-color: #CB1269;

        border-right-style: none;

        border-left-style: none;

        border-right-width: medium;

        border-left-width: medium;

        margin-right: 0px;

        background-color: #F9E2E9;

        background-attachment: inherit;

        background-position: center 160px;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 6:59 AM   in reply to bex43

    No Bex, you are not dim... there is something we are both missing in the CSS.

    Osgood is great at this stuff, let's chant for him to fly in here and rescue us.

     

    I'll keep digging

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 7:16 AM   in reply to bex43

    The background is NOT showing because you have failed to close the css seletor below with a } If you do not close it the css cascade stops. Add a } as shown below at the end of the selector.

     

    .titlebox {

        border-top-width: medium;

        border-right-width: medium;

        border-bottom-width: medium;

        border-left-width: medium;

        border-top-style: solid;

        border-right-style: solid;

        border-bottom-style: none;

        border-left-style: solid;

        border-top-color: #CC136B;

        border-right-color: #CC136B;

        border-bottom-color: #CC136B;

        border-left-color: #CC136B;

        border-color: #CB1269;

        padding-top: 0px;

        padding-left: 0px;

        top: 10px;

        bottom: 10px;

        padding-bottom: 0px;

        padding-right: 0px;

    }

     

     

    You sholud also have a . or # infront of the two selectors below. If they are classes add an . if they are ids add #

     

     

    femalegynaecolourfont {

        color: #CC1366;

    }

     

     

    horizontalbar {

        color: #CC1366;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 8:19 AM   in reply to bex43

    Sorry, no IPad to view it

    Is the image too small for the IPAD table td display... or too large?

     

    You might need to use a BG image stretching technique like this on at Nancy's site

    http://alt-web.com/TEST/Resizable-BG.shtml

     
    |
    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