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

    Background and Resolution compatibility, My background gets cut off

    Hi, I made a background which is about 1000x500 and was wondering how I can fit the background into all resolutions like 800x600 and 1024x768 and so on. When i tried to test my background in different resolutions, it get cut off or thrown into the wrong places. how can i fix this?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well you can't really resize a background, and using JS to detect their resolution can't be relied on because the user might have js disabled. Your best bet would be to use some css to center the background image.
    Code:
    <style type="text/css">
    body {
    margin:0;
    padding:0;
    background:#000000 url(yourimage.jpg) center no-repeat fixed;
    }
    </style>
    Add the above in between you head tags. The hex value should be a dominant color in your image.

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is a method which uses a DIV containing an image for the background. It's not really the best solution though because on large resolutions the background will end up pixelated. Take a look at this though -

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >

    <
    html>
    <
    head>

    <
    style type="text/css">

    bodyhtml#background, #background img {
    margin0;
    padding0;
    width100%;
    height100%;
    }

    #content {
    positionabsolute;
    top0;
    left0;
    font-familyVerdana;
    color#FFF;
    padding20px;
    }

    </
    style>

    </
    head>

    <
    body>

    <
    div id="background">
    <
    img src="http://debianusers.org/albums/album02/Bliss.sized.jpg" alt="">
    </
    div>

    <
    div id="content">
    <
    p>Lorem ipsum dolor sit ametconsectetuer adipiscing elitMorbi nunc maurismolestie egetcondimentum vitaeornare ultriciesmagnaCum sociis natoque penatibus et magnis dis parturient montesnascetur ridiculus musQuisque semMaecenas in sem eget arcu auctor malesuadaProin tellusPellentesque imperdiet ipsum quis eros euismod dignissimNulla at quamUt iaculis pede id risusNunc aliquamVestibulum at tellus ut odio cursus fringillaInteger egestas lacinia massaDuis velitCurabitur vel lectusVivamus posuere arcu eu orciDuis sed quamNam sagittis metus molestie erat.</p>

    <
    p>Donec orci wisiconvallis egetscelerisque aaliquam sit amettortorNam hendrerit velit vitae metusEtiam id purusDuis vitae augue sed magna dignissim porttitorSuspendisse potentiNunc non felisIn hac habitasse platea dictumstAenean sed est in leo aliquam consectetuerFusce sempertortor ac molestie suscipitorci purus malesuada duiid aliquet libero velit ac nullaDonec sollicitudin estUt vulputate magna a urnaPhasellus ut magna congue lacus ornare aliquamCurabitur porttitor scelerisque diam.</p>

    <
    p>Sed auctor ultrices ipsumAenean suscipit est eget lacusSed sit amet turpis et nulla elementum vestibulumEtiam molestieNullam laoreet consectetuer magnaMaecenas convallisAenean malesuada mauris eget orciUt rutrum ipsum ut liberoCras sodalesante a cursus elementumenim metus varius nuncnon aliquet massa odio sed lacusProin anteProin tristique ultricies odioDuis vel purus sed ipsum dictum sodalesSed erosPraesent ac nisl non mauris iaculis auctorFusce egestas lacinia nequeIn elementum quam non purusPraesent felisSed sit amet justoNulla at tortorSuspendisse potenti.</p>
    </
    div>

    </
    body>

    </
    html


  •  

    Posting Permissions

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