[IPB 4Add a background image to the header

by Admin - 11-07-2015, 06:46 AM
Novice
Posts:
44
Joined:
Jan 2015
Likes:
3
Credits:
1
Reputation:
0
2 Years of Service
#1
OP
Posted: 11-07-2015, 06:46 AM
This tutorial will teach you how to add a background image to the header in the default IPS 4.x.x theme, as shown below.

BEFORE:

[Image: 3ziOPt6.jpg]

AFTER:

[Image: BPWEhuq.jpg]

1. To begin, log into your ACP and browse to Customization > Themes. Click the arrow to the right of your theme and select Manage Resources. Click the + Add Resource button at the top right.


2. Change the location from admin to global and use the Choose single file... button to upload your background image. This tutorial uses header.jpg as the file name, however you are welcome to use whatever name you like. Press Save.

[Image: OqNIcox.jpg]

3. You will be taken back to the resources page. Use the Search: Name field at the top right to search for your file name (header.jpg). Under the Template tag column, you'll see your resource code which allows you to reference that image in your css and HTML. We'll need this code in the next step:

Code:
{resource="header.jpg" app="core" location="global"}

4. Go to Customization > Themes > Edit HTML and CSS. Click the CSS tab and choose custom.css. Paste the following code:


Code:
@media screen and (min-width:980px){

   #ipsLayout_header header{
     background-image: url('{resource="header.jpg" app="core" location="global"}');
     background-size: cover;
     background-position: 50% 0%;
     background-repeat: no-repeat;
   }

   #elSearchNavContainer{ background: rgba(0,0,0,0.5); }

}

The first line, starting with @media restricts the css to desktops and laptops. The background image will not be shown for tablets or mobiles (which is ideal for loading times). If you wish to show the image on all devices, remove the top line, and the } in the very last line.

background-image simply defines our image URL, using the template tag from step 3.
background-size defines if the image should be stretched to occupy the entire space of the header. Remove this line if you don't want the image to use it's natural image size
background-position defines the position of the image (centered horiztontally, positioned at the top vertically).
background-repeat defines how the image should be repeated (no-repeat, repeat, repeat-x, repeat-y)

For an added effect, the background of the navigation bar has been changed to a semi-transparent black, which allows your background image to show beneath it. You are welcome to remove that code if you wish since it may not look correct for all images.

Done!
MobiMyle
19-09-2015, 06:50 PM
Closed Account
Posts:
26
Joined:
Sep 2015
Likes:
0
Credits:
26
Reputation:
0
1 Year of Service
#2
Posted: 19-09-2015, 06:05 PM
tested this workin fine demo

http://greekbytez.com/bytez/
Junior Member
Posts:
54
Joined:
Sep 2015
Likes:
4
Credits:
49
Reputation:
0
1 Year of Service
#3
Posted: 19-09-2015, 06:50 PM
Hey, Good tut mate. Thanks for sharing.
Quote:I am not special, I am just anonymous.
I am here to learn, anybody who is willing to teach, always consider me in.
Newbie
Posts:
11
Joined:
Nov 2015
Likes:
1
Credits:
-1
Reputation:
0
1 Year of Service
#4
Posted: 12-11-2015, 04:56 PM
A screenshot would be nice!
Novice
Posts:
33
Joined:
Nov 2015
Likes:
5
Credits:
116
Reputation:
0
1 Year of Service
#5
Posted: 12-11-2015, 05:33 PM
Thank you for tutorial!
Novice
Posts:
28
Joined:
Nov 2015
Likes:
0
Credits:
18
Reputation:
0
1 Year of Service
#6
Posted: 10-12-2015, 07:30 PM
thanks you man! ^^
Novice
Posts:
25
Joined:
Dec 2015
Likes:
1
Credits:
50
Reputation:
0
1 Year of Service
#7
Posted: 12-12-2015, 08:33 AM
Thanks for tutorial, i need it
Novice
Posts:
36
Joined:
Jun 2015
Likes:
1
Credits:
3
Reputation:
0
2 Years of Service
#8
Posted: 14-12-2015, 07:31 PM
Thanks for sharing
good this
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)