Full Page BG Image

Steve_Stifler · February 24, 2019

HI guys and girls

I'm just trying to work out how to create BG that covers the whole screen and allows me to put content over the top. Is there a module that I can use to do this with?

Thanks

JA.

Zeka · February 24, 2019

@Steve_Stifler

No, there is no module for such things.

It's just about HTML and CSS

https://www.w3schools.com/howto/howto_css_full_page.asp

Steve_Stifler · February 24, 2019

Thanks Zeka. Where do I put the code?

dotnetic · February 24, 2019

@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.

Steve_Stifler · February 25, 2019

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?

rafaoski · February 25, 2019

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>

dotnetic · February 25, 2019

@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.

Sign In

Full Page BG Image

Recommended Posts

Steve_Stifler

Link to comment

Share on other sites

Zeka

Link to comment

Share on other sites

Steve_Stifler

Link to comment

Share on other sites

dotnetic

Link to comment

Share on other sites

Steve_Stifler

Link to comment

Share on other sites

rafaoski

Link to comment

Share on other sites

dotnetic

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Support

Store

My Details