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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to get a background to fit any screen size

    I recently registered with tumblr and I'm trying to get a custom made background image to fit neatly with the columns on any screen size. It currently looks just fine on my 1920x1200 resolution, but it's all wrong on my tiny laptop!

    The image is here: http://img20.imageshack.us/img20/9383/hsbgsml.png
    And my tumblr is: causticthespian.tumblr.com

    How do I code it so that the columns and the image will line up nicely on all computers?

    Thank you!

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    One option is to split up your image to suit the background for each column. Then for each column, instead of setting a background image, which will not resize according to browser window size, use an <img> with width = 100% in each column as the background. You will then need to use css postioning to make the <img> the background layer in the column. Then the <img> will automatically resize to 100% of whatever the column width is at any particular time.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That sounds like it would work really nicely, though I don't really know how to approach coding it! Could you give me an idea of how I'd set up each column individually like that? I'm still sort of new to this. :]

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    A quick and simple demo - works in my IE8 and FF3.5.18

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 80%;
                    margin: 0px auto 0px auto;
                    padding: 0px 0px 0px 0px;
                }
                #col1, #col2, #col3 {
                    position: relative; 
                    width: 33%;
                    float: left;
                }
                .bgImg {
                    width: 100%;
                }
                .colContent {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                }
            </style>
        </head>
        <body>
            <div id="wrapper">
                <div id="col1">
                    <img class="bgImg" src="pic1.jpg" />
                    <div class="colContent">Column 1 content goes here</div>
                </div>
                <div id="col2">
                    <img class="bgImg" src="pic2.jpg" />
                    <div class="colContent">Column 2 content goes here</div>
                </div>
                <div id="col3">
                    <img class="bgImg" src="pic3.jpg" />
                    <div class="colContent">Column 3 content goes here</div>
                </div>
            </div>
        </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't seem to get this to work on tumblr. Whenever I add this into the coding, everything goes entirely out of whack. Would it help if I posted the tumblr coding here? 'cause I think I'm putting it in the wrong place, or maybe there's another way to do it.

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    In your css for the site put background-size:100%; for the class where your background is in. Then in your head section put:

    Code:
     
    <!--[if lt IE 9]>
        <body><div class="IEbg"><img src="" style="width:100%; height:100%; z-index:-5000" top="0" left="0" /></div></body>
        <![endif]-->
    (put your image url in the img src=""):


  •  

    Posting Permissions

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