There's a few things i want to try and do with my profile,

1: make the image not repeat and just be there in the back, 2: change the borders around the widgets (or make them transparent?) 3: How one earth can i make my pets separate? I've seen some people have them in like categories and stuff. (is it possible to put them in a scroll box?)

I guess being the major noob i am, I'd really like to start with the basic, how do i make the image in my profile the background? I used this (played around with the height and width and no dice)

1. There are a couple of CSS tricks that you can use. I think that the image may be too small, though.

Breaking down what you have below!

body { background-color: transparent; // use the background color of the first ancestor that has one, which in this case is probably HTML background-image: url(https://vignette.wikia.nocookie.net/thearcanagame/images/2/29/Shop_interior.png/revision/latest?cb=20180224095612); background-repeat: no repeat; height: 5000px; // set the height of the element (body) to 5000 pixels (missing 'px'); if 5000px is taller than the viewing browser, a scrollbar on the y-axis will be created width: 4000px; // set the width of the element (body) to 4000 pixels (missing 'px'); if 4000px is wider than the viewing browser, a scrollbar on the x-axis will be created background-position: top left; position: absolute; // positions absolutely... meaning it kind of "pops" an element out of its ancestor (for lack of a good explanation). The element is no longer relative to its ancestor(s), so it doesn't directly impact ancestral height, width, or other relative properties. Absolute is usually paired with 'top', 'bottom', 'left', and / or 'right' properties to define an exact location on the page }

You probably don't need the absolute positioning (unless there's something crazy going on in the base stylesheet of the site). Width and height won't by default apply to the background (unless its been set to cover).

2. The border for the widgets is set on the li element, class block! You can use any CSS border property to tweak it. This style will remove it altogether:

li.block { border-width: 0; }

3. Haha... so, we're cheating to create the pet categories. You actually can make it happen with CSS, but it wouldn't be supported in all browsers. You risk folks in older version of IE, in particular, not seeing the categories after spending hours of hard-earned work. It's a lot simpler to do custom HTML in a blank section. If you have an example on hand, I can help walk you through how to create something similar.

For the scroll, though! You can set any of the ancestor (wrapping) elements to have any height and a scrollable overflow.

Like...

table#content_pets { display: block; overflow-y: scroll; // 'auto' is also good if you want the scrollbar to only show if there are enough pets height: 300px; // can be set to any height }

Table elements by default are display: table and won't respect overflow.

uugggghhh it was the image being too small, for some reason on the webpage it's on though it's big like, screen big. but that site helped :3! thanks

the widgets are a bit harder for me to wrap my head around, I'm trying to make the background of them transparent? if that's possible? Thank you so much for your time ;u;

Also, I hope you don't mind me asking. Is there a way to make things fade then come back when you mouse over them? like for your pets treasure? or hide the pet stats, i know how to move them arounf but when i try to hide them the entire page messes up.