MyBB Community Forums

Full Version: Profile Image Background
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hey

I am trying to create a custom user-set profile background.

Before: (The original main background)
[Image: a4486864cf.png]

After: (The custom user-set background)
[Image: 180d3bba15.png]

It is constant even if you change the main background. (Majestic theme allows to do choose from various backgrounds.)

Now I need to fix the spacing between the picture and the information box. Additionally, the picture scrolls down and up with the page, how do I stop it from scrolling with the page and staying in its position and when the user sets the picture it's aligned so that the center of the picture meets the center of the box?

Sorry for asking too much but is there a way to have the custom background set to the main background only if the user didn't set any custom background?

Old member_profile template:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1800"></script>  
</head>
<body>
{$header}

<table class="tborder" border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tbody><tr>
<td class="trowp">
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="proavatarr" width="25%"><span>{$avatar}</span></td>
<td class="probg" style="float: right; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;" width="100%">
<div class="probox">
<span style="float:right;" class="prostars">{$userstars}</span>
<span class="largetext protitlemain"><strong><span style="color: rgb(104, 104, 104);"><strong>{$formattedname}</strong></span></strong></span><span class="protitle  proname">{$usertitle}</span>
</div>
<div class="probox">
<div style="float:right;margin-top: 70px;"><a class="probuttons" href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a></div>
<div class="proboxes">
<span class="smalltext">

<strong>Registration Date:</strong> {$memregdate}<br>
<strong>Date of Birth:</strong> {$membday} {$membdayage}<br>
<strong>Local Time:</strong> {$localtime}<br>
<strong>Status:</strong> 
{$online_status}</span>
</div>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
{$awaybit}{$bannedbit}
</tbody></table>
<br />

<ul id="protabs">
<li><a href="#1-content" class="open"><i class="fa fa-info-circle"></i><strong> About</strong></a></li>
<li><a class="" href="#2-content"><i class="fa fa-envelope"></i><strong> Contact</strong></a></li>
<li><a class="" href="#3-content"><i class="fa fa-tasks"></i><strong> Activity</strong></a></li>
<li><a class="" href="#4-content"><i class="fa fa-gear"></i><strong> Others</strong></a></li>
</ul>

<div id="procontent">
    
<div style="display: block;" id="1-content" class="contentblock">
{$profilefields}
{$signature}
{$buddy_options}{$ignore_options}{$report_options}
</div>

<div style="display: none;" id="2-content" class="contentblock">
<table class="tborder" border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tbody><tr>
<td colspan="2" class="thead"><strong>{$lang->users_contact_details}</strong>
</td></tr>
<tr>
<td class="trow1" width="40%"><strong>{$lang->homepage}</strong></td>
<td class="trow1">{$website}</td>
</tr>
{$sendemail}
<tr>
<td class="{$bgcolors['pm']}"><strong>{$lang->pm}</strong></td>
<td class="{$bgcolors['pm']}"><a href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a></td>
</tr>
<tr>
<td class="{$bgcolors['icq']}"><strong>{$lang->icq_number}</strong></td>
<td class="{$bgcolors['icq']}">{$memprofile['icq']}</td>
</tr>
<tr>
<td class="{$bgcolors['aim']}"><strong>{$lang->aim_screenname}</strong></td>
<td class="{$bgcolors['aim']}"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=aim&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['aim']}</a></td>
</tr>
<tr>
<td class="{$bgcolors['yahoo']}"><strong>{$lang->yahoo_id}</strong></td>
<td class="{$bgcolors['yahoo']}"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=yahoo&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['yahoo']}</a></td>
</tr>
<tr>
<td class="{$bgcolors['msn']}"><strong>{$lang->msn}</strong></td>
<td class="{$bgcolors['msn']}"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=msn&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['msn']}</a></td>
</tr>

</tbody></table>
</div>

<div style="display: none;" id="3-content" class="contentblock">
<table class="tborder" border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tbody><tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong>
</td></tr><tr>
<td class="trow1"><strong>Joined:</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
<tr>
<td class="trow2"><strong>Last Visit:</strong></td>
<td class="trow2">{$memlastvisitdate} {$memlastvisittime}</td>
</tr>
<tr>
<td class="trow1"><strong>Total Posts:</strong></td>
<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total})<br /><span class="smalltext">(<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a> &mdash; <a href="search.php?action=finduser&amp;uid={$uid}">{$lang->find_posts}</a>)</span></td>
</tr>
<tr>
<td class="trow2"><strong>Time Spent Online:</strong></td>
<td class="trow2">{$timeonline}</td>
</tr>
{$referrals}
{$reputation}
{$warning_level}



