Adding an image background to login page in phpRunner 7

George,
add the following to 'Custom CSS' under Style Editor

Hi Sergey,
Thanks. I have inserted the code to the 'Custom CSS' under Style Editor and seems not to be working. See the code below as there is something that I am not getting right:
body.function-login {

background-image:url('/images/sme.bmp');

}
body {

background: #F5F9FC !important;

}
.rnr-page {

width: 1100px;

display: table;

margin: auto;

}
.rnr-top {

width: 100%;

}
.rnr-left, .rnr-center {

background: #f4f4f4 !important;

}
George

Web browsers do not understand BMP format

Sergey,
Thanks again. I am still not getting any luck displaying the background. Here is the code for your scrutiny.
.rnr-top {

width: 100%;

}
.rnr-left, .rnr-center {

background: #f4f4f4 !important;

}
body {

background: #F5F9FC !important;

}
body.function-login {

background-image:url('/images/users.gif');

}
.rnr-page {

width: 1100px;

display: table;

margin: auto;

}
.rnr-top {

width: 100%;

}
.rnr-left, .rnr-center {

background: #f4f4f4 !important;

}
Thanks,

George

Remove the !important keyword from the css body rule.

For clarify sake remove everything but following:

URL of the image can be replaced with the URL of any image you want to use.

This might be a bug but the only way I was able to make background image to appear was include the alias name for the webserver in the image string.
For example:

• If the website is on the local host and is called webserver. The following statement work when added to the custom CSS option

body.function-login {

background-image:url('/webserver/images/img13.jpg');

}
Pls advise
John

If the images folder is at the same level of the login.php page, the css code should be as follows:

You can remove the first forward slash.

This is not a bug, you need to specify a valid path to the image file. The most reliable way is to reference it via a full URL i.e.

Hello Sergey,
I have tried your code also with your valid picture path but it still does not show the picture.
this is my code but the white background that i sett is overuling the picture part.
body.function-login {

background-image:url('https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=72497&image=1&table=forumreplies';);

}
Regards Ivan,

Did you remove the !important keyword for the background color rule?

Hello Cristian,
Thank you for your support,
Yess, i did.. the only thing that is at Custom Css is
body.function-login {

background-image:url('https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=72500&image=1&table=forumreplies';);

}
I have checked by hand the CSS files and the ! is nowhere to be found,
Kind Regards,
Ivan

If you point your browser to https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=72501&image=1&table=forumreplies can you see the image?

Ivan,
I think it's pretty obvious that mycoolwebsite.com needs to be replaced with the URL of your own webiste.

Sergey, thank for the link: http://xlinesoft.com/blog/2013/10/26/building-a-nice-looking-login-page-with-custom-css/
That helped in getting it right.
George