Grow your CSS skills. Land your dream job.

image print css

  • # December 2, 2012 at 1:13 pm

    Hi everyone.
    I was just wondering if it is possible to change image sizes for print css ?

    Thanks

    # December 2, 2012 at 8:20 pm

    This should work.

    image for printing would be set as background image with display none, no repeat and hidden. In your style sheet for printing you would reverse it. Hide page image and show printed image.

    Hope it makes sence

    # December 2, 2012 at 8:26 pm


    # December 3, 2012 at 3:59 am

    @media print { img { … } }

    You may want to have a look at the bottom of this stylesheet: http://github.com/h5bp/html5-boilerplate/blob/master/css/main.css.

    # December 3, 2012 at 4:43 pm

    Thanks for the reply. I should try and explain it better.
    I have done a few basic websites over the years but have never done any styling for print css.

    I did this website for a freind of a friend and they need the print to look the same as it is online really. Should this be easy ??

    [Link](http://www.mallardsoftavistock.co.uk/ “link”)

    # December 4, 2012 at 7:19 am

    A quick trick is to take a copy of your style.css and rename it to something screenprint.css and use that instead of print.css.

    Then try a print preview. If it close to what you want then you can just add/remove from that what you need to get the same final result.

    It’s not perfect but it’s a good jumping off point however, you will have to remember that most browsers will not print background colors & (I think) images by default so you may have to figure out a way of overriding that.

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

You must be logged in to reply to this topic.

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