2. PHPRunner Tips and Tricks
  3. How to set image as background for all pages in your application
This topic is locked

How to set image as background for all pages in your application

 		2/23/2012 12:27:20 PM
PHPRunner Tips and Tricks
admin

Since we want to apply this to all pages we need to modify the header file.
Proceed to Visual Editor, open 'Header' and switch to HTML mode.
Tiled background

<style>

body {

background: url(https://asprunner.com/forums/file.php?topicimage=1&fieldname=question&id=19085&image=1&table=forumtopics);

}

</style>


Single image, centered

<style>

body {

background: url(https://asprunner.com/forums/file.php?topicimage=1&fieldname=question&id=19085&image=2&table=forumtopics) no-repeat center center;

}

</style>


Cenered and scaled to fit the screen

<style>

body {

background: url(https://asprunner.com/forums/file.php?topicimage=1&fieldname=question&id=19085&image=3&table=forumtopics) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

</style>


Make sure to replace https://asprunner.com/forums/file.php?topicimage=1&fieldname=question&id=19085&image=4&table=forumtopics with the actual URL of your image file.
R
 		rcrane 2/24/2012

If I cut and paste that code into the code view of the Header page in my Visual Editor, the editor strips out the <style> tags - presumably because I only have access to the body section of the Header page.

Surely that code needs to go between <head> </head> tags in the header section of the page? Or inside a single style or body tag eg:

<body style="background: url(https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=64549&image=1&table=forumreplies) no-repeat center center;">
admin 2/24/2012

richardc,
I observe the same behavior. You can do the following: paste this code to header file in HTML mode and switch to Visual mode right away. Avoid editing header file after that.
The whole approach is apparently a temporary workaround. We are looking for a better way to handle this task.
L
 		laonian 2/24/2012

This would be more attractive if it is possible to make the background of data grids or containers (semi) transparent with the style editor.
M
 		malnak 5/5/2012

Try this in html mode



<DIV

style="BACKGROUND-IMAGE: url(images/HF_top.gif); BACKGROUND-REPEAT: repeat-x"><IMG alt=logo src="images/HF_logo.gif" width=332 height=133></DIV>


Same idea was to put a background image and have it not strip out the style codes. I put the style commands in the <div> code and that seems to work and not get stripped out.
D
 		DigiTac 2/13/2013



Since we want to apply this to all pages we need to modify the header file.
Proceed to Visual Editor, open 'Header' and switch to HTML mode.
Tiled background

<style>

body {

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

}

</style>


Single image, centered

<style>

body {

background: url(https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=69804&image=2&table=forumreplies) no-repeat center center;

}

</style>


Cenered and scaled to fit the screen

<style>

body {

background: url(https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=69804&image=3&table=forumreplies) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

</style>


Make sure to replace https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=69804&image=4&table=forumreplies with the actual URL of your image file.


Hello,

From the line: Centered and scaled to fit the screen, down I miss a end body tag. Is that correct?
I copied several pieces of code now into the header and appleid that it would work for all pages, but none whatsoever works.
Still somebody out there who wants to help me?
Got an email today, and yes , it's working. Looks fantastic.