Jump to content
Sign in to follow this  
jbenavides

How To Add A Flush Background Image on Sidebar?

Recommended Posts

jbenavides    0
jbenavides

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
jbenavides    0
jbenavides
I am using iblogpro4 (FYI)

Share this post


Link to post
Share on other sites
Rob    547
Rob
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]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jbenavides    0
jbenavides
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
jbenavides    0
jbenavides
CLARIFYING: By 'all white' I mean, the letters have a transparent background.

Share this post


Link to post
Share on other sites
jbenavides    0
jbenavides
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
jbenavides    0
jbenavides
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
jbenavides    0
jbenavides
Anybody there? :)

Share this post


Link to post
Share on other sites
catrina    103
catrina
[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?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jbenavides    0
jbenavides
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
jbenavides    0
jbenavides
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
jbenavides    0
jbenavides
Any takers on this one? :)

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
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]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jbenavides    0
jbenavides
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  

×