image paths in CSS?

[shudson310]

When trying to establish the cover logo, is the path in the CSS to the image relative to the CSS, or to the document? For some reason, the images don't seem to resolve:

Code: Select all

@page :left {

  @top-left { 

    content : string(chapter_title) !important;

  }

  @top-right {     content:url('../media/images/jeppesen.logo.lt.png') !important;

  }

  

  @bottom-left { 

    content : "©" string(copyrlast) string(companyname) string(bookrights) !important;

    content : "©" string(permission) !important;

  }

  @bottom-right {

      content : string(publication_title) " | " counter(page) !important;

  }

}

The image is above the directory of the CSS file as shown, but doesn't resolve currently.

[Dan]

It is relative to the CSS.

Unfortunately, the !important modifier does not work in the page rule. We have an issue on our tracking system, it will be resolved in the next version.
I think there is a more specific selector in the p-front-page.css that clears the @top-right page margin box:

Code: Select all

 @page front-page {    	

        @top-left-corner    {          content:none }

        @top-left           {          content:none }

        @top-center         {          content:none }

        @top-right          {          content:none }

        @top-right-corner   {          content:none }

        @bottom-left-corner {          content:none }

        @bottom-left        {          content:none }

        @bottom-center      {          content:none }

        @bottom-right       {          content:none }

        @bottom-right-corner{          content:none }

    }
 

So instead of !important I would use a more specific selector:

@page front-page:left, front-page:right{
...
}

If the image still does not show, there might be problems with PNG image.
You may try to refer the image from a DITA topic using an image element to check if it is rendered.


Many regards,
Dan