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 2 of 2
  1. #1
    Junior Member
    Join Date
    Oct 2009
    Posts
    1
    Member #
    20053
    http://beta.combatarms-eu.com/V4_1.png

    Okay, so you can see here, that the featured news, news, and sidebar all share a commonly styled background. I want to be smart, and use the same images for all three, rather than the user downloading differently sized images for each section.

    I'm struggling of thinking of a clean, friendly way of doing it codewise. Does anyone have any sugestions? I'm sure someones come across something similar before and found a solution =)

    The best thought I've had is a 4 way sliding doors css, but then the images will need to ve very long vertically to cater for it.

    Everything else is coded, so it'd be great to get this done.

    Matt~

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    if i understand what you wanna do.

    make a background image as high as your biggest section. say, 800px (or whatever your big section is). Then put your background gradient there. Change the width to 1px.

    Now when you style:

    #bigDiv,#newsDiv,#featuresDiv{background: url("../images/bg.jpg") bottom left repeat x;}

    Repeat x will tile across the x axis (hence why we only made it 1px, keeps the file size down)

    Bottom left, the way i think about it, is you take the bottom left corner of your image and put it at the bottom left corner of your div. then you wallpaper up (imagine your div is a room and your wallpapering bottom up, imagine your wallpaper is a blue to black gradient, when you hit the top of the wall, the black is gonna be cut off)....not sure if you understand that but hey

    Your divs should look extremely similar.(depends how drastic your gradient is i suppose)

    trust me, it works, ive done it many times before.
    i think bottom left would be the right one to use (you might have to play around with different attribs)

    gluck


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