Welcome to Gaia! ::

I don't know if its just my computer or what, but I've been noticing that I can't give my panels curved edges.
I also want to resize my background image, if it's possible to do through the code. The height is too large and it really annoys me.

Profile code pasted below.


a{font-family: arial; font-size: 11px; color: teal; font-weight: normal; text-decoration: none;-}
a:hover {font-family: arial; font-size: 11px; color: silver; font-weight: normal;text-decoration:none;}

.panel {font-size: 11px; font-family: arial; font-weight: normal;padding:5px;background: black; color: white; }

.panel h2, #alerts_banner {display: none;}

.media_panel embed, .media_panel object{height: 25px; width: 30px;}
.media_panel {background: transparent; border: none;}



#gaia_header, #header_right, #header_left{background: transparent!important; }

#header_left img {background: transparent !important!; width: 0px; height: 0px; padding-left: 55px; padding-top: 25px;}

#gaia_header * { color: #FFFFFF !important; }
#gaia_header a { font-size: 10px; font-family: Tahoma !important; font-weight: normal; text-transform: uppercase; color: #000 !important; }
#gaia_header a:hover { background: #000000;
font-size: 10px; font-family: Tahoma !important; font-weight: normal; text-transform: uppercase; text-decoration:none; color: #FFFFFF !important; }