</tbody></table>
</div>

<div style="display: none;" id="4-content" class="contentblock ">
{$modoptions}
{$adminoptions}
</div>

</div>


{$footer}
</body>
</html>

Updated/new member_profile template:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1800"></script>  
</head>
<body>
{$header}

<table class="tborder" border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tbody><tr>
<td class="trowp">
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="proavatarr" width="25%"><span>{$avatar}</span></td>
	<td style="background-image: url({$userfields['fid5']}); background-repeat: no-repeat; background-size: cover; background-attachment: fixed;" width="100%">
<div class="probox">
<span style="float:right;" class="prostars">{$userstars}</span>
<span class="largetext protitlemain"><strong><span style="color: rgb(104, 104, 104);"><strong>{$formattedname}</strong></span></strong></span><span class="protitle  proname">{$usertitle}</span>
</div>
<div class="probox">
<div style="float:right;margin-top: 70px;"><a class="probuttons" href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a></div>
<div class="proboxes">
<span class="smalltext">

<strong>Registration Date:</strong> {$memregdate}<br>
<strong>Date of Birth:</strong> {$membday} {$membdayage}<br>
<strong>Local Time:</strong> {$localtime}<br>
<strong>Status:</strong> 
{$online_status}</span>
</div>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
{$awaybit}{$bannedbit}
</tbody></table>
<br />

<ul id="protabs">
<li><a href="#1-content" class="open"><i class="fa fa-info-circle"></i><strong> About</strong></a></li>
<li><a class="" href="#2-content"><i class="fa fa-envelope"></i><strong> Contact</strong></a></li>
<li><a class="" href="#3-content"><i class="fa fa-tasks"></i><strong> Activity</strong></a></li>
<li><a class="" href="#4-content"><i class="fa fa-gear"></i><strong> Others</strong></a></li>
</ul>

<div id="procontent">
    
<div style="display: block;" id="1-content" class="contentblock">
{$profilefields}
{$signature}
{$buddy_options}{$ignore_options}{$report_options}
</div>

<div style="display: none;" id="2-content" class="contentblock">
<table class="tborder" border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tbody><tr>
<td colspan="2" class="thead"><strong>{$lang->users_contact_details}</strong>
</td></tr>
<tr>
<td class="trow1" width="40%"><strong>{$lang->homepage}</strong></td>
<td class="trow1">{$website}</td>
</tr>
{$sendemail}
<tr>
<td class="{$bgcolors['pm']}"><strong>{$lang->pm}</strong></td>
<td class="{$bgcolors['pm']}"><a href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a></td>
</tr>
<tr>
<td class="{$bgcolors['icq']}"><strong>{$lang->icq_number}</strong></td>
<td class="{$bgcolors['icq']}">{$memprofile['icq']}</td>
</tr>
<tr>
<td class="{$bgcolors['aim']}"><strong>{$lang->aim_screenname}</strong></td>
<td class="{$bgcolors['aim']}"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=aim&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['aim']}</a></td>
</tr>
<tr>
<td class="{$bgcolors['yahoo']}"><strong>{$lang->yahoo_id}</strong></td>
<td class="{$bgcolors['yahoo']}"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=yahoo&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['yahoo']}</a></td>
</tr>
<tr>
<td class="{$bgcolors['msn']}"><strong>{$lang->msn}</strong></td>
<td class="{$bgcolors['msn']}"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=msn&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['msn']}</a></td>
</tr>

</tbody></table>
</div>

<div style="display: none;" id="3-content" class="contentblock">
<table class="tborder" border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tbody><tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong>
</td></tr><tr>
<td class="trow1"><strong>Joined:</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
<tr>
<td class="trow2"><strong>Last Visit:</strong></td>
<td class="trow2">{$memlastvisitdate} {$memlastvisittime}</td>
</tr>
<tr>
<td class="trow1"><strong>Total Posts:</strong></td>
<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total})<br /><span class="smalltext">(<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a> &mdash; <a href="search.php?action=finduser&amp;uid={$uid}">{$lang->find_posts}</a>)</span></td>
</tr>
<tr>
<td class="trow2"><strong>Time Spent Online:</strong></td>
<td class="trow2">{$timeonline}</td>
</tr>
{$referrals}
{$reputation}
{$warning_level}



