• 0
Sign in to follow this  
Followers 0

How To Add A Flush Background Image on Sidebar?

Question

Posted · Report post

Aloha, So I have another question. :-) I am wanting to insert an image background on my top sidebar here: http://www.joshuabenavides.com/endorsements'>http://www.joshuabenavides.com/endorsements I want to add an image that is the same color as the 'red/orange' section of my feature slider image here: http://www.joshuabenavides.com THE GOAL: I want to insert the red/orange background and then overlay my optin form. So, even though I don't know much about these things, I think I'll have to do some kind of

thingy ?? :-) Thank you for your speedy support. *Joshua

Share this post


Link to post
Share on other sites

13 answers to this question

  • 0

Posted · Report post

I am using iblogpro4 (FYI)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, It appears that the sidebar with "Feeling Stuck?" in it already has a background image set in CSS. Just copy the CSS and change the URL to the full path of the image you wish to display. Here's the existing CSS: [code]#sidebar .winner { background: url("../images/post-bg-short.png") repeat-x scroll left bottom transparent; padding: 10px; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rangelone, So yes, there is already an image there. However, it's all white so it does not conflict with the sidebar lines. I would like to insert a COLOR background image into the sidebar that is flush to the sidebar: top bottom left and right. Will this code do it? I haven't tried it yet because Im working on the image as we speak. And what is the default width? 225px?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

CLARIFYING: By 'all white' I mean, the letters have a transparent background.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Oh...and it's not CSS. (I don't think so) It's a TEXT widget with HTML in it. I want to make sure that I am able to also overlay an optin form (just to be clear). Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

UPDATE: I tried the code up top but it actually added the background image to ALL of my sidebar widgets. So, just to clarify: I would like to add a solid background ONLY on the top sidebar. Is this possible? Thank you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Anybody there? :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

[quote]I would like to insert a COLOR background image into the sidebar that is flush to the sidebar: top bottom left and right.[/quote] I'm sorry. I'm having a hard time understanding what exactly you what you're looking for. Would it be possible for you to post the image you're creating so that I can get a better idea?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sure. Here is the image I would like on the TOP RIGHT WIDGET/SIDEBAR on the pages mentioned above where I will overlay an optin form: [img]http://www.joshuabenavides.com/wp-content/uploads/2012/05/JBSideBarOptin.png[/img] The optin form would go on the bottom of it (overlaying it). So, if you see my page as it is now: http://www.joshuabenavides.com/blog You'll see where it says "Are You Stuck" and than below it there is an Aweber optin form. I will get rid of everything else except that optin form on the bottom. My goal is to insert a background image in a text/html widget and create the right padding for my optin form to show up at the bottom but over the image. So I may need to insert some spacing CSS as well for the code?? Not sure. But I'm hoping that this is giving you a better idea of what I'm trying to accomplish here. Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Any ideas? I've been searching for answers and have found people saying things like: - You need to find the widget id and do something like this in the css style sheet: #widget id{ background: #fff url(IMAGE URL) no-repeat; } (haven't tried this yet, wanted to see what you thought) - You need to create a table like this: class="textwidget">
(tried it but it's not working too well as it's going OUTSIDE the widget/sidebar space...where as I want it all inside and "flush". Any ideas?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Any takers on this one? :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, If I understand you correctly, you wish to have no background surrounding your image. If so, add the code below to your custom CSS. [code]#text-16 {margin-bottom: 0;padding: 0;border: 0;background: transparent;} #text-16 .winner {padding: 0;background: none;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny! That is SOOOO Close! Closest yet. For some reason it's not filling the bottom...any suggestion? (Thank you so much!)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0