SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Can't Get Background Image to Appear Again

    Hello everyone,

    I'm stuck again with this CSS background image thing. On my 2nd menu at Atlanta Review Groupô. It looks like it's at the bottom of the wrapping div when you view the page. It looks like a stray line, but I think it's there.

    this is the code associated with the 2nd background image:
    Code:
    #bMenu{
    	background:url(bMenuBG.gif) no-repeat scroll 50% 15px;
    	padding-left:50px;
    	position:absolute;
    	bottom:12px;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I'm not sure what you are asking here.

    You are starting the image 15px down and all that can show in the available height is the top of it. If you increase the height of the element the whole background will show.

    Code:
    #bMenu {
      height: 150px;/* for example*/
    }

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, it's appearing now, but I don't know how to center it. I tried to put width:auto; for bMenu. What attributes are represented when you put
    Code:
    background:url(bMenuBG.gif) no-repeat scroll 50% 20px transparent;

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Could you update the link you provided so we can see what's happening now?

    If you use left padding, the background will appear all the way to the left. If, instead, you use left margin, the bg wont appear in the margin area. That may help.

  5. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's been updated.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I've fiddled with the styles a bit. Don't know if this will help. Keep a record of your previous styles before trying these:

    Code:
    #bMenu li {
      float: left;
      list-style: none outside none;
      margin-right: 1em;
      position: relative;
      top: 40px;
    }
    
    #bMenu {
      background: url("bMenuBG.gif") no-repeat scroll 50% 20px transparent;
      height: 90px;
      margin: 0 auto;
      padding-left: 26px;
      width: 534px;
    }

  7. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, I don't think that worked.

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well I was able to get the whole image to show with the following:
    Code:
    #bMenu{
    	background:url(bMenuBG.gif) no-repeat scroll 50% 0px transparent;
    	padding-left:50px;
    	width:560px;
    	margin:0 auto;
    	height:120px;
    	position:absolute;
    	bottom:12px;
    }
    I've lost the spacing between the main list items, though. I'll update the files in just a minute.


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
  •