Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Stretching a Background

    **sigh**

    ok here's the deal.

    I'm on a site (a game) where they allow you to change your background image... BUT they have game info on your "profile" page about stats and other game info...

    I've figured out how to use HTML to change my background image using this code....

    [code] <style type="text/css">
    table, tr, td { background-color:transparent; border:none; border-width:0;}
    body {
    background-image:url('http://photobucketimage.com');
    background-attachment: fixed;
    background-position:center center;
    background-repeat:repeat;
    }
    }</style> </font></h4><style type="text/css">table { color:#0000FF
    !important}table,tr,td{ background: transparent !important; } a{
    color:#00000!important}</style> [code]

    But that code doesn't allow the image to stretch... then i found this code...

    [code] <style type="text/css">
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }
    img#bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    }
    </style>
    <body>
    <img src="www.imageurl.com" alt="background image" id="bg" />
    </body> [code]

    which stretches the image, but takes ALL the game info on the page, When i pull up my profile ONLY the image shows.


    if someone could tell me how to combine the 2 codes so that all the stuff comes up that would be GREAT! (hopefully i made sense.... )

    I've attached pics to help explain.....
    Attached Thumbnails Attached Thumbnails Stretching a Background-stretched-out-but-no-game-info.jpg   Stretching a Background-1st-code-repeating.jpg  

  • #2
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Did you try using
    Code:
    background-size:100% 100%;
    ?

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Where in the first code would i put that?

    I am not at all familiar with codes. I have NO idea how to put them together.

  • #4
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Try this:
    Code:
     <style type="text/css">
    table, tr, td { background-color:transparent; border:none; border-width:0;}
    body {
    background-image:url('http://photobucketimage.com');
    background-attachment: fixed;
    background-position:center center;
    background-repeat:repeat;
    background-size:100% 100%
    }
    }</style> </font></h4><style type="text/css">table { color:#0000FF
    !important}table,tr,td{ background: transparent !important; } a{
    color:#00000!important}</style>
    Not sure if that's what you're talking about >_<
    If you stretch an image that is smaller than what you want it to be, it would look terrible.

  • Users who have thanked kenshn111 for this post:

    *Destiny* (05-08-2011)

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you!!! -- Again!!

    i will try that code. If you are able to look at the screen shots attached in the above thread. You'll see the difference between the repeat, and the stretched picture. As long as i keep the size similar the "stretching" shouldn't be that bad.

    I've tried changing the size of the picture but it still repeats and looks horrible (i don't like the repeat)

  • #6
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    THAT WORKED BRILLIANTLY!!!!!!!

    Thank you SO very much!!!!!!!!

    I've also thanked you for the post!!! REALLY REALLY appreciate your help!!!

  • #7
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Oh! Glad I could help!
    You could also changing the value of your background-repeat from repeat to no-repeat.
    Code:
    background-repeat:repeat;
    to
    Code:
    background-repeat:no-repeat;


  •  

    Posting Permissions

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