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

    Question Make background image scale to fit monitor

    Hello,

    its probably easier to show you the issue.. so here is a website I'm currently working on for someone..

    http://www.hobhob.co.uk/rob/RobCoeWebsite/

    The issue is, with how the site is coded and how the background image works, it just will not look right on a smaller resolution, 1080p etc, it looks fine, but for someone viewing the website on a smaller screen/laptop the image is far too large and looks rubbish..

    the problem is I have tried multiple codes and failed at getting it to display correctly, I also have .swf versions of the background image, however that wont display correctly at all.

    As you can see the whole website is just one page long, im fine to keep the background image the same on all pages if it means that it scales to fit the resolution/browser size.

    anyone able to help out?


    here is the page code

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Rob Coe | Personal Trainer</title>
    <link href='http://fonts.googleapis.com/css?family=Orbitron:regular,900' rel='stylesheet' type='text/css'>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/clearInput.js"></script>
    <script type="text/javascript" src="js/slidePager.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>

    <!--[if IE 6]><script type="text/javascript" src="../../info.template-help.com/files/ie6_warning/ie6_script.js"></script><![endif]-->
    <!--[if lt IE 9]><script src="js/html5.js" type="text/javascript"></script><![endif]-->
    <!--[if IE]><link href="css/ie_style.css" rel="stylesheet" type="text/css" /><![endif]-->
    <style type="text/css">
    .personaltrainertext {
    font-size: 24px;
    }
    .hrc {
    font-family: 'Orbitron', arial, serif;
    }
    @import url(http://fonts.googleapis.com/css?fami...ns+Std+Light);
    @import url(http://fonts.googleapis.com/css?family=Reenie+Beanie);
    *{margin:0; padding:0; border:0;}
    html,body{width:100%; height:100%;}
    body{background:#000;}
    #bg{position:fixed; left:0; top:0; z-index:1;}
    #container{position:absolute; width:100%; height:100%; min-width:620px; z-index:2;}
    #container .content{width:540px; color:#fff; margin:40px;}
    #container .content h1{font-family:'Josefin Sans Std Light', arial, serif; font-size:48px;}
    #container .content p{font-family:'Reenie Beanie', arial, serif; font-size:24px; margin:30px 0;}
    #container .content p.alt{color:#000; background:#fff; padding:5px 10px;}
    #container .content img{border:5px solid #fff;}

    </style>

    </head>
    <body>

    <header> <a href="#" class="prev"></a> <a href="#" class="next"></a>
    <h1><a href="#page1" rel="slide" class="hrc">Rob Coe <span class="personaltrainertext">Personal Trainer</span></a></h1>
    <nav>
    <ul>
    <li><a href="#page2" rel="slide">About</a>\</li>
    <li><a href="#page3" rel="slide">Services</a>\</li>
    <li><a href="#page4" rel="slide">Rates</a>\</li>
    <li><a href="#page5" rel="slide">Contact Me</a></li>
    </ul>
    </nav>
    </header>
    <footer>
    <pre class="privacy nocolor und">Rob Coe &copy; 2011 - Site designed by <a href="http://www.hobhob.co.uk">Hobhob</a><span class="footer-lnk"><!-- {%FOOTER_LINK} --></span></pre>
    </footer>

    <div class="pages">
    <div id="page1" class="page"></div>
    <div id="page2" class="page">
    <div class="content">
    <h2>About</h2>
    <p class="yellow">sit amet consectetuer Aadipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.<br>
    orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore set dolor magna. Ipsum dolor sit amet consectetuer </p>
    <p>sit amet consectetuer Aadipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore set dolor magna. Ipsum dolor sit amet consectetuer Aadipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.sit amet consectetuer Aadipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore set dolor magna. Ipsum dolor sit amet consectetuer Aadipiscing elit, sed diam.</p>
    </div>
    </div>
    <div id="page3" class="page">
    <div class="content">
    <h2>Services</h2>
    <p><span class="yellow">sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. orem ipsum dolor sit amet, consecte.</span><br>
    nsectetuer Aadipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore set dolor magna. Ipsum dolor sit amet consectetuer Aadipiscing elit, sed diam nonummy nibh euismod.</p>
    <dl class="img-box pr">
    <dt><img src="images/page2-img1.jpg" alt=""></dt>
    <dd>
    <p><span class="yellow">Service 1</span><br>
    nsectetuer Aadipiscingtere, sed diam nonummy nibhiser euismod tincidunt utser at laoreet dolores.<strong></strong></p>
    <a href="#" class="button">More></a> </dd>
    </dl>
    <dl class="img-box">
    <dt><img src="images/page2-img2.jpg" alt=""></dt>
    <dd>
    <p><span class="yellow">Service 2</span><br>
    nsectetuer Aadipiscingtere, sed diam nonummy nibhiser euismod tincidunt utser at laoreet dolores.<strong></strong></p>
    <a href="#" class="button">More></a> </dd>
    </dl>
    </div>
    </div>
    <div id="page4" class="page">
    <div class="content">
    <section class="col-1">
    <h2>Rates</h2>
    <p class="yellow">nummy nibh euismod tincidunt ut laoreet dolore magna. orem ipsum dolor sit amet, consecterese sre name tporta gaslelu miosli poayt qiq nmsetsre sreen anetsrelore lorem porta.</p>
    <p>nsectetuer Aadipiscing elit, sed diam nonummy nibh euismod tinci dunte ut laoreet dolore magna. Lorem ipsum dolor sit amet, con sectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreetere dolore set dolor magna. Ipsum dolor sit amet con sectetuer Aadipire scing elit, sed diam nonummy nibh euismod. nsect etuer Aadipiscing elit, sed diam nonummy nibh euismod tincidunt .</p>
    </section>
    <section class="col-2">
    <h2>Session Rates</h2>
    <img src="images/page3-img1.jpg" alt="" class="p2">
    <ul class="list">
    <li><a href="#">£100 - something here</a></li>
    <li><a href="#">£60 - something here</a></li>
    <li><a href="#">£40 - something here</a></li>
    <li><a href="#">Bespoke Quite - something here</a></li>
    </ul>
    </section>
    </div>
    </div>
    <div id="page5" class="page">
    <div class="content">
    <section class="col-1">
    <h2>Address</h2>
    <img src="images/page5-img1.jpg" alt="" class="p2">
    <dl class="address">
    <dt class="yellow p2">22 Kingsway,<br>
    Hove, BN2 4HD</dt>
    <dd><span>Telephone:</span> +44 7542 455 512</dd>

    <dd><span>E-mail: <a href="#">contact@robcoe.com</a></span></dd>
    </dl>
    </section>
    <section class="col-2">
    <h2>Contact form</h2>
    <p class="yellow">Just pop in your information below and I will be in contact as soon as possible.</p>
    <p>All information will be treated in a confidential manner..</p>
    <form action="" id="form1">
    <fieldset class="left">
    <label>Enter Your Name:
    <input type="text">
    </label>
    <label>Enter Your E-mail:
    <input type="email">
    </label>
    </fieldset>
    <fieldset class="right">
    <label>Enter Your Message:
    <textarea></textarea>
    </label>
    <span class="btns"> <a href="#" class="button" rel="reset">Clear ></a> <a href="#" class="button" rel="submit">Submit ></a> </span>
    </fieldset>
    </form>
    </section>
    </div>
    </div>

    </div>
    <script type="text/javascript">
    clearInput('form1');
    $(function(){
    $('.pages').slidePager({
    easing:'easeInOutExpo',
    pagernav:'header nav ul li',
    change:function(n){
    if(n!=0){
    $('header h1,header nav').animate({top:'18%'},'slow','easeOutQuint')
    }else{
    if(n==0)$('header h1,header nav').animate({top:'50%'},'slow','easeInSine')
    }
    }
    })
    })
    swfobject.registerObject("FlashID");
    </script>

    </div>
    <!-- flash background -->
    <div id="bg">
    <script type="text/javascript">
    var flashvars = {
    myFile: "images/body-bg1.jpg", //set the file URL that flash will load
    myFileType: "image", //set filetype (values: image, flash)
    loadEffect: "Fade" //set load effect - options: "Fade", "Wipe", "Iris", "PixelDissolve", "Photo"
    };
    var params = {
    id: "bg",
    name: "bg",
    wmode: "transparent",
    menu: "false"
    };
    var attributes = {
    id: "bg",
    name: "bg",
    wmode: "transparent",
    menu: "false"
    };

    swfobject.embedSWF("images/SiteBG_1.swf", "bg", "100%", "100%", "10.0.45.2","expressInstall.swf", flashvars, params, attributes);
    </script>
    </div>
    </body>
    </html>
    and here is the css code

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, output, section, summary{
    display:block;
    }
    meter,progress,mark, time{
    display:inline;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    html, body {
    height:100%;
    }
    html {
    min-width:980px;
    }
    body {
    background:#000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:100%;
    line-height:1em;
    color:#000;
    position:relative;
    }
    img {
    border:0;
    vertical-align:top;
    text-align:left;
    }
    object {
    vertical-align:top;
    outline:none;
    }
    ul, ol {
    list-style:none;
    }
    table, table td {
    padding:0;
    border:none;
    border-collapse:collapse;
    }
    .fleft {
    float:left;
    }
    .fright {
    float:right;
    }
    .clear {
    clear:both;
    }
    .col-1, .col-2, .col-3 {
    float:left;
    }
    .alignright {
    text-align:right;
    }
    .aligncenter {
    text-align:center;
    }
    .wrapper {
    width:100%;
    overflow:hidden;

    }
    .container {
    width:100%;
    }
    a.und, .und a {
    text-decoration:none;
    }
    a.und:hover, .und a:hover {
    text-decoration:underline;
    }
    .nocolor, .nocolor a{
    color:inherit;
    }
    /*----- forms parameters -----*/

    input, select, textarea {
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    vertical-align:middle;
    font-weight:normal;
    margin:0;
    }

    textarea{
    overflow:auto;
    }
    /*----- other -----*/

    .list a{
    background: url(../images/marker1.png) left center no-repeat;
    padding-left:12px;
    font:11px/21px Arial, Helvetica, sans-serif;
    }

    a.button{
    font:18px/33px Arial, Helvetica, sans-serif;
    color:#000;
    background:#2784e3;
    display:inline-block;
    text-decoration:none;
    text-transform:none;
    padding:0 10px;
    -moz-border-radius:6px;
    border-radius:6px;
    }

    a.button:hover{
    color:#fff;
    }

    .extra-wrap {
    overflow:hidden;
    }
    p {
    margin-bottom:17px;
    }
    .p1 {
    margin-bottom:9px;
    }
    .p2 {
    margin-bottom:17px;
    }
    .p3 {
    margin-bottom:26px;
    }

    .yellow{
    color:#2784e3;
    }
    /*----- txt, links, lines, titles -----*/
    a {
    color:#2784e3;
    outline:none;
    }
    a:hover {
    text-decoration:none;
    }
    /*==================boxes====================*/

    dl.address dd {
    text-align:right;
    clear:both;
    width:160px;
    }
    dl.address dd span {
    float:left;
    }
    dl.img-box,.img-box-set dl {
    overflow:hidden;
    }
    dl.img-box dt ,.img-box-set dl dt{
    float:left;
    margin-right:22px;
    }
    dl.img-box dd ,.img-box-set dl dd{
    overflow:hidden;
    }

    /*===== header =====*/
    header h1{
    position:absolute;
    top:50%;
    left:7%;
    margin-top:-110px;
    z-index:100;
    }

    header h1 a{
    font:72px Arial, Helvetica, sans-serif;
    color:#fff;
    text-decoration:none;
    }

    header nav{
    position:absolute;
    top:50%;
    margin-top:-22px;
    z-index:100;
    width:100%;
    height:90px;
    background:url(../images/nav-bg.png) repeat-x;
    }

    header nav ul{
    margin-left:7%;
    }

    header nav li{
    float:left;
    font:32px/90px Arial, Helvetica, sans-serif;
    color:#fff;
    margin-right:18px;
    }

    header nav li a{
    color:#fff;
    text-decoration:none;
    margin-right:18px;
    }

    header nav li a:hover,header nav li.active a{
    color:#2784e3;
    }
    /*===== content =====*/
    body{
    overflow:hidden;
    }

    #flash {
    background-color: #000000;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 0;
    }

    #page1{
    background: url(../images/body-bg1.jpg) no-repeat center top;
    z-index:10;
    }

    #page2{
    background: url(../images/body-bg2.jpg) no-repeat center top;
    z-index:9;
    }
    #page3{
    background: url(../images/body-bg3.jpg) no-repeat center top;
    z-index:8;
    }
    #page4{
    background: url(../images/body-bg4.jpg) no-repeat center top;
    z-index:7;
    }
    #page5{
    background: url(../images/body-bg3.jpg) no-repeat center top;
    z-index:6;
    }

    #page6{
    background: url(../images/body-bg2.jpg) no-repeat center top;
    z-index:5;
    }
    #page7{
    background: url(../images/body-bg5.jpg) no-repeat center top;
    z-index:4;
    }


    .page{
    float:left;
    width:10%;
    height:100%;
    position:relative;
    }

    .pages{
    width:1000%;
    height:100%;
    position:relative;
    }


    .prev{
    width:96px;
    height:64px;
    background:url(../images/prevnext-sprite.png) 0 0 no-repeat;
    position:absolute;
    z-index:100;
    top:50%;
    margin-top:270px;
    left:0;
    }

    .prev:hover{
    background-position:0 100%;
    }

    .next{
    width:96px;
    height:64px;
    background:url(../images/prevnext-sprite.png) 100% 0 no-repeat;
    position:absolute;
    z-index:100;
    top:50%;
    margin-top:270px;
    right:0;
    }

    .next:hover{
    background-position:100% 100%;
    }

    .content{
    width:720px;
    background:url(../images/content-bg.png);
    position:absolute;
    padding:60px;
    top:50%;
    margin-top:-128px;
    left:7%;
    -moz-border-radius:6px;
    border-radius:6px;
    font:11px/17px Arial, Helvetica, sans-serif;
    color:#fff;
    text-transform:uppercase;
    }

    .content h2{
    font:29px/1.2em Arial, Helvetica, sans-serif;
    color:#fff;
    text-transform:none;
    margin-bottom:20px;
    }
    /*===== footer =====*/
    footer .privacy{
    background:#2784e3;
    font:11px/27px Arial, Helvetica, sans-serif;
    color:#090909;
    padding:0 18px 0 9px;
    position:absolute;
    right:11%;
    bottom:4%;
    z-index:100;
    text-transform:uppercase;
    -moz-border-radius:6px;
    border-radius:6px;
    }

    footer .footer-lnk{
    display:block;
    }

    /*----- forms -----*/

    #form1 .left{
    width:179px;
    float:left;
    margin-right:40px;
    }

    #form1 .right{
    width:226px;
    float:left;
    }

    #form1 .left label{
    float:left;
    margin-bottom:14px;
    }

    #form1 .left input{
    width:173px;
    border:none;
    background:#252525;
    color:#fff;
    float:left;
    font:11px Arial, Helvetica, sans-serif;
    padding:4px 0 4px 6px;
    }

    #form1 .right textarea{
    width:220px;
    border:none;
    background:#252525;
    color:#fff;
    float:left;
    font:11px Arial, Helvetica, sans-serif;
    padding:4px 0 4px 6px;
    height:68px;
    }

    #form1 .btns{
    float:right;
    padding-top:16px;
    }

    #form1 .btns a{
    float:left;
    margin-left:17px;
    }
    .hrc {
    font-family: 'Puritan', arial, serif;
    }

    /*==========================================*/

    the code for the page is abit of a mess in places (un needed flash code mainly)
    Last edited by omgzhobbs; 03-18-2011 at 09:56 PM. Reason: added code


 

Tags for this Thread

Posting Permissions

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