I asked in a previous thread about this code however I guess the question was overlooked so asking again, sorry for the multitude of posts over one thing.

I used the previous gradient tutorial to install gradient colors to ky staffs posts however I changed the layout to dark and wanted to implement another type of gradiabt with more detail and my question is - is there any way to make this code work so the image covers JUST the area with the users picture and information, and not the post box itself?

I edited the CSS code provided in the tutorial so not to stretch the image however its still copying over to the post box where it really isn't wanted.

http://prntscr.com/9vceo1
http://prntscr.com/9vcek1

I am trying to do this on a phpBB2

Thank you in advance.

Hello,

You can use the javascript from this topic: https://help.forumotion.com/t137582-javascript-for-an-image .

You should use this css:

Code:

.post.staff-post td { background:none }
.post.staff-post { background:url(http://i39.servimg.com/u/f39/18/21/41/30/f6011.png) no-repeat left bottom #1d1d1d }

.

-Brandon

In that code you will see this part of the code

Code:

http://i39.servimg.com/u/f39/18/21/41/30/f6011.png

You just have to change the way it is
Right now its all over the post background
You need to have one made that is just the size of your profiles and not over run that part of your post.
You can ask for that to be made here >> Graphic Design Section

brandon_g wrote:Hello,

You can use the javascript from this topic: https://help.forumotion.com/t137582-javascript-for-an-image .

You should use this css:

Code:

.post.staff-post td { background:none }
.post.staff-post { background:url(http://i39.servimg.com/u/f39/18/21/41/30/f6011.png) no-repeat left bottom #1d1d1d }

.

-Brandon

That isnt the issue, I have everything implemented, and i know i did it correctly because it originally worked until i tried to change out the image.

codes -
http://prntscr.com/9vptae
http://prntscr.com/9vq3om
http://prntscr.com/9vq5ex

Even with it before my edits /to make sure each rank has its own color/ it still does this.
http://prntscr.com/9vq624

So im not sure if its with the code of my forum or what and i'm at a loss of what to do to fix it.

APE wrote:In that code you will see this part of the code

Code:

http://i39.servimg.com/u/f39/18/21/41/30/f6011.png

You just have to change the way it is
Right now its all over the post background
You need to have one made that is just the size of your profiles and not over run that part of your post.
You can ask for that to be made here >> Graphic Design Section

I have the image made, in two sizes, one at size and one extended with transparent to hope it pushes it over but it doesn't work

https://i.imgur.com/HbG5gqB.png
https://i.imgur.com/JPwhAI9.png

However as listed above, its still not working and giving me the issue.

at size image - http://prntscr.com/9vq624
large with transparent - http://prntscr.com/9vq6qv

they seem to be working exactly the same with a cut unless the post itself is long.

Your edits have completely changed the code that is why it doesn't work. You put ´{´ brackets in instead of '(' when replacing the image and you also took off the entire last line of the css.

-Brandon

Even copy/pasting the codes with none of the changes it does the same thing.

http://prntscr.com/9vr91h - I changed nothing but dropped in your code.

Code:

.post.staff-post td { background:none }
.post.staff-post { background:url(http://i39.servimg.com/u/f39/18/21/41/30/f6011.png) no-repeat left bottom #1d1d1d }

Code:

$(function() {
  $('.post:has(.staff-Tech)').addClass('staff-post');
});


Code:

<span class="staff-Tech"><img src="http://i.imgur.com/hrpynTp.png" title="Tech" /></span>

It isn't extending past the profile image but rather mirroring over the line, like a tiled image.

http://prntscr.com/9vra1p

&nothing but the java seems to have 3 lines of code for me, since my screen is large enough it stretches out entirely.

Your code here is not right
   

Code:

   .post.staff-post td { background:none }
        .post.staff-post { background:url(http://i39.servimg.com/u/f39/18/21/41/30/f6011.png) no-repeat left bottom #1d1d1d }


as you can see this part of the code is not right

       .post.staff-post { background:url(https://i.servimg.com/u/f39/18/21/41/30/f6011.png) no-repeat left bottom #1d1d1d }
You are missing the ;
It should be like this
.post.staff-post { background:url(https://i.servimg.com/u/f39/18/21/41/30/f6011.png) no-repeat left bottom #1d1d1d; } see the red ; <<

so your code is now to be

Code:

.post.staff-post td { background:none }
.post.staff-post {
background:url(http://i39.servimg.com/u/f39/18/21/41/30/f6011.png) no-repeat left bottom #1d1d1d;
}