Focal Point
[SOLVED] Images in CSS file attached to HTML document don't show up

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/5277064176

June 30, 2014, 03:49 PM
J.Hines
[SOLVED] Images in CSS file attached to HTML document don't show up
Using WebFOCUS 8.
This situation is pretty simplistic, so I'm figuring my problem is once again just figuring out the right URL syntax to use.

In several of my content folders, I have HTML pages built in the GUI, and I attach a CSS file in a common content folder called "assets" as I want to use the same CSS file for each. In that CSS file I am referencing a background image in the same "assets" folder, like so:

Content
|__ Assets
| |__ mystyles.css
| |__ image.jpg
|
|__ Sales
| |__ myHtmlPage

The problem is that while other styles in the CSS file are being applied (so I know I am getting to the stylesheet), the images won't show up and I can't figure out the URL to use. Since the images and CSS file are in the same folder, the way the rest of the web does it is that I can just reference the image by name, e.g.
 background: url("myimage.jpg"); 

but this doesn't work, and neither does
 background: url("/WFC/Repository/assets/myimage.jpg"); 

or
 background: url("IBFS:/WFC/Repository/assets/myimage.jpg"); 


I'm out of ideas, but this should be so simple as to not even be an issue. It's things like this that take tons of time to find a solution for, and should just conform to web standards. Does anyone have an idea of what I need to do?

This message has been edited. Last edited by: J.Hines,



Prod: 8.2.0.4 OS:Windows 10 Output:AHTML, Excel 2007+

The life of a designer is a life of fight against the ugliness.
July 01, 2014, 07:58 AM
Patlechat
hello,

you need to place the image under the APP directory in order to place the image Under Web Server alias ( approot )
Content is not Under Web Server control ( and CSS content refered to web service content )

css content :
  
body {
    background-image: url("/approot/baseapp/blue-bike-logo.jpg");
}



Rgds,


8207, Windows 2016 64b, HTML, AHTML, PDF, EXL07...
July 01, 2014, 10:25 AM
J.Hines
What do you know, that works. Thank you.

But how perfectly unintuitive. Overall 8 is a huge improvement, but it's things like this that drive me crazy.

Within each HTML page, I can set the background image to the one in the assets folder, and it shows up fine. It's only when trying to reference that image from the CSS file that it fails.

Also, in some forms where I did try to set the background image individually, now no matter what I do I can't remove it. I go to the property, or right-click and choose Style... and delete the reference to the image, but when I click on another part of the page and back, it's replaced! WTH!?



Prod: 8.2.0.4 OS:Windows 10 Output:AHTML, Excel 2007+

The life of a designer is a life of fight against the ugliness.
July 01, 2014, 12:52 PM
David Briars
quote:
What do you know, that works. Thank you.
But how perfectly unintuitive.
This topic used to confuse me too. :-)

Your CSS background-image property is shipped down to the browser, along with the other CSS.

The browser then does a GET method to retrieve the .jpg. The browser would only be able to get a file that is available via a URL. In this case you are using a relative path.

In Internet Explorer, press F12 to get dev tools, then turn on the ability to see network traffic, and you will see the GET.




Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster