This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

How to add background image to page?

8 Posts 4115 Views

DowntownScience

Community Member, 13 Posts

11 July 2014 at 6:07am

Let me preface by saying that I'm a network engineer...not a programmer! You're going to have to be very specific about paths and where to put this code in my files!

I've built a couple Silverstripe sites now which are very basic. I have a few different page types that use an image for a banner that is called through the ".ss" file within \templates\layout like so...

<% include SideBar %>
<div class="content-container unit size3of4 lastUnit">
<article>
<div id="Banner">
<h1><img src="/themes/simple/images/Molecule2Banner.jpg" alt="Homepage image" /></h1>
</div>
<div class="content">$Content</div>
</article>
$Form
$PageComments
</div>

I would like to add a Background Image to specific page types. Is there a "div id" for Background that I could use? I will only need to do this for a few pages so I don't mind setting it up manually in each page type. What's the easiest way to do this?

Thanks in advance.

Devlin

Community Member, 344 Posts

11 July 2014 at 7:40pm

I would like to add a Background Image to specific page types.

The tutorial section "Adding a staff section" explains how to add an image to a page.

http://doc.silverstripe.org/framework/en/tutorials/2-extending-a-basic-site#adding-a-staff-section

It's basically something like this:

// mysite/code/Page.php
class Page extends SiteTree {
	private static $has_one = array(
		'Banner' => 'Image'
	);
}

// mysite/templates/layout/Page.ss
<article>
	<div id="Banner">
		<h1>$Banner</h1>
	</div>
	<div class="content">$Content</div>
</article>

http://doc.silverstripe.org/framework/en/reference/templates
http://doc.silverstripe.org/framework/en/reference/image

DowntownScience

Community Member, 13 Posts

15 July 2014 at 5:27am

Thanks for the reply.

I have read through that section before, but didn't think it applied to my application. I'm trying to change the background of the page from a solid color to a wallpaper type image that I can type on top of.

What's in the building a basic site is not much different than adding an image through the CMS which I have already done. I don't want the text to wrap the images though in this particular instance.

Devlin

Community Member, 344 Posts

15 July 2014 at 6:29am

Edited: 15/07/2014 6:45am

I'm trying to change the background of the page from a solid color to a wallpaper type image that I can type on top of.

Sorry for not being clearer. It's the same principle, though.

// mysite/code/Page.php
class Page extends SiteTree {
	private static $has_one = array(
		'Background' => 'Image'
	);
} 

// mysite/templates/Page.ss
<body style="background-image:url($Background.Filename);">

DowntownScience

Community Member, 13 Posts

15 July 2014 at 6:58am

Just to confirm....

I would like this background to be used on a page type I created named "ContactUs".

My ContactUs.ss already contains...

<% include SideBar %>
<div class="content-container unit size3of4 lastUnit">
<article>
<div id="Banner">
<img src="/themes/simple/images/Molecule3BannerLong.jpg" alt="Homepage image" />
</div>
<div class="content">$Content</div>

</article>
$Form
$PageComments
</div>

Where do I put your code?

Likewise for ContactUs.php. It already contains...

<?php
class ContactUs extends Page {
}
class ContactUs_Controller extends Page_Controller {
}

Do I just overwrite this file with your code replacing "page" with "ContactUs"?

Also what is the difference between "extends Page" and "expends SiteTree"? Should I be using one over the other?

Thanks alot for your help.

Devlin

Community Member, 344 Posts

15 July 2014 at 8:06am

Edited: 15/07/2014 8:18am

That's a lot of questions.

Also what is the difference between "extends Page" and "extends SiteTree"? Should I be using one over the other?

Page is your default Page class and all your MyPage classes should extend Page. With that you "can inherit the methods and properties of" it.
http://php.net/manual/en/language.oop5.basic.php

SiteTree is the default CMS Page class. It should only be extended, if your MyPage doesn't want anything to do with the default Page class.

Do I just overwrite this file with your code replacing "page" with "ContactUs"?

This is dummy code. Never replace anything unless you're sure.

Likewise for ContactUs.php. It already contains...

If you'd include the $has_one in your mysite/code/Page.php, then $Background is available in all Page templates.
If you'd include it in your ContactUs class, then $Background is available in ContactUs.ss only.

My ContactUs.ss already contains...

This is a $Layout template located in a templates/layout/ folder.

If you like to use this image as background for the body tag, then you need to edit Page.ss (templates/Page.ss).

If you added the $has_one in ContactUs.php instead, then you need to copy templates/Page.ss to templates/ContactUs.ss and add the style attribute there.

DowntownScience

Community Member, 13 Posts

15 July 2014 at 8:23am

Edited: 15/07/2014 8:27am

OK...I think I'm getting there with all of this in my head!

// mysite/templates/Page.ss

I do not have a templates directory in mysite. Is this normal and do I just create one?

Also, how do I declare this background for use on only the ContactUs page if I have it in my default template?

Sorry for all of my confusion and thanks for your help and patience!

Devlin

Community Member, 344 Posts

15 July 2014 at 9:30am

Edited: 15/07/2014 9:36am

I do not have a templates directory in mysite. Is this normal and do I just create one?

That's a habit of mine, you can use "mysite/templates" and "themes/mytheme/templates" synonymously. I usually build all my themes in the in the 'mysite' folder.

Also, how do I declare this background for use on only the ContactUs page if I have it in my default template?

If that's the case you should add it in the ContactUs class only.

If your "ContactUs extends Page", you can add this style attribute to ~/templates/Page.ss and it will only be displayed if the current page has a assigned background image, e.g. ContactUs.

Return to top