white lines when adding colors to backgrounds

• 

  jasonrabineau · Member · Jul 28, 2009 at 12:50 am

  • Copy link
  • Add topic to favorites

  anyone have a guess as to what is causing the white lines?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jul 28, 2009 at 1:18 am

  • Copy link

  To get rid of the top white line you need to make two changes.

  In #pic change border-bottom to none ( border-bottom:none; )

  In #nav change border-top to none ( border-bottom:none; )

  The vertical white line I cannot find for for the anything. I’ll keep looking though.

• 

  jasonrabineau · Member · Jul 28, 2009 at 1:30 am

  • Copy link

  great, changes in #pic and #nav worked except for a white spec below “home”. what’s that?

  and thank you for continuing to check into the vertical line…

• 

  thesacredpath · Member · Jul 28, 2009 at 1:42 am

  • Copy link

  On the vertical line, I think it is in your background image. There appears to be a white area at the right hand side when I open it in Photoshop.

• 

  thesacredpath · Member · Jul 28, 2009 at 1:51 am

  • Copy link

  I see that white tick in Safari but not in FF and I’m not sure where it is coming from.

• 

  jasonrabineau · Member · Jul 28, 2009 at 1:54 am

  • Copy link

  thanks a lot, will check the background image file.

• 

  thesacredpath · Member · Jul 28, 2009 at 2:09 am

  • Copy link

  This will work better for the background. First off, download this image from my blog which is 100px wide x 1436px tall. Upload it to your media library and then under body make the following change (it shows the URL of the image I uploaded right now). Notice I changed from background-image to background

  body {
  background:transparent url(‘http://flippintestblog.wordpress.com/files/2009/07/jason_wallpaper-100w.jpg’) repeat-x scroll 0 0;
  }

  Since I cut out the issue with the white strip and did the repeat-x it makes the background seamless.

• 

  thesacredpath · Member · Jul 28, 2009 at 2:10 am

  • Copy link

  Forgot the backticks.

  body {
  background:transparent url('http://flippintestblog.wordpress.com/files/2009/07/jason_wallpaper-100w.jpg') repeat-x scroll 0 0;
  }

• 

  jasonrabineau · Member · Jul 28, 2009 at 2:13 am

  • Copy link

  thanks a lot.

  another question – you can see i’m trying to line up the color scheme of the background with that of the banner. it lines up perfectly in FF, but not in Safari. anything we can do about that? or do i give it up?

• 

  thesacredpath · Member · Jul 28, 2009 at 2:16 am

  • Copy link

  You will either have to modify the header image or the background image so that the top color block is the same height on both.

  BTW, I’m seeing the misalignment in Safari 4.0.2 and in Firefox 3.5.1 (both on Mac).

• 

  thesacredpath · Member · Jul 28, 2009 at 2:42 am

  • Copy link

  On the image misallignment, this is a fix that works with the existing images, but it is sort of a “hack.” Change the padding-top from 28px to 48px as below.

  body {
  padding-top:48px !important;
  }

• 

  jasonrabineau · Member · Jul 28, 2009 at 2:44 am

  • Copy link

  i’ve been noticing that the margin at the top adjusts the background image. i’ve noticed some postings in the forum on that that i’ll look at more closely.

  appreciate your help on the white lines.

• 

  thesacredpath · Member · Jul 28, 2009 at 2:53 am

  • Copy link

  You’re welcome. The above “hack” will get things aligned for you for now if you want to use it. It moves the image and content area down and since the top section of the background and top section of the header image are the same color, it doesn’t show that the the gap at the top. It works, it just isn’t the preferred method.

• 

  jasonrabineau · Member · Jul 28, 2009 at 3:17 am

  • Copy link

  if it works, it works. and that worked! at least on my versions of FF and safari.