Use image as background in browser window

@ssneg 63797 wrote:

Yep, possible. On your title level, add an external html object, go to its Properties, set Type to "meta tags", enter the following code in it:

[/CODE]

Then add an image called backgr.jpg to your title (at title level) and set it to Initially Hidden. This way the image becomes part of the title and always gets exported with it (so you don't have to add it manually). Of course, you can call the image whatever you want, just make sure you change the [/CODE]

Hi

I Noticed that this doesn´t work anymore in v12 after publishing??? Or yes.. it works, but it doesn´t behave like background image. It gives scrollbars with a large background image. :confused:[CODE][/CODE]

Then add an image called backgr.jpg to your title (at title level) and set it to Initially Hidden. This way the image becomes part of the title and always gets exported with it (so you don't have to add it manually). Of course, you can call the image whatever you want, just make sure you change the [/CODE]

Hi

I Noticed that this doesn´t work anymore in v12 after publishing??? Or yes.. it works, but it doesn´t behave like background image. It gives scrollbars with a large background image. :confused:[CODE]

[/CODE]

Hi

I Noticed that this doesn´t work anymore in v12 after publishing??? Or yes.. it works, but it doesn´t behave like background image. It gives scrollbars with a large background image. :confused:

Yep, possible. On your title level, add an external html object, go to its Properties, set Type to "meta tags", enter the following code in it:

[/CODE]

Then add an image called backgr.jpg to your title (at title level) and set it to Initially Hidden. This way the image becomes part of the title and always gets exported with it (so you don't have to add it manually). Of course, you can call the image whatever you want, just make sure you change the [/CODE][CODE][/CODE]

Then add an image called backgr.jpg to your title (at title level) and set it to Initially Hidden. This way the image becomes part of the title and always gets exported with it (so you don't have to add it manually). Of course, you can call the image whatever you want, just make sure you change the [/CODE][CODE]

[/CODE]

@ummakumma 63804 wrote:

Hi

I Noticed that this doesn´t work anymore in v12 after publishing??? Or yes.. it works, but it doesn´t behave like background image. It gives scrollbars with a large background image. :confused:

I got it :) I needed to put a class to that image set it to to display:none;

Are you sure the image is part of your title? Seems like you haven't uploaded it.

Hi there,

Thank you for the js info above. It worked perfectly when I preview in browser and publish to html and viewed locally. But when I published to SCORM and tested it on SCORM Cloud, the background image wasn't appearing.

I also get a 404 error for that image if I view the page source in Chrome:

"Failed to load resource: the server responded with a status of 404 (Not Found)"

But it also doesn't work in IE or Firefox.

IT suggested placing a "../" or "~/" or "/" before the 'images part of the "background-image: url('images/BG_img.png');" code but none of them have worked.

Any suggestions with regards to publishing to SCORM for the background js to work?

Thanks!

Hi,

Yes I inserted the image and placed it into the title level. I can also see it in the images folder when I publish it to SCORM.

I have an example here for your reference: example

It certainly works for me (see screenshot below). Can you do the same in your LMS? (In Chrome, right click on the page, choose Inspect Element, then choose BODY tag in the HTML code displayed). Alternatively, in any browser, go to Developer Tools > JS Console and see what errors are there. It should show the alleged path to the missing image.

[IMG]https://dl.dropboxusercontent.com/u/11433463/trivantis/Capturebg.PNG[/IMG]

Hi everyone,

Thought I'd mention what the fix was for the issue I experienced when viewing the background image in SCORM Cloud. The part of the code where it specifies the image name needed to be in lower case.

so from this: images/BG_img.png

to this: images/bg_img.png

And just to be safe I renamed the actual image to all lower case.

Hello, @ssneg @amak

Thank you Darrel @Klaatu

I have tried this option and it works pretty well.

The challenge is that on Desktop screens, the background is only fixed at a 1009px x 662px resolution.

This leaves white (or and background colour) space to the left and right hand sides of the screen.

I'd like the background image to fill the entire screen/window, while still maintaining the design area of 1009px x 662px just like it appears in the attachment @amak shared above.

Thanks!

By the way, here are the sizes (Device View, Width, Height):

Phone Portrait, 480, 763

Phone Landscape, 785, 450

Tablet Portrait, 785, 1000

Tablet Landscape, 1009, 662

From page 126 of the lectoraUserGuide.pdf.

In the Design tab go to the title background section and select "image". Then just browse for your image. Meta-tags are for meta-data, not code.

Add an HTML Extension cascading style sheet to the root of the project (just under the title) with the following:

#pageDIV {

background-repeat: no-repeat;

background-size: cover;

}

Another thing you can do, in addition to the above, if you if you are building a responsive project is create background images that match the PhonePortrait, PhoneLandscape, TabletPortrait and TabletLandscape sizes and then with each of those selected click on the same image background and select the appropriate image. you can have different images for each.

Hi Darrel,

Have attempted the above and it's not working (def going to be my mistake). It does appear to shift the image location when previewing, but does not fill the browser window. Any advice?

As mentioned, want the image to fill the browser window and maintain the design area 1009 x 662.

Image was set as background image and HTML extension added as css with your code.

Thanks

Thanks Benny.

Is it possible to have the image only appear once, and expand in and out if someone was to resize their browser? Or is this only achievable setting the course as a responsive title?

In the above attached, if the browser window is maximised, the image tiles and starts again instead of expanding with the browser window.

@nwilliams3743, see attachment for an updated title.

Hello Nick,

It is possible to achieve all that with CSS.

I have added background-position, background-repeat, background-attachment and background-size properties to the title.

This should render as intended.