SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    no repeat problem

    Hi

    Can anyone explain why when I put "no repeat " after a graphic i want as a background in my css style sheet I get the error message it can not be used.
    If this is the case what do designers use instead or is there a way round this?

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try no-repeat

  3. #3
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the error message for no-repeat is not supported for IE 5, 5.5. 6, and 7.

    Can i not use it with IE? Is there anything i can use instead?

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any chance you can post your code or a link to a live page?

  5. #5
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry that should read:

    The files are: www.louandelcats.co.uk/testindex.css (line 83)

    and www.louandelcats.co.uk/2chalk2.html

  7. #7
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    line 83 is this code:
    Code:
    #outerinner{float:left; width:300px; border-color: #CCCCCC ; border-style:solid; border-width:thin;background-image:url(images/catchatstuff/innerareaback.jpg) no-repeat; padding-top:15px;}
    Which I don't see used anywhere in your html code. A few pointers:
    1. Change background-image to background instead, since it is invalid to use no-repeat with background-image (you could also put the no-repeat on a new line with background-repeat: no-repeat).
    2. Validate your code http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/

    Edit: diden't see your new post

  8. #8
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the point is I can not use "no-repeat" with Background Image. I need to use background, and then background-repeat: no-repeat. Seems a bit silly to me but im sure there is a very good reason.

    thanks for your help anyway. have a good day!

  9. #9
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can either do this:
    Code:
    background: #ffffff url(image/someimage.png) no-repeat;
    or
    Code:
    background-image: url(image/someimage.png);
    background-repeat: no-repeat;
    But not this:
    Code:
    background-image: url(image/someimage.png) no-repeat;
    Hope that clearifies it

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I think the point is I can not use "no-repeat" with Background Image
    You are confusing the shorthand "background" property with the "longhand version".

    You wouldn't expect something like this to work would you:

    margin-left:10px 20px; !!!

    margin
    is the shorthand property for specifying all margins but margin-left etc specifies only the left margin property so the above would make no sense.
    e.g.
    background-image - refers only to the image
    background-repeat - only refers to the repeating of the image.
    background-position- only refers to the position of the image
    background-color - only refers to the background color.
    background-attachment - only refers to the attachment

    But the shorthand property is called "background".

    background: - is shorthand for all the background properties.

    You can specify just one property (and any that aren't specified will return to their default values (even if previously specified)), or you can apply all the properties as shown in Frederik's post.

    e.g.
    background:red;

    This will mean that if you had previously defined a background-image then it would default to background-image:none unlike if you specify background-color:red and then only the color of the background is changed.


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
  •