Background image problems

• 

  ifiwereartemis · Member · Aug 22, 2013 at 10:36 pm

  • Copy link
  • Add topic to favorites

  Hey WordPress!

  I’ve never had this problem before, but suddenly my background image looks like a white background color is blocking half of it. My left aligned background image image serves as my “header” and the fact that you cannot read it anymore really irks me.

  I’ve uploaded, cleared, and re-uploaded the image several times.
  I don’t know how to do CSS or any of that jazz, so I have exhausted my options.

  Please help!

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

• 

  kraftbj · Staff · Aug 23, 2013 at 8:16 pm

  • Copy link

  Yikes. We can fix this up with just a little CSS that I can walk you through.

  A quick explanation of what’s going on. Your custom background is the “most behind” piece on your site and the “container”, which is the element holding the posts and other content on the site, is set to have first, the cool gradient at the top of the site, then a white background once the gradient ends. We just need to tell it a new rule to use instead of white.

  So, if you could go to Appearance->Customize->CSS in your dashboard. You’ll see a bit on intro text. You can leave that and just add this under it:

  #container {
  background-color: transparent;
  }

  You may or may not want to add:

  .entry-meta {
  background-color: #fff;
  }

  after that since on smaller screens, the background image may conflict a little with the entry meta (the date, “Leave a Comment”, Uncategorized” on the left of the post content) since, without the .entry-meta rula above, there is no background to that area, if that makes sense.

  Please let me know if you have any questions or anything else we can help you do for ya! Have a great weekend.

• 

  ifiwereartemis · Member · Aug 23, 2013 at 9:01 pm

  • Copy link

  You are amazing!
  I greatly appreciate your help and timely reply.

  Yes, the background used to get in the way of some letters but now it does not! Thanks to you.

  Is it possible to get rid of the gradient at the top? Your css worked perfectly for the background image, but I don’t love that wonky gradient.

  I am so happy!

• 

  kraftbj · Staff · Aug 23, 2013 at 9:14 pm

  • Copy link

  Oh yeah, we can drop the gradient too.

  The line that you added that said:

  #container {
  background-color: transparent;
  }

  add to it so it looks like this:

  #container {
  background-color: transparent;
  background-image: none;
  }

  If you’re in a learning CSS mood, you can enable the Safari developer tools, which you can start seeing how the CSS impacts your site and go from there: https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html

  Just in case you’re feeling like checking that out!

  Cheers!

• 

  ifiwereartemis · Member · Aug 23, 2013 at 9:17 pm

  • Copy link

  I am in a learning mood! That is one of my goals for this fall.

  Thank you so much again for all your help!
  Much appreciated.