Need help? Check out our Support site, then


backgroundimage

  1. Is there a way of doing one big backgroundimage, i have at the moment little ones repeating. I did this because there is less download time when the image comes in, do you have the css code to get just one big one that is easy to download, this is the code I have now

    #footer {
    background:#eee url('http://honsinger.files.wordpress.com/2008/11/painting-with-effects1.jpg') repeat top;
    border:none;
    }

    thanks,

  2. If you just want one image, you need to take out the word repeat. To make it quicker to download, it would be worth saving the image file in a gif format rather than jpg.

  3. hi, I tried it but I don't think that was the css that made the background image, here is the other one that I think is the right css, i changed the image to gif, but there is no repeat at the end so nothing to take off, here it is: If you know how to make one image,
    thanks for the help

    body {
    font-size:85%;
    font-family:Helvetica;
    color:#333;
    text-align:center;
    background:url('http://honsinger.files.wordpress.com/2009/01/painting-with-effects21.gif');
    background-color:#8B008B;
    background-image:url('http://honsinger.files.wordpress.com/2009/01/painting-with-effects21.gif');
    }

  4. body {
    font-size:85%;
    font-family:Helvetica;
    color:#333;
    text-align:center;
    background:url('http://honsinger.files.wordpress.com/2009/01/painting-with-effects21.gif');
    background-color:#8B008B;
    background-image:url('http://honsinger.files.wordpress.com/2009/01/painting-with-effects21.gif');
    }

    You don't need to have the image in there twice. Delete the line that says 'background:url...'

    Then change that last line to:

    background-image:url('http://honsinger.files.wordpress.com/2009/01/painting-with-effects21.gif') no-repeat;

  5. hi, I don't know exactly what you mean but I put the last thing there and nothing happend it didn't change,
    this is what it is now:

    body {
    font-size:85%;
    font-family:Helvetica;
    color:#333;
    text-align:center;
    background-color:#8B008B;
    background-image:url('http://honsinger.files.wordpress.com/2009/01/painting-with-effects21.gif');
    }

    maybe some one knows,
    thanks,

  6. Long code is not good for CSS... Look:

    #footer {
    background:#ccc url('http://honsinger.files.wordpress.com/2008/11/painting-with-effects1.jpg') repeat top center;
    font: 14px 'arial', tahoma', verdana;
    color: #fff;
    text-align: left;
    }

  7. Ops, code wrong, correct:

    #footer {
    background:#ccc url('http://honsinger.files.wordpress.com/2008/11/painting-with-effects1.jpg') repeat top center;
    font: 14px 'arial', tahoma, verdana;
    color: #fff;
    text-align: left;
    }

  8. Do I use this if I want one background image and not repeating background images but it still needs less download

  9. This line:

    background-image:url('http://honsinger.files.wordpress.com/2009/01/painting-with-effects21.gif');

    needs to be:

    background-image:url('http://honsinger.files.wordpress.com/2009/01/painting-with-effects21.gif') no-repeat;

    I don't know any way to say that more clearly.

  10. In CSS no put background-position:top; Put background-position:top center or top left or top right ;)

  11. maybe it is easier if i give my hole style sheet,because there are a lot of things to do with the backround with the side bars and so on.thanks

  12. Maybe you need to work on this a bit more yourself. You are asking about a relatively simple CSS operation and yet you don't seem to be able to apply the answers you have been given. Try the tutorials linked at the top of the CSS forum. Also try using the Firebug or Aardvark plugins for Firefox which will help you to identify CSS elements.

Topic Closed

This topic has been closed to new replies.

About this Topic