Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Fullscreen Random Image?

  1. #1
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Fullscreen Random Image?

    Hi,

    I want to create a fullscreen image that stretches to fill the browser window. I don't want to stretch the image proportionally, but neither do I want to ever see any background color inside the browser. The jQuery script "Supersized" does exactly what I want.

    The problem is that "Supersized" doesn't support random images, and I need a randomized image, chosen from a set of high resolution photos I have.

    I found a good old thread on here about random images, and also one on full screen. The random feature works great, but I get what looks like margins and blank space, and the window isn't resizing properly. Being a serious newbie I can't tell if the problem is in the javascript or the CSS. Serious love to anyone who can help. Here is what I have cobbled together:

    The script in the <head>

    Code:
    <script type="text/javascript">
    //<![CDATA[
    
    var images=new Array();
    images[0]="images/image1.jpg";
    images[1]="images/image2.jpg";
    images[2]="images/image3.jpg";
    images[3]="images/image4.jpg";
    
    var i=Math.floor(Math.random()*images.length);
    
    function randomImage() {
    
    var elem=document.createElement("img");
    elem.src = images[i];
    elem.title = images[i];
    elem.style.height = '100%';
    elem.style.width = 'auto';
    
    document.getElementById("column_1").appendChild(elem);
    
    }
    
    onload=randomImage;
    
    //]]>
    </script>
    The body code:

    Code:
    <div id="column_1">
    <noscript>
    <img alt="default image" src="image_1.jpg" />
    </noscript>
    </div>
    and some CSS:

    Code:
    html {
    	margin: 0;
    	padding: 0;
    	}
    	
    img {
    	border: 0px;
    	display: block;
    	padding: 0;
    	margin: 0;
    	}
    
    body {
    	overflow: hidden;
    	}
    		
    #column1 {
    	width:100&;
    	height:100%;
    	margin: auto;
    	padding: 0;
    	border: none;
    	}

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,643
    Thanks
    1
    Thanked 252 Times in 247 Posts

    Default

    Hi there B3N,

    and a warm welcome to these forums.

    The following example will work in modern browsers...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>full size background image</title>
    
    <style type="text/css">
    html,body {
        margin:0;
        padding:0;
        height:100%;
     }
    body {
        background-image:url(images/image1.jpg);
        background-size:100% 100%;
        -webkit-background-size:100% 100%;        /*  Safari  */
        -khtml-background-size:100% 100%;         /*  Konqueror  */
        -moz-background-size:100% 100%;           /*  Firefox  */
        overflow:hidden;
     }
    #container {
        height:100%;
        overflow:auto;
     }
    </style>
    
    <script type="text/javascript">
    function init(){
       var pics=[
                   'images/image1.jpg',
                   'images/image2.jpg',
                   'images/image3.jpg',
                   'images/image4.jpg' /* no comma after final array element */
                  ];
    
       document.body.style.backgroundImage=
       'url('+pics[Math.floor(Math.random()*pics.length)]+')';
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <div id="container">
    </div>
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default thanks!

    First, let me say that I wasn't completely clear. I want something that will expand images to fill the window in all cases, without distorting the x:y ratio. So any resizing should be proportional. The images are photographs, and they need to read properly, although cropping is of course okay, by necessity.

    Here are some issues with the code you gave me:

    1) In Safari, the window loads perfectly at first, and the image resizes with the viewport, but proportionality is no preserved (ie the picture gets squeezed).

    2) In Camino, the image is not resized properly at first for the viewport. Additionally, when I drag the browser window far to the right, the image repeats in a second tile. Not quite what I want.

    This seems like such a basic design task. I'm surprised there is no standard cross-browser solution yet!

    Perhaps the problem needs to be approached this way:

    1) detecting the viewport dimensions
    2) comparing the x dimensions of the image and the viewport to create a ratio.
    3) comparing the y dimensions of the image and the viewport to create a ratio.
    4) choosing the large of the two ratios
    5) applying that ratio to the image.

    any other thoughts out there?

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,643
    Thanks
    1
    Thanked 252 Times in 247 Posts

    Default

    Hi there B3N,

    does this example help...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>big picture</title>
    
    <style type="text/css">
    html,body {
        height:100%;
        padding:0;
        margin:0;
     }
    #holder {
        height:100%;
        overflow:hidden;    /* change this value to auto if preferred */
     }
    #myImage {
        display:block;
     }
    </style>
    
    <script type="text/javascript">
    
       var preloads=[];
    
    function preload(){
    for(var c=0;c<arguments.length;c++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[c];
      }
     }
    
    preload('blood.jpg','dog.jpg','banana.jpg','aaa.jpg','buddha.jpg','apple.jpg','girl.jpg','grap.jpg');
    
    function init(){
    
       var n=Math.floor(Math.random()*preloads.length);
       var s=preloads[n].src;
    
       var pic=document.createElement('img');
           pic.setAttribute('id','myImage');
           pic.setAttribute('src',s);  
           pic.setAttribute('title',s.substring(s.lastIndexOf('/')+1,s.length));
           pic.setAttribute('alt',s.substring(s.lastIndexOf('/')+1,s.length));
    
       document.getElementById('holder').appendChild(pic);
    
       resizeImage(n);
    
    window.onresize=function() {
       resizeImage(n);
      }
     }
    
    function resizeImage(n) {
    
       var r1=preloads[n].width/preloads[n].height;
       var r2=document.body.offsetWidth/document.body.offsetHeight;
       var obj=document.getElementById('myImage');
    
    if(r1>=r2){
       obj.style.height='100%';
       obj.style.width=obj.offsetHeight*r1+'px';
     }
    else {
       obj.style.width='100%';
       obj.style.height=obj.offsetWidth*(1/r1)+'px';
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    </script>
    
    </head>
    <body>
    
    <div id="holder">
    <noscript>
     <div>
      <img src="images/blood.jpg" alt="">
     </div>
    </noscript>
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 04-29-2011 at 11:10 PM.

  5. #5
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    coothead,

    thank you very much. your latest code works just perfect.
    but i have a problem, since i'm begginer web developer.

    i need to put a logo and some text ON my fullscreen background (it should be vertical centered, and horizontal left).

    can you help me out?

    thanks

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,643
    Thanks
    1
    Thanked 252 Times in 247 Posts

    Default

    Hi there raveyourmind,

    and a warm welcome to these forums.

    do you want something like this...
    Code:
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
     }
    body {
        background-image:url(blood.jpg);
        background-size:100% 100%;
        background-attachment:fixed;
     }
    #vertical {
        float:left;
        width:100%;
        height:50%;
        margin-top:-156px;
     }
    #box {
        clear:both;
        width:760px;
        height:280px;
        padding:20px 20px 10px;
        border:1px solid #300;
        margin:auto;
        background-color:rgba(204,204,255,0.7);
        box-shadow:#000 10px 10px 20px;
        overflow:auto;
     }
    #box img {
        float:left;
        border:1px solid #003;
        margin:0 20px 0 0;
        box-shadow:#000 4px 4px 8px;
     }
    #box p {
        margin:0;
        padding-bottom:10px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="vertical"></div>
    
    <div id="box">
    <img src="girl.jpg" alt="">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus.
    </p>
    </div>
    
    </body>
    </html>
    
    coothead

  7. #7
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    thanks for code, but this code is just something different. it puts my web content into a small frame, and the "lorem ipsum" comes up below my image.

    your previous code was perfect, and i think i just need to add some <div> or <p> somewhere...

    i just need some text over my background picture. something like here: http://www.kavoir.com/2009/02/css-text-over-image.html

  8. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,643
    Thanks
    1
    Thanked 252 Times in 247 Posts

    Default

    Hi there raveyourmind,

    how about like this then....
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>big picture</title>
    
    <style type="text/css">
    html,body {
        height:100%;
        padding:0;
        margin:0;
        background-color:#f0f0f0;
     }
    #holder {
        position:relative;
     }
    #myImage {
        position:fixed;
        top:0;
        display:block;
     }
    #container {
        position:relative;
        z-index:1;
        width:760px;
        padding:20px;
        border:1px solid #000;
        margin:auto;
        background-color:rgba(255,255,255,0.5);
        box-shadow:#000 10px 10px 20px,#000 -10px -10px 20px;
    }
    noscript, #noscript{background:#000;height:100%;    position:relative;top:0}
    </style>
    
    <script type="text/javascript">
    
       var preloads=[];
    
    function preload(){
    for(var c=0;c<arguments.length;c++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[c];
      }
     }
    
    preload('blood.jpg','dog.jpg','banana.jpg','aaa.jpg','buddha.jpg','apple.jpg','girl.jpg','grap.jpg');
    
    function init(){
    
       var n=Math.floor(Math.random()*preloads.length);
       var s=preloads[n].src;
    
       var pic=document.createElement('img');
           pic.setAttribute('id','myImage');
           pic.setAttribute('src',s);  
           pic.setAttribute('title',s.substring(s.lastIndexOf('/')+1,s.length));
           pic.setAttribute('alt',s.substring(s.lastIndexOf('/')+1,s.length));
    
       document.getElementById('holder').appendChild(pic);
    
       resizeImage(n);
    
    window.onresize=function() {
       resizeImage(n);
      }
     }
    
    function resizeImage(n) {
    
       var r1=preloads[n].width/preloads[n].height;
       var r2=document.body.offsetWidth/document.body.offsetHeight;
       var obj=document.getElementById('myImage');
    
    if(r1>=r2){
       obj.style.height='100%';
       obj.style.width=obj.offsetHeight*r1+'px';
     }
    else {
       obj.style.width='100%';
       obj.style.height=obj.offsetWidth*(1/r1)+'px';
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    </script>
    
    </head>
    <body>
    
    <div id="holder">
    
    <div id="container">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
    et mauris scelerisque tristique. Donec fringilla mauris dolor, 
    sit amet vulputate lacus. Nulla feugiat mattis nulla non 
    tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
    nisi eget neque tempus facilisis eu quis sapien.
    </p><p>
    Ut et metus a massa rhoncus cursus. Integer luctus luctus enim, 
    tristique rhoncus enim feugiat eu. Etiam porttitor volutpat 
    massa sed congue. Sed eros nisl, volutpat ac dapibus quis, 
    ultricies id diam. Mauris at elit eget quam ullamcorper sagittis 
    ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit. 
    Proin viverra, neque non eleifend vehicula, nulla augue gravida 
    felis, non fermentum lorem odio ac nunc. Aliquam pretium 
    scelerisque consectetur. Proin ultrices urna non magna interdum 
    a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu 
    sodales cursus. Maecenas bibendum neque vitae orci mollis ac 
    vulputate ante auctor. Sed sodales odio id ante sagittis 
    faucibus.
    </p><p>
    Curabitur gravida, neque id volutpat tincidunt, justo eros 
    interdum dui, nec mattis eros nunc a ipsum. Aenean in orci id 
    turpis luctus interdum nec ut est. Nunc lacinia sagittis nibh 
    vitae bibendum. Cras malesuada, felis vitae egestas aliquet, 
    mauris diam vehicula quam, eget scelerisque felis nulla id 
    tellus. Curabitur non laoreet dolor. Vestibulum sodales 
    hendrerit elit vitae eleifend. Praesent faucibus mauris sed erat 
    accumsan ac cursus lacus molestie. Donec a nisi a risus malesuada 
    molestie nec at odio. Maecenas eleifend tincidunt lacus nec 
    vulputate. Vestibulum eleifend pulvinar sem, sit amet auctor eros 
    pellentesque quis. Sed et nulla non eros auctor malesuada. 
    Vestibulum erat arcu, hendrerit vel cursus nec, sagittis vitae 
    sapien. Nulla facilisi. Sed nec molestie mauris. Donec non dui 
    urna.
    </p><p>
    Aenean vel velit vel metus congue ultrices non ut lorem. Sed 
    viverra quam sit amet libero vestibulum eget porta sem mattis. 
    Pellentesque tincidunt convallis justo eu iaculis. Suspendisse 
    ut dui ante, et malesuada nisi. Praesent aliquet congue nulla 
    volutpat posuere. Curabitur orci magna, egestas nec mollis nec, 
    dapibus in erat. Vestibulum cursus est mauris, non gravida elit. 
    Curabitur at diam nisi.
    </p>
    </div>
    
    </div>
    
    </body>
    </html>
    
    coothead

  9. The Following User Says Thank You to coothead For This Useful Post:

    raveyourmind (02-02-2012)

  10. #9
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    perfect. many thanks for support, coothead!

  11. #10
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,643
    Thanks
    1
    Thanked 252 Times in 247 Posts

    Default

    No problem, you're very welcome.
    coothead

Bookmarks

Posting Permissions

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