</tbody></table>
</div>

<div style="display: none;" id="4-content" class="contentblock ">
{$modoptions}
{$adminoptions}
</div>

</div>


{$footer}
</body>
</html>

I just changed:
<td class="probg" style="float: right; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;" width="100%">

To:
<td style="background-image: url({$userfields['fid5']}); background-repeat: no-repeat; background-size: cover; background-attachment: fixed;" width="100%">

Thanks in advance!
In the original you have it floating to the right. Try the new code again but with the float.

The reason the background follows you when you scroll, is because you've set the background as fixed.

Try replacing it with this code
<td style="background-image: url({$userfields['fid5']}); background-repeat: no-repeat; background-size: cover; float: right;" width="100%"> 
Thanks for your reply.

This is how it looks now:
[Image: 7f5bb0bb39.png]

How do I fix the information box to be just like the first picture?

This aswell:
(2016-08-18, 07:48 AM)PzyCh Wrote: [ -> ]Sorry for asking too much but is there a way to have the custom background set to the main background only if the user didn't set any custom background?

Thanks again!
Re add the probg class.

So
<td class="probg" style="background-image: url({$userfields['fid5']}); background-repeat: no-repeat; background-size: cover; float: right;" width="100%"> 

For your second question, you'll need the Template Conditionals plugin. You can download it here: http://mybbhacks.zingaburga.com/showthread.php?tid=464

Install & Activate the plugin, then replace the background code using this code:
<if $userfields['fid5'] then>
<td style="background-image: url({$userfields['fid5']}); background-repeat: no-repeat; background-size: cover; float: right; padding:10px;" width="100%"> 
<else>
<td style="background-image: url(LINK TO DEFAULT BACKGROUND IMAGE IF NO CUSTOM SET); background-repeat: no-repeat; background-size: cover; float: right; padding:10px;" width="100%"> 
</if>

Basically what this will do is, if the user has a custom background set, it will use the first code. If they don't have a background set then it will use the second code.
Readding the probg class gets the info box fixed but it goes back to using the main background instead of the custom user-set one.
Ok. I didn't know what was in the probg class. I just assumed it had some padding styling.

Alright so just remove the class and add some padding to the inline styling.

Like so:
<td style="background-image: url({$userfields['fid5']}); background-repeat: no-repeat; background-size: cover; float: right; padding: 10px;" width="100%"> 

Adjust "padding: 10px" if you want more padding.

Also if you don't want to add the if template condition. You can just add a background-color style. So if a user doesn't have a custom background, by default the background will appear as grey, or any color you specify.

<td style="background-image: url({$userfields['fid5']}); background-repeat: no-repeat; background-size: cover; float: right; padding: 10px; background-color: #666;" width="100%"> 

Change #666 if you want a different color.
That solved most of the problems!
It looks like this now:
http://puu.sh/qGgqV/06680c5f80.png

Sorry, a few more things:
1- How do I add a border around the picture to look like this:
http://puu.sh/qGgvs/5f9c3b50c6.png
Do you see the thin border around the picture?

2- How do I make the picture centered? Right now it shows the upper half of the full picture but I need it to show all of it or just fit the picture in.
http://puu.sh/qGgqV/06680c5f80.png

This is the original picture from Google:
http://covermaker.net/thumbnail/26/2668.jpg

Edit: Not sure why it's not displaying pictures, I replaced the [IMG] tags with URLs
Ya. So a couple of changes you'll need to make. You need to change your background position to centered, and add a border.

<td style="background-image: url({$userfields['fid5']}); background-repeat: no-repeat; background-size: cover; float: right; padding: 10px; background-position: center center; border: 3px solid #666" width="100%">

Change #666 if you want to have a different border color, and change 3px if you want a different border size.
Oh man, it works. I appreciate your help greatly!

http://puu.sh/qGlvo/8ccda0c986.png

Thanks!
(2016-08-19, 12:34 AM)PzyCh Wrote: [ -> ]Oh man, it works. I appreciate your help greatly!

http://puu.sh/qGlvo/8ccda0c986.png

Thanks!

No problem buddy. Glad I could help.