how to make a pic fit perfect on profile?

[Left Bird]

xX_KawiiShiroTora_xX

Left Bird

xX_KawiiShiroTora_xX

ok so if you go to my profile it is white everywhere else. Do you happen to know how to make it full and not repeat?

Sorry for the hassle sweatdrop

Aw, this is going to be harder. Unfortunately, there isn't any CSS code that'll stretch a background image (if I could put it in an image tag, that'd be a different matter). I'm looking into alternate possibilities... This might take me a bit.

hey its cool you dont have to do any research, ill just let it repeat c:
thank you for all your help heart

*laughs* Are you kidding me? After every guide I've found claims it's not possible? *pushes her glasses up her nose* There's no way I'm letting a challenge like this go! As long as you'll stick with me for a couple minutes more, we'll see if we can beat this thing! biggrin

I got it to work on Gaiatools, so... *crosses fingers*

[Nerdy Poptart]

Left Bird

xX_KawiiShiroTora_xX

ok so if you go to my profile it is white everywhere else. Do you happen to know how to make it full and not repeat?

Sorry for the hassle sweatdrop

oh and thank you for all your help

*GASP* Okay, after a lot of trial and error, I think I found a way that MIGHT work. However, it's going to be a little tricky. First of all, I can't use that image the way it is now. I mean, set as a background I can't manipulate it. You need to get it on your profile as a regular image. Can you get put it up the same way you have your sister's avi up? (don't worry about where you place it, I'll manipulate it with the code once it's up)

Once you have it up, I can pull the ID for it and get you the code.

(If this works, I'm sooo going to save this code so I never forget it... xd )

okie dokie i did it

[Left Bird]

xX_KawiiShiroTora_xX

Left Bird

xX_KawiiShiroTora_xX

ok so if you go to my profile it is white everywhere else. Do you happen to know how to make it full and not repeat?

Sorry for the hassle sweatdrop

oh and thank you for all your help

*GASP* Okay, after a lot of trial and error, I think I found a way that MIGHT work. However, it's going to be a little tricky. First of all, I can't use that image the way it is now. I mean, set as a background I can't manipulate it. You need to get it on your profile as a regular image. Can you get put it up the same way you have your sister's avi up? (don't worry about where you place it, I'll manipulate it with the code once it's up)

Once you have it up, I can pull the ID for it and get you the code.

(If this works, I'm sooo going to save this code so I never forget it... xd )

okie dokie i did it

Alright, *gets the id* it's a tiny bit different than anticipated, so I might have to make some adjustments, but try adding the following code to the bottom of your Theme Override box:

#picture_446385{
top: 0 !important;
left: 0 !important;
z-index: -500 !important;
width: 100% !important;
height: 100% !important;
}
#picture_446385_content{
z-index: -500 !important;
width: 100% !important;
height: 100% !important;
}

[Nerdy Poptart]

Left Bird

xX_KawiiShiroTora_xX

Left Bird

xX_KawiiShiroTora_xX

ok so if you go to my profile it is white everywhere else. Do you happen to know how to make it full and not repeat?

Sorry for the hassle sweatdrop

oh and thank you for all your help

*GASP* Okay, after a lot of trial and error, I think I found a way that MIGHT work. However, it's going to be a little tricky. First of all, I can't use that image the way it is now. I mean, set as a background I can't manipulate it. You need to get it on your profile as a regular image. Can you get put it up the same way you have your sister's avi up? (don't worry about where you place it, I'll manipulate it with the code once it's up)

Once you have it up, I can pull the ID for it and get you the code.

(If this works, I'm sooo going to save this code so I never forget it... xd )

okie dokie i did it

Alright, *gets the id* it's a tiny bit different than anticipated, so I might have to make some adjustments, but try adding the following code to the bottom of your Theme Override box:

#picture_446385{
top: 0 !important;
left: 0 !important;
z-index: -500 !important;
width: 100% !important;
height: 100% !important;
}
#picture_446385_content{
z-index: -500 !important;
width: 100% !important;
height: 100% !important;
}

IT WORKED!!! THANK YOU SO MUCH!!!!!!

can you tell me how you got the numbers for the picture like how it says #picture_446385
so if i want to change the picture it will still work?

[Left Bird]

*jumps in the air and does a dance* CELEBRATE!!! biggrin

Alright, yeah, actually, because I'm worried if you ever change your profile, it'll change the ID of the picture. xd I'm using Firebug, which allows me to find the ID instantly, but you SHOULD be able to find it (with some hassle) by...

1. Right-clicking on your profile and selecting "View Source" or "View Page Source" or something close to that (depending on what browser you're using).
2. Find where it says "<div id='pictures_container'>", you'll notice that under that there are a couple "div" tags... *copies an example below* The important thing is to find which of those "div" tags has an img inside it with a src = the URL of the image you want to use.

<div id="pictures_container">
<div id="picture_446385" class="decoration picture_decoration resizable" style="top:51px;left:217px;z-index:51; height:443px;width:1022px;;" >
<img id="picture_446385_content" src="http://i796.photobucket.com/albums/yy244/hardyzfan4life/bleh7.jpg" alt="picture" width="1022" height="443" />
</div>
<div id="avatar_226632" class="decoration avatar_decoration resizable" style="top:22px;left:30px;z-index:1; height:150px;width:120px;;" >

<a href="http://www.gaiaonline.com/profiles/xxlexie-hardy1xx/17386697/" title="XxLexie-Hardy1xX"><img src="http://a2.cdn.gaiaonline.com/gaia/members/ava/c9/4c/3916908a1094cc9.png?t=1303700865_6.00_01" alt="XxLexie-Hardy1xX" id="avatar_226632_content" width="120" height="150" /></a>

That's a snapshot of something like what the code might look like. Find the img tag with...

src="http://i796.photobucket.com/albums/yy244/hardyzfan4life/bleh7.jpg"

What you want to find is the ID of the img tag with that source! In this case... id=picture_446385_content

3. If you copy that ID into the code I gave you, it should work. Note, there are 2 parts to the code: The top half (#picture_446385) is the ID of the DIV container! And the bottom half (#picture_446385_content) is the ID of the IMG tag! You'll need both to make it work!

Sorry if that's a little confusing. It's kind of complicated with so much code all over the place. Let me know if you have any more problems! biggrin *goes to bed now*

[Left Bird]

xX_KawiiShiroTora_xX

IT WORKED!!! THANK YOU SO MUCH!!!!!!

can you tell me how you got the numbers for the picture like how it says #picture_446385
so if i want to change the picture it will still work?

Alright, I officially lied about going to bed. xd At the last second I realized I needed to double-check some minor problems and there's no way I'm going to get to sleep while worrying about whether there's something I missed... (And I'd hate to have people think I did sloppy work)

GOOD NEWS: It seems to work in both Firefox AND IE, so as far as I can tell, it's multi-browser compatible (can't check Safari and Chrome from here, but if it works in the first two, I'm not going to haggle over it).

BAD NEWS: It doesn't work on scroll. That is to say, for screen sizes that are smaller than your profile, when the user scrolls up, the picture scrolls up with it and leaves a blue hole at the bottom... *twitch* Luckily, it seems to be an easy fix...

Just missing a "position: fixed" to keep the image in one place. So use the following code instead:

#picture_446385{
position: fixed;
top: 0 !important;
left: 0 !important;
z-index: -500 !important;
width: 100% !important;
height: 100% !important;
}
#picture_446385_content{
z-index: -500 !important;
width: 100% !important;
height: 100% !important;
}

Tweak your code one last time for me and then I promise I'll take you off friends and leave you in peace... heart

(NOW she goes to sleep...)

[Jitaroo]

Left Bird

*Cough* Or simply:
body, html {background-size: 100%; -moz-background-size: 100%;}
Suppose it doesn't work for every browser, but it's one of the more simple codes to just slot in.

Image stretching isn't really one of those things I set out to endorse, actually I'm somewhat convinced that's why most who code just say it isn't possible. Stretching makes a profile look bad for those on a larger screen, which is why it's probably always recommended to either find a image that merges into a background or a good repeating background.

[Left Bird]

Jitaroo

Left Bird

*Cough* Or simply:
body, html {background-size: 100%; -moz-background-size: 100%;}
Suppose it doesn't work for every browser, but it's one of the more simple codes to just slot in.

Image stretching isn't really one of those things I set out to endorse, actually I'm somewhat convinced that's why most who code just say it isn't possible. Stretching makes a profile look bad for those on a larger screen, which is why it's probably always recommended to either find a image that merges into a background or a good repeating background.

Oh! Interesting! I figured there had to be an easier way! Thanks for sharing. I'll keep that in mind, though I definitely don't like that it only seems to work in IE 9? (half my friends use 7 and 8 ) @_@ I found another thread that suggested some weird thing that might work... But that also seemed to only work in certain browsers. So far I like my solution best, but I REALLY like learning more about coding.

The profile discussion is amazing sometimes. I've seen people suggest ideas I never even thought of. heart *excited*

I definitely agree with what you said about sizing images though. We get the opposite at work a lot--people who put images up right off their camera at 5000px and then tell the code to shrink them to 150px, and then we have to go resize them properly with Image Editing tools. In any case, now that I know I CAN do it I'll happily go back to you-SHOULDN'T-do-it. xd

Thanks for the advice!

[Jitaroo]

Left Bird

Ah yes. XD Definitely an easier way, but yes your way would most likely be more compatible with everything. :3 Background size is CSS3, so it's only going to work on some browsers that are compatible with it. PD can be amazing in thinking up new ways indeed. X3

Lmao. I hate it when I find overly sized images on web pages. *Face/palm.* It'd be fine if it was only a little larger than what they're shrunk to, but no~. Oh well. :'D Glad you're one of those that go to fix it. But yes, definitely a can, but a shouldn't a lot of the time. XD;

[Darkness Nekais]

Um, Is this for a certain profile or can this work for anyone?

[Roarfare]

Left Bird

umm if it's not too much do you mind helping me with my theme too?

[Left Bird]

Darkness Nekais

Um, Is this for a certain profile or can this work for anyone?

Next time quote me please. I only just saw this, and only because the guy under you quoted me. xd (I don't get notifications unless I'm quoted)

Wow, it's been awhile since I did this. Um, here's the thing. The IDEA will work for anyone using v2 Current profiles, but the selector will be different for everyone. So the picture id number will have to be changed for it to work for you:

#picture_446385{
position: fixed;
top: 0 !important;
left: 0 !important;
z-index: -500 !important;
width: 100% !important;
height: 100% !important;
}
#picture_446385_content{
z-index: -100 !important;
width: 100% !important;
height: 100% !important;
}

If you're using Chrome, it's pretty easy to find. Once you've put your background image into an image container, just right-click on it and select "Inspect Element". It should bring up a pane at the bottom of your screen and immediately highlight the code that's creating the image. Then you just need to copy/paste the number.

If you have problems, I can help. But you'll need to add your image to your profile first (not in the background).

[Left Bird]

Roarfare

Left Bird

umm if it's not too much do you mind helping me with my theme too?

Yeah, no problem. I can't pull the image ID though until you put the image up on your profile. Right now you have the image in your background, and while it is possible to resize it from there, the code for that way isn't reverse compatible with older browsers (I refuse to use that way). Add the image to your profile please (don't worry about whether it overlaps anything right now--the code will fix it later).

[Roarfare]

Left Bird

Roarfare

Left Bird

umm if it's not too much do you mind helping me with my theme too?

Yeah, no problem. I can't pull the image ID though until you put the image up on your profile. Right now you have the image in your background, and while it is possible to resize it from there, the code for that way isn't reverse compatible with older browsers (I refuse to use that way). Add the image to your profile please (don't worry about whether it overlaps anything right now--the code will fix it later).

oh it's okay nvm i figured it out thanks anyways though biggrin