WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Butch on May 04, 2010, 11:19:02 PM

Title: Image in Background
Post by: Butch on May 04, 2010, 11:19:02 PM

Hey Guys -
I have been useing WB for several years now, but I'm hitting a black wall, and can't seem to make it do what I need done this time.  I have done this before, so I'm asking for help to make it work -

I have taken a template from the add-ons page and customized it to what I want - here is the website:
http://tylucasfoundation.com/

What I need to do is put this image: http://tylucasfoundation.com/media/tlflogo.gif
in the background of the text field - I don't want it repeated, just once, in the middle of the text field.

How do I do that, and what code would I use?

Thanks
Butch

Title: Re: Image in Background
Post by: maverik on May 05, 2010, 12:50:07 AM

maybe something like this in your css file

Code: [Select]

input, textarea {
background:url("/media/tlflogo.gif") no-repeat scroll 0 0 transparent;

}

Title: Re: Image in Background
Post by: Butch on May 05, 2010, 03:21:51 AM

Well I tried that and while it does put the image on the page, it does so in the top left hand side, behind the header, and it also messes up the rest of the page.... the text area changes to black, etc.

I really doubt there will be any more pages added, so I could just add it to each page if there is a way to do that??

Title: Re: Image in Background
Post by: Argos on May 05, 2010, 09:09:36 AM

Put this in your stylesheet:

Code: [Select]

.container {background: url("/media/tlflogo.gif") no-repeat 50% 50%;}
If it's not in the middle and center, try using other values than 50%, or use absolute values in pixels.

Title: Re: Image in Background
Post by: Butch on May 05, 2010, 02:59:37 PM

howdy -
Nope that didn't work either - I put it in there, and even changed it several times but no go.

Butch

Title: Re: Image in Background
Post by: Argos on May 05, 2010, 05:50:28 PM

No, you have 2 errors in your CSS:

Code: [Select]

div#container {backgond: url (/media/tlflogo.gif) no-repeat 50% 50%;}
should exactly be what I wrote before:

Code: [Select]

.container {background: url("/media/tlflogo.gif") no-repeat 50% 50%;}or add it to the styles already present, like so:

Code: [Select]

div#main div.container {margin-top:20px;padding-bottom:8px;background: url("/media/tlflogo.gif") no-repeat 50% 50%;}
There is no div with ID container in your index.php, so get rid of that line that you have now.

Title: Re: Image in Background
Post by: Butch on May 05, 2010, 07:48:53 PM

ah....got-ya....I'll go try it out!

Title: Re: Image in Background
Post by: Butch on May 05, 2010, 09:34:15 PM

it worked!!!!   Thanks so much for your help and time! 

Title: Re: Image in Background
Post by: Argos on May 05, 2010, 09:37:27 PM

That's what we're here for  :-D
I'm glad it turned out well, it looks good.

Title: Re: Image in Background
Post by: Butch on May 06, 2010, 03:58:41 AM

Thanks!  I've got a few minor changes to make to the header, but so far the family likes it!
I was looking for something alittle softer - maybe a light brown with the baby blue, etc....but what it all comes down to is what the client wants.

Thanks again!

Butch