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 5 of 5
  1. #1
    Junior Member
    Join Date
    Dec 2005
    Posts
    3
    Member #
    12160
    Hey everyone,
    Any ideas on how to create a header (div) with an image at each corner (forced to stay at the corners) and a background image that repeats along the x axis that would span across the browser so that no matter how wide the user opened his/her browser window, the page would stretch? I hope that makes sense, lol. I've tried but it's just a mess. I'm not new to CSS in general, but I am very new to positioning in CSS (I used to use tables for layout structure but I'm trying to kick the habit). Any help or suggestions would be very appreciated!

    Thanks,
    Miguel

  2.  

  3. #2
    Senior Member Arkette's Avatar
    Join Date
    Jan 2006
    Location
    Europe
    Posts
    102
    Member #
    12297
    Place Img1 and Img2 before the text inside div1 an then add the following to your css file.
    Code:
    #div1{
    width:100%;
    background-repeat: repeat-x;
    background-image: "myJpeg.jpg"
    }
    #img1{
    float:left;
    }
    #img2{
    float:right
    }
    I think this should do the trick.
    End of Line.

  4. #3
    Junior Member
    Join Date
    Dec 2005
    Posts
    3
    Member #
    12160
    Thanks Arkette, but it still doesn't seem to work. I've got it working by using another method but I'm sure it's not done correctly and is quite messy. Also, it still doesn't behave the way I had envisioned. I guess I'll keep experimenting while kicking myself in the @$$ for not learning positioning sooner, lol.

  5. #4
    Senior Member
    Join Date
    Feb 2005
    Location
    Canada
    Posts
    435
    Member #
    8983
    my guess is this is what u want absolute positioning:
    Code:
    .img1 {position:absolute;left:0px;top:0px;}
    .img2 {position:absolute;left:0px;top:100%;}
    .img3 {position:absolute;right;top:0px;}
    .img4 {position:absolute;right:0px;top:100%;}
    Here is the trick the image height needs to be subtracted from the total height of the div and that should be the height to replace the 100% values of top
    eg:
    if the image was 30 px and the div was 100 then the value would be 70.
    Thee Pyro Wolf

  6. #5
    Senior Member Stylise's Avatar
    Join Date
    Jul 2005
    Location
    Mount Martha, Australia
    Posts
    229
    Member #
    10679
    I just typed up a nice big tutorial on this, and went to 'preview post' and it all dissappeared, and I really couldn't be bothered doing it all again (not yet)

    So I'll post the source files/images instead that went along with the tutorial.
    Attached Images Attached Images


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 05:47 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com