CSS and background image sizes

Discussion in 'CSS' started by sidious1990, Jun 26, 2009.

0
  1. #1
    Am I doing something wrong or does CSS not like percentages for background image sizes?

    If I set an image size with percent instead of px (or not at all) the image height gets cropped.

    For Example:

    #menu {
    background: url(images_homepagenew/menu.gif) no-repeat;
    width: 100%;
    height: 100%;
    margin: none;
    text-align: center;
    }

    OR

    #menu {
    background: url(images_homepagenew/menu.gif) no-repeat;
    margin: none;
    text-align: center;
    }

    OR

    #menu {
    background: url(images_homepagenew/menu.gif) no-repeat;
    width: 523px;
    height: 66px;
    margin: none;
    text-align: center;
    }


    The first two examples simply crop the height to about 20% of its original size.

    The third example is the only one that keeps the image at its full size.
     
    sidious1990, Jun 26, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    You set your width/height to 100% but 100% of what? It's the parent element. What is the parent set to?
     
    drhowarddrfine, Jun 26, 2009 IP
  3. sidious1990

    sidious1990 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    A container:

    #container {
    width: 845px;
    background: #333333;
    text-align: left;
    margin: auto;
    }
     
    sidious1990, Jun 26, 2009 IP
  4. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    define a height
     
    JahRasta311, Jun 26, 2009 IP
  5. sidious1990

    sidious1990 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Am I right in thinking that its a percentage of whatever its inside not of the original image?

    so in this case 50% would be 50% of 845px not 50% of the orginal size of the image?
     
    sidious1990, Jun 26, 2009 IP
  6. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    yes, that is correct.

    however, the issue when you put height: 100%; is that there is no defined height in the container, so there's nothing to base that percentage on.
     
    JahRasta311, Jun 26, 2009 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Uhm, I think people are missing the guys actual question....

    Because setting a size on an element does not change the size of a BACKGROUND image. Background images cannot be resized... which is why it gets cut off. That is the entire BASIS of sliding-background methods like sliding-doors or my "eight corners under one roof".

    The width you are declaring on #menu is NOT EVER going to change the size of menu.gif - because you are changing the size of the CONTAINER - NOT THE IMAGE.
     
    deathshadow, Jun 28, 2009 IP