Explore the community Forums Lectora Lectora Questions & Answers Use image as background in browser window

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #283790 Score: 0
    Profile photo of amak
    amak
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    contributor
    2 pts
    @amak

    Hi there,

    Is there a way to use an image as the background for the browser window? I know that I can use an image for my Lectora lesson, but the size is defined by my page size. So I am looking to use an image that can extend to the entire screen real estate I have in the browser. Having it responsive would be a bonus.

    Thank you in advance!

    #287735 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    335 pts
    @ssneg

    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]

    #287736 Score: 0
    Profile photo of J S
    J S
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    profile
    2 pts
    @ummakumma

    @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:

    #287737 Score: 0
    Profile photo of J S
    J S
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    profile
    2 pts
    @ummakumma

    @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;

    #287740 Score: 0
    Profile photo of amak
    amak
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    contributor
    2 pts
    @amak

    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!

    #287732 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    335 pts
    @ssneg

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

    #287738 Score: 0
    Profile photo of amak
    amak
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    contributor
    2 pts
    @amak

    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

    #287733 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    335 pts
    @ssneg

    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]

    #396081 Score: 0
    Profile photo of amak
    amak
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    contributor
    2 pts
    @amak

    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.

    #399466 Score: 0
    Profile photo of Bennie Ejiga
    Bennie Ejiga
    Member
    beginner
    intermediate
    friend finder
    wise owl
    contributor
    @bejiga6547

    Hello, @ssneg @amak

    <span style=”line-height: 1.5;”>Please, I’d like to know if there is a workaround for this fix on responsive titles?</span>

    <span style=”line-height: 1.5;”>I tried this fix using the responsive design and the background image disappeared.</span>

    Once I reverted to a non responsive design, it shows up again.

    Can I get some help please?

    #399479 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    195 pts
    @Klaatu

    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.

    • This reply was modified 11 months, 1 week ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: typo
    • This reply was modified 11 months, 1 week ago by Profile photo of Darrel Somoza Darrel Somoza.
    #399496 Score: 0
    Profile photo of Bennie Ejiga
    Bennie Ejiga
    Member
    beginner
    intermediate
    friend finder
    wise owl
    contributor
    @bejiga6547

    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!

    #399565 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    195 pts
    @Klaatu

    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.

    This post has received 1 vote up.
    #399568 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    195 pts
    @Klaatu

    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.

    This post has received 1 vote up.
    #411630 Score: 0
    Profile photo of Nick Williams
    Nick Williams
    Member
    friend finder
    beginner
    intermediate
    contributor
    wise owl
    curious george
    advanced
    9 pts
    @nwilliams3743

    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

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.