image paths in CSS?

shudson310
Posts: 135
Joined: Sat Feb 26, 2005 12:09 am
Location: USA
Contact:

image paths in CSS?

Post by shudson310 » Thu Jun 21, 2018 12:14 am

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.
Scott Hudson
Content Strategist
Jeppesen
Site: jeppesen.com

Dan
Posts: 403
Joined: Mon Feb 03, 2003 10:56 am

Re: image paths in CSS?

Post by Dan » Thu Jun 21, 2018 4:54 pm

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

Post Reply