Background on div not displaying correctly

Discussion in 'CSS' started by Some Guy You Know, Sep 6, 2006.

  1. #1
    i have this:

    
    <div class="news">
    <img src="frametitle.gif" class="bar"/>
    <p class="news">Updates 6-9-06</p>
    <ul>
    	<li>
    	<p class="news">Goodbye tables, hello style sheet!</p></li>
    </ul>
    </div>
    
    Code (markup):
    thats the HTML (well duh)

    and in da style sheet:

    
    div.news
    {
    text-align: left;
    background: #FFFFFF url('newsback.gif') repeat-y;
    width: 800px;
    font: small-caps 900 12px arial;
    
    }
    Code (markup):
    So, i should have newsback plastered all of that news, right? WRONG!

    It only puts the background between the <ul> tag, meaning wheres there's a point, there a pretty picture (well not pretty, but thats besides the point).

    Rather than everywhere, oh I'm using IE



    WAIT i fixed the image, hahahaaha. But it still only puts a background where there's text, what's up with that>
     
    Some Guy You Know, Sep 6, 2006 IP
  2. edelman

    edelman Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    do you have an example link that we could look at?
     
    edelman, Sep 7, 2006 IP
  3. sofaq

    sofaq Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    you probable need to specify a height as well. then the background should stretch as far as you want it to:

    div.news
    {
    text-align: left;
    background: #FFFFFF url('newsback.gif') repeat-y;
    width: 800px;
    height:800px;
    font: small-caps 900 12px arial;
    }
     
    sofaq, Sep 8, 2006 IP
  4. edelman

    edelman Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    eww....don't ever specify height unless you know that your box is absolutely not expanding downwards
     
    edelman, Sep 8, 2006 IP
  5. wmburg

    wmburg Active Member

    Messages:
    300
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    58
    #5
    You told the background image to repeat-y. That's up and down. If you want it to go left to right then use repeat-x. If you want it to cover the ENTIRE thing use repeat.
     
    wmburg, Sep 8, 2006 IP
  6. edelman

    edelman Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    yeah good point. although if you want it to repeat all over, you don't need to say anything, as it does it by default. if you don't want it to repeat, you should put no-repeat
     
    edelman, Sep 8, 2006 IP
  7. Some Guy You Know

    Some Guy You Know Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I fixed it now, but i can't remeber what i did. I want it to repeat-y because the box does expand downwards so i cant specify a height, if i remember what i did, i'll post it
     
    Some Guy You Know, Sep 10, 2006 IP