html {background-color: #;
background-image: url(http://www.hdanimewallpaper.com/wallpaper/Digimon-wallpaper-20.jpg)
background-color: black;
background-position: center;
background-attachment: ;
background-repeat: no-repeat;
margin-left: ;
margin-right: ;
background-size: 1300px
width: 1100px;
opacity: 1;}

#id_about{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 400px;}
.panel {opacity: 0.9;
-moz-opacity: 0.6;
filter:alpha(opacity=60)
-khtml-opacity: 0.6;}.panel:hover {opacity: 10.0;
-moz-opacity: 10.0;
filter:alpha(opacity=100)
-khtml-opacity: 10.0;}


.panel {border-radius: 10px 10px 10px 10px !important;
-moz-border-radius: 5px 5px 5px 5px !important;
-webkit-border-radius: 10px 10px 10px 10px !important; }

body,html,a{cursor:url(http://cur.cursors-4u.net/anime/images11/ani1002.gif), auto;}

a{ -webkit-transition: padding-left 150ms ease-out;
-moz-transition: padding-left 150ms ease-out;}
a:hover { padding-left: 10px; }

::-webkit-scrollbar-thumb:vertical { height:10px; background-color: gray; }


::-webkit-scrollbar { width:5px; height:5px; background: black; margin-right:5px; }


.details_panel {
background-color: skyblue;
filter:alpha(opacity=70)
-moz-opacity:0.6;
opacity:0.6;
-khtml-opacity:0.6;
}

Horntastic's avatar

Dapper Phantom

What browser are you using? I see rounded corners.
Pretty much anything that's fully updated will show the rounded edges.
IE8 does not support them, but IE9 should.
Btw, you don't need all the different -moz/webkit-border-radius stuff, it's standard now so you only need border-radius.
(also you don't need the !important settings)

You can change the background image using the background-size property.
Ex:
html {
background-size: width height;
}
Where width and height can be a pixel value, a percentage, or "auto".
If you define one as a pixel value or a percentage and the other to auto, the auto one will be scaled to match.
Ex:
html {
background-size: auto 100%;
}
When deciding on the right size, you may want to consider that not everyone's monitor is the same size.

By the way, your cursor has whitespace on the top and left of the image, so its arrow doesn't actually line up with where that part of the cursor is, and it makes your profile very difficult to use. You can download, trim, then re-host the image, or find another one that's set up better.
Also, you need to add the Gaia logo back in the navigation header, you can't take that out.
(see rules sticky in this forum and search for "navigation bar" for more info)
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
Digivolved

^-- If you're talking about your current profile, you have no panels on there.

Horntastic
html {
background-size: auto 100%;
}

^--You don't have to specify both the x-and-y-axis. If the second value is omitted it's the same as 'auto', much easier when just saying '100%'.
Horntastic's avatar

Dapper Phantom

Knight Yoshi
Digivolved

^-- If you're talking about your current profile, you have no panels on there.

Horntastic
html {
background-size: auto 100%;
}

^--You don't have to specify both the x-and-y-axis. If the second value is omitted it's the same as the given value, much easier when just saying '100%'.

If you say only background-size: 100%; it seemed to be the same as background-size: 100% auto; which was different from auto 100%; ?
His background was different earlier, and he had a single panel with rounded corners.
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
Horntastic
Knight Yoshi
Digivolved

^-- If you're talking about your current profile, you have no panels on there.

Horntastic
html {
background-size: auto 100%;
}

^--You don't have to specify both the x-and-y-axis. If the second value is omitted it's the same as the given value, much easier when just saying '100%'.

If you say only background-size: 100%; it seemed to be the same as background-size: 100% auto; which was different from auto 100%; ?
His background was different earlier, and he had a single panel with rounded corners.


Actually, I made slight corrections to my previous. The omitted value is treated as auto to keep the aspect ratio, but basically if you say 'background-size: 100%' the background will be 100% for both values.

From the W3C
Quote:
An ‘auto’ value for one dimension is resolved by using the image's intrinsic ratio and the size of the other dimension, or failing that, using the image's intrinsic size, or failing that, treating it as 100%.
Horntastic's avatar

Dapper Phantom

Knight Yoshi
Horntastic
Knight Yoshi
Digivolved

^-- If you're talking about your current profile, you have no panels on there.

Horntastic
html {
background-size: auto 100%;
}

^--You don't have to specify both the x-and-y-axis. If the second value is omitted it's the same as the given value, much easier when just saying '100%'.

If you say only background-size: 100%; it seemed to be the same as background-size: 100% auto; which was different from auto 100%; ?
His background was different earlier, and he had a single panel with rounded corners.


Actually, I made slight corrections to my previous. The omitted value is treated as auto to keep the aspect ratio, but basically if you say 'background-size: 100%' the background will be 100% for both values.

From the W3C
Quote:
An ‘auto’ value for one dimension is resolved by using the image's intrinsic ratio and the size of the other dimension, or failing that, using the image's intrinsic size, or failing that, treating it as 100%.

I find that in many cases at least on V2 profiles you really have to do 100% 100% or it will just scale to maintain the aspect ratio, with the width being 100% and the height being based off that. Try on OP's profile - "100%" = "100% auto" =/= "100% 100%". That quote seems to support this - first it attempts to maintain the aspect ratio, but failing all else it defaults to 100%.

Oh, and OP - your avi isn't in the little box you made for it on my monitor.
You can't combine the centered background with those floating images, they don't center.
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
Horntastic
Knight Yoshi
Horntastic
Knight Yoshi
Digivolved

^-- If you're talking about your current profile, you have no panels on there.

Horntastic
html {
background-size: auto 100%;
}

^--You don't have to specify both the x-and-y-axis. If the second value is omitted it's the same as the given value, much easier when just saying '100%'.

If you say only background-size: 100%; it seemed to be the same as background-size: 100% auto; which was different from auto 100%; ?
His background was different earlier, and he had a single panel with rounded corners.


Actually, I made slight corrections to my previous. The omitted value is treated as auto to keep the aspect ratio, but basically if you say 'background-size: 100%' the background will be 100% for both values.

From the W3C
Quote:
An ‘auto’ value for one dimension is resolved by using the image's intrinsic ratio and the size of the other dimension, or failing that, using the image's intrinsic size, or failing that, treating it as 100%.

I find that in many cases at least on V2 profiles you really have to do 100% 100% or it will just scale to maintain the aspect ratio, with the width being 100% and the height being based off that. Try on OP's profile - "100%" = "100% auto" =/= "100% 100%". That quote seems to support this - first it attempts to maintain the aspect ratio, but failing all else it defaults to 100%.

Oh, and OP - your avi isn't in the little box you made for it on my monitor.
You can't combine the centered background with those floating images, they don't center.


I would say it just falls on what's the dimensions of the image to begin with and when stretching it, how big is it going to stretch (or shrink if you're using a large image). I mean, I can see how using '100% 100%' would be good, because you know it'll fill the entire area perfectly, no more and no less. But it can also distort the aspect ratio of the image, for instance if it's significantly wider than it's height. It comes down to the initial dimensions and what you want to stretch it to. You can also specify keywords 'contain' and 'cover' and see how well that works.

‘contain’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
Horntastic's avatar

Dapper Phantom

Knight Yoshi
You can also specify keywords 'contain' and 'cover' and see how well that works.

‘contain’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

Oh, that's neat, thanks.
Knight Yoshi




No, I'm not talking about my current one. I forgot I had changed it. Let me change it back.
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
Horntastic

You can't combine the centered background with those floating images, they don't center.

Well... technically you can... but It'd be a bigger pain in the a** than it's worth. First set the '#pictures_container' element to be relatively positioned, set the width the same as the '#columns' element, apply a margin and then offset the avatar from that.
Horntastic's avatar

Dapper Phantom

Knight Yoshi
Horntastic

You can't combine the centered background with those floating images, they don't center.

Well... technically you can... but It'd be a bigger pain in the a** than it's worth. First set the '#pictures_container' element to be relatively positioned, set the width the same as the '#columns' element, apply a margin and then offset the avatar from that.

Hmm, I hadn't thought about approaching it like this, here I was trying to force the positionings on the actual images rather than their container. *facedesk*
That method works really well, and then you don't have to mess with the image positions, you just use the editor to drag & drop them.
For kicks I added one of the default wing images to my profile, and it lines up regardless of page width.
*gets too excited about this stuff but w/e*
(plus this could really help with the Wix code I provide, everyone and their dog tries to use floating images with their /centered/ Wix)
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
Horntastic

(plus this could really help with the Wix code I provide, everyone and their dog tries to use floating images with their /centered/ Wix)


Don't give that to those Wix noobs. More people need to use less Wix.
Horntastic's avatar

Dapper Phantom

Knight Yoshi
Horntastic

(plus this could really help with the Wix code I provide, everyone and their dog tries to use floating images with their /centered/ Wix)


Don't give that to those Wix noobs. More people need to use less Wix.

I think I'm in this too deep to go back ;w;

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games