Printing button background image

[Jacob_B]

New to HTML and CSS. The buttons in the link (http://codepen.io/Jacob_B/pen/bsvCu) use an image that is colored and placed as background of my button. However, the background image and color goes away when I print from a browser (IE, Chrome). I thought it might just be a user setting so I checked the “Use images and background” box and still no fix. How can I make it so that the buttons will be pretty and colorful when printed?

Also the last button is acting screwy and the box isn’t extending with the text. Not sure what’s going on.

Any help with either problem will be greatly appreciated!

[Paulie_D]

There must be an error in your ‘red’ CSS for the last ‘red’ button as you can change the class to ‘yellow’ and it works fine.

EDIT: There it is…

height: 36px;

[Paulie_D]

>How can I make it so that the buttons will be pretty and colorful when printed?

Why would you want them to print…shouldn’t you be printing the actual links anyway? A picture of a button is no use to anyone.

[Jacob_B]

Thank you for the help Paulie. I don’t know why I had the height set on the red button. To clarify what I want to do with this, I want to treat them as warning boxes where the text will change based on the warning and the color changes based on the severity of the warning. So if someone wants to print the warning out, I want them to print out the color of the background as well.

[Paulie_D]

Hmmm…I’ve been looking around and, as far as I can tell the gradient won’t print.

What I would suggest is using a solid color in your print css.

[Jacob_B]

Yeah that’s what I noticed is IE wouldn’t work with gradients. Chrome will print the gray image when I enable background and images. I’ll mess with it and if I come up with something I’ll post it. Thank you!

[Jacob_B]

I can get it to print out exactly how it looks in IE9 with background and images checked. Is there a way to change the users’ settings when they go to the page or should I just give them a caveat of “make sure you enable printing backgrounds and images” ?

[Paulie_D]

>Is there a way to change the users’ settings

Jeez…I hope not. Sounds like a major security issue.

[Jacob_B]

Haha yeah that’s what I thought. No harm in asking. In the end it’s up to the user. Thanks.

[Author]

Posts