backgroundimage

  • Author
    Posts
  • #321526

    honsinger
    Member

    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,

    #321693

    rosclarke
    Member

    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.

    #322538

    honsinger
    Member

    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’);
    }

    #322540

    rosclarke
    Member
    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;

    #322543

    honsinger
    Member

    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,

    #322544

    raul008
    Member

    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;
    }

    #322545

    raul008
    Member

    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;
    }

    #322547

    honsinger
    Member

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

    #322551

    rosclarke
    Member

    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.

    #322552

    raul008
    Member

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

    #322557

    honsinger
    Member

    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

    #322567

    rosclarke
    Member

    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.

The topic ‘backgroundimage’ is closed to new replies.