Jump to content


Photo
- - - - -

How To Add A Flush Background Image on Sidebar?


  • Please log in to reply
17 replies to this topic

#1 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 30 May 2012 - 08:42 PM

Aloha, So I have another question. :-) I am wanting to insert an image background on my top sidebar here:

Please Login or Register to see this Hidden Content

I want to add an image that is the same color as the 'red/orange' section of my feature slider image here:

Please Login or Register to see this Hidden Content

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

#2 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 30 May 2012 - 08:43 PM

I am using iblogpro4 (FYI)

#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 May 2012 - 09:22 PM

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:

Please Login or Register to see this Hidden Content



#4 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 30 May 2012 - 09:32 PM

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?

#5 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 30 May 2012 - 09:33 PM

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

#6 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 30 May 2012 - 09:34 PM

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!

#7 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 30 May 2012 - 10:47 PM

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.

#8 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 31 May 2012 - 02:30 AM

Anybody there? :)

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 31 May 2012 - 03:11 AM

I would like to insert a COLOR background image into the sidebar that is flush to the sidebar: top bottom left and right.

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?

#10 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 31 May 2012 - 03:39 AM

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:

Posted Image

The optin form would go on the bottom of it (overlaying it). So, if you see my page as it is now:

Please Login or Register to see this Hidden Content

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!

#11 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 31 May 2012 - 04:25 AM

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?

#12 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 31 May 2012 - 06:55 AM

Any takers on this one? :)

#13 Danny

Danny

    Is Awesome!

  • Moderators
  • 17945 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 31 May 2012 - 07:42 AM

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.

Please Login or Register to see this Hidden Content



#14 jbenavides

jbenavides

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

Posted 31 May 2012 - 07:52 AM

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