Add a background image to the contact page [#1222814]

I have searched around the forum for an answer to this, but found mostly theme related topics - so I'll go out on a limb and ask here. I want to use a background image in the content area of the contact page - basically want to make the fields fit into a particualr area on the image. I know how to change the size of the inputs, but don't know how to get the image just on the contact page where I want it. Maybe a block? Hope someone can help with this...

Comments

Comment #1

komal.savla CreditAttribution: komal.savla commented 19 July 2011 at 09:19

Hi,

To give the background image only to contact form, first add the image in the images folder of your theme.
Then add the following css in your .css file. Change "bg_pop.png" to your image name and also change the width and height according to your image.

#contact-site-form {
  background: transparent url(../images/bg_pop.png) no-repeat scroll 0 0;
  width: 723px;     
  height: 511px;   
 }

Hope this helps you.
Thanks,
Komal

Comment #2

bwill CreditAttribution: bwill commented 19 July 2011 at 22:11

thanks for the reply Komal...

Are you referring to Mayo theme? Just wondering because I could not find bg_pop.png or #contact-site-form in any of the CSS files. I'm trying to use CSS Injector, but no luck yet...

Comment #3

bwill CreditAttribution: bwill commented 20 July 2011 at 21:24

If anyone is interested, I was able to solve this by using the CSS Injector module - one that I'll make use of again... I set up a new CSS rule for the contact page only with this CSS:

#block-system-main { 
background-image:url('../images/myimage.jpg');
background-repeat:no-repeat;
}

Noe sure if #block-system-main was the correct one to use, but I fiddled around with the help of Firebug. Now I just need to modify the form fields to fit inside my image, and it will be set. Note that you need to patch CSS Injector before use - check the issue section.