How do I add a background image to a page?

Help Center Get Answers
1

I want to add a background image to one of my knack pages. I only want it on that page.

I can style the knack-body with a background image, but it shows on all pages. How do I specify a specific page when applying a background image?

 

Thanks!

2

Not a JS expert can u see whats going wrong on this ? followed your code example

var _SceneId='scene_8'

$(document).on('knack-scene-render.any', function (event, page) {
if($("#"+_SceneId).is(":visible"))
{
$("body").css("background","url(http://www.web-wizard.net/images/file-folder.jpg)");
}
else
{
$("body").css("background","");
}
});
3

Hi Sunny,

This is a great solution, thanks. I am trying to add a background to the login page and this works great. However, I don't want the background to appear when the user logs in. I have also tried applying a background colour to the scene through CSS, but again, this is no use as the background image messes up the appearance of the home screen once they log in. 

If you or anyone else has come up against this and found a way around it, I'd be very grateful for your input please.

Regards,

Susanne.

1 Like
4

Hello Jmena,

Try below code 

background: url(url) no-repeat; 

also we can use margin-left , right etc 

But we can't set Image size using code i think. First create exact image size you want .

 

Regards,

Sunny Singla

5

Hi Sunny,

Thanks for the code. I tried it and worked and I also applied to the header with similar results, but I am not sure what syntax to use in order to make the background image to occupy only the header area (position, repeat and/or size). Is this possible?

Thanks again.

6

thank you Sunny!

7

Thanks Sunny!

8

Excellent, that works Sunny

9

Hello Jason,

 

Please try below code in js editor 

var _SceneId='kn-scene_xyz'

$(document).on('knack-scene-render.any', function (event, page) {
if($("#"+_SceneId).is(":visible"))
{
$("body").css("background","url(imageurl)");
}
else
{
$("body").css("background","");
}
});

 

Change imageurl : to your background image 

kn-scene_xyz-> to your actual scene

 

Thanks,

Sunny Singla

ssingla1985@gmail.com

+919855089359

10

Hi, Sunny - having this exact same issue as Susanne.
Is it possible to set a background image to just the login page ??

11

Hello All,
@Sunny_Singla Where can save the Image,
I have saved it on my Desktop and copy the path as URL and used it in the code, Its not working, Any suggestion please ?

12

Hello @Red_Stone ,

You can save it in some public ip or save it into knack table containing image field. and use it’s URL

So that you have URL start with https

Thanks,
Sunny Singla

1 Like
13

Thank you
How to specify the size of the image ?
@Sunny_Singla

14

How do I incorporate the below mentioned code with the above code which is discussed in the thread ? @Sunny_Singla

var yourImg = document.getElementById(‘yourImgId’);
if(yourImg && yourImg.style) {
yourImg.style.height = ‘100px’;
yourImg.style.width = ‘200px’;
}

15

Hello Red,

What are your actual requirements? Everything is shown above.

First, we can load the image using code
var _SceneId=‘kn-scene_xyz’

$(document).on(‘knack-scene-render.any’, function (event, page) {
if($(“#”+_SceneId).is(“:visible”))
{
$(“body”).css(“background”,“url(imageurl)”);
}
else
{
$(“body”).css(“background”,“”);
}
});

Then

background: url(url) no-repeat;

also we can use margin-left , right etc

if you want to show that image in div…

Then on-screen render function Find the image

by

$(document).on(‘knack-scene-render.any’, function (event, page) {
var yourImg = document.getElementById(‘yourImgId’);
if(yourImg && yourImg.style) {
yourImg.style.height = ‘100px’;
yourImg.style.width = ‘200px’;
}
});

Thanks,
Sunny Singla