www.webdeveloper.com
Results 1 to 5 of 5

Thread: #contentWrapper{ background-image: url(../aboutUs/NewChurch3a.jpg);

  1. #1
    Join Date
    Mar 2008
    Posts
    3

    #contentWrapper{ background-image: url(../aboutUs/NewChurch3a.jpg);

    Greetings.

    After trying to figure out the problem with images not displaying (yes the page validates in CSS 2.1 and XHTML 1.0 Transitional), I have decided to poke my eyes out.

    When I return I hope someone will tell me what simple mistake I made in my code.

    I am a novice programmer. This type of image display is a concept I would like to develop as my image manipulation techniques improve. This is my first large volunteer site. Any help would be greatly appreciated. Please see the code below.

    <style type="text/css">
    /*Bold Text*/
    b{color: blue;}
    /*Underlined Text*/
    u{color: blue;}
    h2{color: blue;}
    .contentSpacer a:hover {color: blue;}
    #footer a:hover{ color: blue;}
    #hMenu a:hover{color: blue;}
    #contentWrapper{ background-image: url(../aboutUs/NewChurch3a.jpg); background-repeat: no-repeat; }
    </style>

    I have tried various forms of the url, with and without quotations, with single quotations, with full web address, partial address (as shown). The image does not display in IE or FF or even Opera. Opera is a bit kooky so I am not looking for perfection there.

    website: http://www.sheliah.com/efumc/aboutUs/history.html

    Thank you for your time.

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    As the contents of #contentWrapper are floated, and therefore taken out of the document flow, the height of #contentWrapper is collapsing to zero, and therefore the background will not display. Either don't float #centerColumn or add overflow:hidden; to #contentWrapper to force it to surround floats.

  3. #3
    Join Date
    Mar 2008
    Posts
    3
    Centauri,

    I think I found another solution that worked as well.
    <!-- Page specific style!-->
    <style type="text/css">
    /*Bold Text*/
    b{color: blue;}
    /*Underlined Text*/
    u{color: blue;}
    h2{color: blue;}
    .contentSpacer a:hover {color: blue;}
    #footer a:hover{ color: blue;}
    #hMenu a:hover{color: blue;}
    #centerColumn{ background-image: url(../aboutUs/NewChurch3a.jpg); background-repeat: no-repeat;}

    </style>
    <!-- END of Page specific style!-->

    I changed the div in which the picture should display. I was a bit reluctant to change any of the properties of #centerColumn as I am not sure how that will affect the layout of the other pages using the same style sheet. I was also unsure as to whether overflow: hidden would cause other problems with the alignment of the contents as the window shrinks. Would overflow: hidden change the contents display so that the items will shrink unevenly?

    Thank you for your quick reply,

    Volunteer

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by Volunteer
    Would overflow: hidden change the contents display so that the items will shrink unevenly?
    Without a height set, the overflow property wll cause the container to surround the floats whilst it works out whether any overflow actually does need to be hidden. It shouldn't cause any problems.

  5. #5
    Join Date
    Mar 2008
    Posts
    3

    resolved

    Centauri,

    Thank you so much. I have taken your advice and it seems to work fairly well.

    Problem Resolved!

    Volunteer

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles