Edit Background Image

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
Post Reply
dla051281
Posts: 3
Joined: 2016-02-12 21:40

Edit Background Image

Post by dla051281 » 2016-02-23 00:55

What file needs to be changed to change the background image on my webpage

TheNoLifer
Veteran Member
Posts: 67
Joined: 2015-06-06 12:10

Re: Edit Background Image

Post by TheNoLifer » 2016-04-21 13:10

Hi, bit late for this one, but in version 5.50 you can edit the backgrounds as follows;

Login Page;

edit login.php and add the following <style>, just below the "<!-- customized splash content here -->" line

Code: Select all

<style>
body {
background-image: url("login_screen.jpg");
}
</style>
For the main background of the pages themselves, I use a repeating texture background and that's set in the home.php file

Code: Select all

<style>
body { 
background-image: url(128-29.jpg);
}
Set this in the style block, just above the .panel-body-description

Hope this helps!

patsd102
Veteran Member
Posts: 142
Joined: 2013-01-15 19:59

Re: Edit Background Image

Post by patsd102 » 2016-04-21 21:38

You can also use your CSS file

Find this (around line 304)

body {
font-family: "Open Sans", Calibri, Candara, Arial, sans-serif;
font-size: 15px;
line-height: 1.428571429;
color: #333333;

And replace with this adding your own image URL

body {
font-family: "Open Sans", Calibri, Candara, Arial, sans-serif;
font-size: 15px;
line-height: 1.428571429;
color: #333333;
background-image: url(http://activations.net/images/11.jpg);
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;

cheers
23.17

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Edit Background Image

Post by peebee » 2016-04-21 23:10

If you would like to keep it all contained within in the hooks folder so you don't need to replace any AppGini generated code in the event of an upgrade/rewrite, you can just add your style block to /hooks/header-extras.php

For a responsive background image, just add:

Code: Select all

<style>
body {
	background-image: url(your_bg_img.jpg);
  	background-position: center center;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
}
</style>

TheNoLifer
Veteran Member
Posts: 67
Joined: 2015-06-06 12:10

Re: Edit Background Image

Post by TheNoLifer » 2016-04-22 14:02

Thanks peebee - that's a great way to do it!

ppfoong
Posts: 5
Joined: 2021-07-13 16:46

Re: Edit Background Image

Post by ppfoong » 2021-07-14 09:57

If you only want the background image to appear in login page, can put the condition like this in header-extras.php:

Code: Select all

<?php
	if (isset($_GET['signIn']) || isset($_GET['loginFailed'])) {
		echo "\n<style>\n";
		echo "\t body {\n";
		echo "\t\t background-image: url(images/background.jpg);\n";
		echo "\t\t background-position: center center;\n";
		echo "\t\t background-repeat: no-repeat;\n";
		echo "\t\t background-attachment: fixed;\n";
		echo "\t\t background-size: cover;\n";
		echo "\t }\n";
		echo "</style>\n";
	}
?>

Post Reply