Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    Hi all
    I'm struggling to improve my CSS and design skills.
    I want to have a singles background image that stretches to be the size of the column-r section: so the height changes depending how many lines are on each page and what size of text the browser is set to.
    I've used the following code to get the background working on Firefox but on ie6 the background image stretches down past the content into the footer section.
    Any ideas?
    My CSS code is:
    #contentsection {
    position:relative;
    width: 584px;
    height: 100%;
    z-index:1;
    }
    .imgcontent {
    position:absolute;
    top:0px;
    left:0px;
    z-index: 0
    }
    My main html code is:
    <div id="column_r">
    <!-- #BeginEditable "right hand col" -->
    <div id="contentsection">
    <img class="imgcontent" alt="Unique Websites logo" src="web-design-bury-st-edmunds-images/web-design-showcasebk.gif" width="100%" height="100%" />
    <div id="contentsection1">

    ... content is inserted ....



    </div> </div><!-- end contentsection and contentsection1 -->
    <!-- #EndEditable --></div>
    <!-- End Right Column -->

  2.  

  3. #2
    Junior Member WebPrezentacija's Avatar
    Join Date
    Jul 2009
    Location
    Novi Sad, Serbia
    Posts
    25
    Member #
    19405
    Liked
    1 times
    jj1,

    That method I use at my web site, itís very ease.

    Html
    Code:
    <div id="column_r">put some content here</div>
    Css
    Code:
    #column_r {
          background: url(img.jpg) repeat-y top; 
                  }
    Itís cross browser compatible FF, IE, Opera, Chrome...

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    jj1,
    Don't use absolute (or relative) positioning if at all possible.
    Those are really browser compatibility headaches.


  5. #4
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    WebPrezentacija - many thanks for replying. However, I was looking to have ONE image stretch for the whole content section rather than being repeated.
    Does anyone have any ideas?

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    jj,
    Won't that make the image distorted when it shrinks or grows in one direction but not the other?


  7. #6
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    Won't that make the image distorted when it shrinks or grows in one direction but not the other?
    The "image" I am currently trying for is really a plain coloured background with a drop-shadow to the left and bottom borders - CSS Outset borders seem to give me a far harsher effect which doesn't match the rest of my site.
    For another site, I want to use a parchment-effect background with fuzzy/non-straight edges.
    Both these images could stretch no problem.

  8. #7
    Junior Member WebPrezentacija's Avatar
    Join Date
    Jul 2009
    Location
    Novi Sad, Serbia
    Posts
    25
    Member #
    19405
    Liked
    1 times
    jj1,

    I hope I managed to grasp what youíre getting at. Thatís exactly how I have designed my web site. Light coming from left top corner and opposite is drop shadow. And whole that image stretches without distortion.

    Iím in a big hurry, no time enough to put you css and html code for you. So look at source code from your browser, website is in signature. Itís mine and if you have futher questions just ask.

  9. #8
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    WebPrezentacijia - many thanks for the info. I will check it out.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:36 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com