Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
Locked
0

How to remove background color behind submit button?

Community Beginner ,
Jul 24, 2012 Jul 24, 2012

Hey there...

I have customised my submit button using CSS and for some reason a grey background color is still showing up... I have used PNG files with a transparency which is how I can see the background color... I have been looking every where to figure out how to take the grey out from under the images... can some one please help...?

The images are placed using "backgroud-image" in the class "cat_button"

Link to an example is here... http://svx0.businesscatalyst.com/pages/contact

Thanks...

Sean

3.1K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jul 24, 2012 Jul 24, 2012

Not in firefox so your viewing in IE I guess?

a background if you made it as a png with transparency and you want to ensure and element is correct you do:

background:transparent url("../images/submit_Button.png") no-repeat 0 0; For example to ensure there is no overiding background colour set.

You rhought about just making the button in CSS and using CSS3 for the modern browsers with a more simplified look for IE?

Translate
LEGEND ,
Jul 24, 2012 Jul 24, 2012

Hi Sean,

The actual background image your using is the grey button:

http://svx0.businesscatalyst.com/images/submit_Button.png

http://svx0.businesscatalyst.com/images/submit_Button.png

So that is why you see a grey background.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 24, 2012 Jul 24, 2012

Hi Liam...

Thanks for the response ... but I am aware that the images I placed are grey...

I mean that their is a darker grey color under the images...!!

..the images have rounded corners with an alpha transparency and in each corner there shouldn't be any color other than the main background... body, container background...?

If you look at the image I have attached... you can see that the corners ... and even all around the button there is a darker grey which I can't find where it is coming from...?

Thanks...

Sean

submitButton_Shot.jpg

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 24, 2012 Jul 24, 2012

Not in firefox so your viewing in IE I guess?

a background if you made it as a png with transparency and you want to ensure and element is correct you do:

background:transparent url("../images/submit_Button.png") no-repeat 0 0; For example to ensure there is no overiding background colour set.

You rhought about just making the button in CSS and using CSS3 for the modern browsers with a more simplified look for IE?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 24, 2012 Jul 24, 2012
LATEST

Hi Liam...

I was viewing in both Chrome and Safari on an Apple... both with same effect..

... I replaced the CSS with the code you gave me above... and it is now working perfectly!

I did think about using pure CSS to create the button... but I'm more of a designer than a coder... went for the easy way out... so I thought...

Thanks you very much for your help...

Sean

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines