Grow your CSS skills. Land your dream job.

Printing button background image

  • # May 16, 2013 at 11:52 am

    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!

    # May 16, 2013 at 12:08 pm

    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;

    # May 16, 2013 at 12:17 pm

    >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.

    # May 20, 2013 at 2:24 pm

    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.

    # May 21, 2013 at 6:30 am

    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.

    # May 21, 2013 at 9:03 am

    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!

    # May 21, 2013 at 10:55 am

    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” ?

    # May 21, 2013 at 11:02 am

    >Is there a way to change the users’ settings

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

    # May 21, 2013 at 11:12 am

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".