Jump to content

Full Page BG Image


Steve_Stifler
 Share

Recommended Posts

@Steve_Stifler That depends on your output strategy.

The CSS code belongs to, well your css file (or in the head of your template file).

Then you would insert a HTML element with the class "bg" (according to the example @Zeka mentioned) in one of your template files, where you would like to use the fullscreen image.

Template files are residing in the site/templates folder. Maybe you use a home.php template file? Then insert the element there.

  • Like 1
Link to comment
Share on other sites

OK, I've followed Zeka's links and just did a copy and paste (with the necessary substitutions of file name), pasting the "Full Page" HTML code into the "Home Template" file using my CPanel to access it. I opened it with the txt editor and pasted the code:

body, html {
  height: 100%;
}

.bg { 
  /* The image used */
  background-image: url("img_girl.jpg"); <----Replaced with the correct URL of the image

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

 

Then when I went to view the page, got this:

 

<p style='background:crimson;color:white;padding:0.5em;font-family:sans-serif;'><b>Parse Error: 	syntax error, unexpected &#039;,&#039; (line 10 of /home2/investo5/public_html/pw/site/templates/home.php)  </b><br /><br /><small>This error message was shown because: you are logged in as a Superuser. Error has been logged.</small></p>

 

So, my question is, where did I f it up?

Link to comment
Share on other sites

I think it is best to add a photo to the head element as below:

( I've added a simple if statement that will check in which template to display the pictures )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title><?php echo $page->title; ?></title>
	<meta name="description" content="<?php echo $page->summary; ?>" />
	<link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />
<?php
// Get Images ( https://processwire.com/docs/fields/images/ )
$image = $page->images;

// Show only in these templates
$check_templates = ['home', 'basic-page'];
if ( in_array($page->template->name, $check_templates) ):
?>
	<style>
		/* https://css-tricks.com/perfect-full-page-background-image/ */
		body {
		  /* background: url(<?php // if($image) echo $image->first()->url;?>) no-repeat center center fixed; */
			background: linear-gradient( rgba(0, 0, 0, 0.91), rgba(2, 35, 50, 0.82) ),
									url("<?php if($image) echo $image->first()->url;?>") no-repeat center center fixed;
		  background-size: cover;
		  height: 100%;
		}
		p, h1, h2, h3 {
			color: aliceblue;
		}
		a {
			color: tomato;
		}
		.summary {
			color: aliceblue;
		}
	</style>
<?php endif; ?>
</head>
<body>

<main id='main'>

Remember to download images correctly if you use the images field, for example:

https://processwire.com/docs/fields/images/

<?php
$image = $page->images;
if($image) echo $image->first()->url;
?>

You can also check the selected page where you want to display the picture:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title><?php echo $page->title; ?></title>
	<meta name="description" content="<?php echo $page->summary; ?>" />
	<link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />
<?php
// Get Images ( https://processwire.com/docs/fields/images/ )
$image = $page->images;

// Show only in these pages
$check_page_name = ['home', 'about'];
if ( in_array($page->name, $check_page_name) ):
?>
	<style>
		/* https://css-tricks.com/perfect-full-page-background-image/ */
		body {
		  /* background: url(<?php // if($image) echo $image->first()->url;?>) no-repeat center center fixed; */
			background: linear-gradient( rgba(0, 0, 0, 0.91), rgba(2, 35, 50, 0.82) ),
									url("<?php if($image) echo $image->first()->url;?>") no-repeat center center fixed;
		  background-size: cover;
		  height: 100%;
		}
		p, h1, h2, h3 {
			color: aliceblue;
		}
		a {
			color: tomato;
		}
		.summary {
			color: aliceblue;
		}
	</style>
<?php endif; ?>
</head>
<body>

<main id='main'>

 

If you use a REGULAR profile wchich using new template file strategy, it's very simple to add styles in the selected template like home

 

<?php namespace ProcessWire;

/* home.php */

// get most recent blog post
$blog = pages()->get('/blog/');
$blogPost = $blog->child();

// Get Images ( https://processwire.com/docs/fields/images/ )
$image = $page->images;
?>

<head id='html-head' pw-append>
<style>
	/* https://css-tricks.com/perfect-full-page-background-image/ */
	body {
		/* background: url(<?php // if($image) echo $image->first()->url;?>) no-repeat center center fixed; */
		background: linear-gradient( rgba(0, 0, 0, 0.91), rgba(2, 35, 50, 0.82) ),
								url("<?php if($image) echo $image->first()->url;?>") no-repeat center center fixed;
		background-size: cover;
		height: 100%;
	}
	p, h1, h2, h3 {
		color: aliceblue;
	}
	a {
		color: tomato;
	}
	.summary {
		color: aliceblue;
	}
	.uk-card h3 {
		color: black;
	}
	.uk-card p {
		color: black;
	}
</style>
</head>

<h1 id='content-head'>
	<?=page()->headline?>
</h1>

<div class='uk-margin-top' id='content-body'>
	<?=page()->body?>
	<hr>
	<p class='uk-margin-small'>
		<a class='uk-button uk-button-link uk-link-muted' href='<?=$blog->url?>'>
			In the blog
		</a>
	</p>
	<?=ukBlogPost($blogPost)?>
	<p class='uk-margin-small'>
		<a href='<?=$blog->url?>'>More blog posts <?=ukIcon('arrow-right')?></a>
	</p>
</div>

<aside id='sidebar'>
	<?=ukNav(pages()->get('/categories/')->children)?>
	<div class='uk-card uk-card-default uk-card-hover uk-card-body uk-margin-medium-top'>
		<?=page()->sidebar?>
	</div>
</aside>

 

  • Like 5
Link to comment
Share on other sites

@Steve_Stifler It would help much if you post the complete code of your home.php or even provide an URL where the error can be seen.

Then people can help you better.

Your errors seems to come from a not encoded entity. The failing character is the apostrophe '

Some chars in PHP have to be encoded to work. But without seeing your actual code, we can not provide much help.

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...