control image size @top-right css

Question

I am building a report using HTML and CSS. I am working on a header that repeats across pages when printed. In order to achieve this, I am using the @page properties and specifically am trying to insert an image into @top-right. See CSS below:

 @page {     
    @top-right {
        content: url('/home/resources/logo.jpg');
        border-bottom: .75px solid black;
        border-collapse: collapse;
        width:25%;
        border-spacing:0;
    }

The problem is that the image is large. If this were an <img> within the HTML, I would size it like so:

img.logo { height: 25px; width: 100px; }

However, I am not able to do this since the image is brought in via url(). Does anyone know how to control the size of the image?

For full information, I am using WeasyPrint to convert the HTML/CSS to PDF.

See https://stackoverflow.com/q/14978807/483779 It's probably still not possible today to resize content: url() image. — Stickers, Sep 18 '18 at 15:57

jstein · Answer 1 · 2018-09-24T18:29:49.623

0

You can use the "background-size" property in CSS make a background image "cover" or "contain" the dimensions of a container in different ways:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

cover - fill the space by growing proportionally and possibly getting cropped
contain - fill the space by growing proportionally without being cropped

.box { width:100px; height:100px; background-image:url('/home/resources/logo.jpg'); background-size:cover; }

Browsers may have a default setting that prevents background images from printing. In this case you can force the images to be printed by taking this advice:

How can I force browsers to print background images in CSS?

If you do not want to use this hack, then using the content attribute to override the contents of the element should do the trick. Your content box must be sized according to the proportions of the image in order to print and undistorted picture.

.box {
    width:100px;
    height:100px;
    content:url('/home/resources/logo.jpg');
}

See this JS Bin for live examples: http://jsbin.com/henogud/edit?html,css,output

edited Sep 24 '18 at 18:29

answered Sep 18 '18 at 15:59

jstein

81
3

This doesn't appear to work. I try to add the `background-image: url('/home/resources/logo.jpg');` to @top-right. but the image doesn't show up. – Kyle Sep 18 '18 at 16:23
sorry about that, i do not know how `@page` and `@top-right` work. – jstein Sep 20 '18 at 14:51
Not at all, thanks for the answer. This got me much closer. It appears I needed to set `content` and `background-color` as well, then it worked. I also ended up setting `background-repeat: no-repeat` although I don't think this made a difference. I saw it in another example and ended up using it, and it works, so I didn't change it. Feel free to update your answer and I will accept it. – Kyle Sep 21 '18 at 15:13
i did a little more research, updated my answer, and provided JS Bin examples – jstein Sep 24 '18 at 18:30

score 0 · Answer 2 · answered Sep 18 '18 at 18:45

0

You can't use <img>, but you can still use background-size. Maybe something like this:

background-size: 25px 100px; /* background-size: height width */

answered Sep 18 '18 at 18:45

Abdullah Ahmed

43
4

control image size @top-right css

2 Answers2