Background Image

  • Hi all, I am trying to spread the image as a full screen background across my site, fixed with no scrolling, and full screen with no distort across all platforms and screen size, i tried to input the following code with reference from searching online, and although it did make the background appear, not the full image was shown and it repeated to make up the whole screen. This is not the result i want. I am not good in coding. Can someone pls help me?

    #ff_background {
    background: url(‘images/Trial 1.jpg’);

    /* Set rules to fill background */
    min-height: 100%;
    min-width: 100%;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /*repeat: none;*/

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
    }

Viewing 5 replies - 1 through 5 (of 5 total)

  • Remove the /* Set up positioning */ part and use this instead

    #ff_background {
background-image:url('images/Trial 1.jpg');
background-repeat:no-repeat;}
    Thread Starter skeletzee

    (@skeletzee)

    Hi t_virus, thanks for the reply, i thought no one would help me.

    I tried your method and the image did not repeat, however it is still not full screen and my image still have some at the bottom that is cut off.

    Can advise me pls?

    i guess your image is not big enough for the screen (height)
    either use a bigger resolution image or use this code **i have not tested this yet, please tell me if it works

    #ff_background {
background-image:url('images/Trial 1.jpg');
position:fixed;
top:0; left:0;
width:100%;
height:100%;
background-repeat:no-repeat;}
    Thread Starter skeletzee

    (@skeletzee)

    hi, I had tried that code, and also /* */ out the rest of my ff_background code, the image remains the same. : (

    Thread Starter skeletzee

    (@skeletzee)

    you mentioned that my image is not big enough, any advice on what my image dimension should be then?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Background Image’ is closed to new replies.