How to place the logo on top-left in all screens?

@top-left { content :''; padding:80px; background-image:url('logo.png'); background-repeat: no-repeat;};

I have attached my output, If I decrease the padding size, the half of the logo will be hidden.

but expected result is smaller logo on top-left of the header. how do to that?

1. output.png‎ 16.1 kB

Hi umarfarook89,
you can try experimenting with the background-size property:

http://www.princexml.com/doc/properties/background-size/
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

If you set the padding explicitly to 80px you could try the same value for background-size:

background-size: 80px;

Does that help?

I probably need to see more of your code to offer any better advice than that

Announcement: repos for tests/utils

Hi Hallvord,

I have attached the result for the below code:

@top-left { content :''; background-image:url('logo.png'); background-repeat: no-repeat; padding:30px; background-size:30px; }

What i expect is, to place the full size image into top left corner with 32 pixel size.

1. output1.png‎ 10.6 kB

Hi, could you post some more of your code (HTML&CSS)?

Announcement: repos for tests/utils

(If you could zip a couple of files which when processed with Prince would show the problem it would be ideal!)

Announcement: repos for tests/utils

You could also try this:

    @top-left {
        content :'';
        background-image:url('logo.png');
        background-size: auto 100%;
        background-repeat: no-repeat;
    }

Announcement: repos for tests/utils

@page project {
  size: A4 portrait;
 @bottom-left {
   content: 'P0010-Tenth Project';
  }
 @top-left {
   content: '';
   background-image: url('http://d2xp9zq225gee5.cloudfront.net/img/spmtlogo.png');
   background-repeat: no-repeat;
   padding: 30px;
   background-size: 30px;
 }
 @top-right {
  content: 'Clear-Cut Fabrication Company';
 }
}

#project {
  page: project
}

<div id="project" style="page-break-before : always;page-break-after : always;"><h3 class="heading">Project
    Details</h3>

    <div style="font-size:14px"><p><span>Project Number :</span><span>P0010</span></p>

      <p><span>Project Title :</span><span>Tenth Project</span></p>

      <p><span>Customer :</span><span>Umar</span></p>

      <p><span>Project Start Date :</span><span>17 Aug 2016</span></p>

      <p><span>Project Finish Date :</span><span>17 Aug 2017</span></p>

      <p><span>Project Administrator 1 :</span><span>John Watson</span></p>

      <p><span>Project Administrator 2 :</span><span>Michael Lee</span></p>

      <p><span>Project Contributors :</span></p>

      <p class="ul_para">
      <ul>
        <li><span>John Watson</span><span>(Welding Inspector )</span></li>
      </ul>
      <ul>
        <li><span>Susan Garcia`</span><span>(Welding Inspector )</span></li>
      </ul>
      <ul>
        <li><span>Ann Chang</span><span>(Welding Coordinator,Welding Supervisor )</span></li>
      </ul>
      <ul>
        <li><span>Dileep Kumar</span><span>(Materials Controller )</span></li>
      </ul>
      </p><p><span>Users :</span>

      <p><span></span></p></p><p class="ul_para"></p>

      <p><span>Units :</span><span>Metric</span></p>

      <p>Inspection Requirements :

      <p><span>Visual Inspection:</span><span>3%</span></p>

      <p><span>Radiographic Testing:</span><span>10%</span></p>

      <p><span>Ultrasonic Testing:</span><span>5%</span></p>

      <p><span>Magnetic Particle Testing:</span><span>5%</span></p>

      <p><span>Dye Penetrant Testing:</span><span>5%</span></p>

      <p><span>Hardness Testing:</span><span>10%</span></p>

      <p><span>Destructive Testing:</span><span>10%</span></p></p><p><span>No of Repairs allowed:</span><span>1</span>
      </p>

      <p><span>Number Of Welds  :</span><span>5</span></p>

      <p><span>Number Of Drawings  :</span><span>1</span></p>

      <p><span>Number Of Welders  :</span><span>2</span></p>

      <p><span>Number Of WPS  :</span><span>2</span></p></div>
  </div>

Hi, the logo disappeared after applying the above your code (without padding)

You are quite right - when there is a @top-right rule too, the padding is required. The size of the logo is however controlled by the page's top margin (when using background-size: auto 100%), not by the padding. You have to apply padding to avoid the element collapsing horizontally - set padding to a very small value to see what is happening. As an alternative to the padding, you might try setting min-width. Maybe this code, with a suitable margin-top inside the @page project block?

 @top-left {
   content: '';
   min-width: 30px; /* or padding: if you prefer..*/
   background-image: url('http://d2xp9zq225gee5.cloudfront.net/img/spmtlogo.png');
   background-repeat: no-repeat;
   background-size: auto 100%;
 }

Announcement: repos for tests/utils