Close X

** BACKGROUNDS ** aka images in different areas on your page - - NOTE: This thread is for BACKGROUND questions only!

  
(Page 1 of 17: Viewing entries 1 to 10)  
Page Links: 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  
Backstep

B the change U- want to C in the- world
 
 
Barked: Thu Aug 4, '11 8:02am PST 
Placing backgrounds on your page is the easiest code to do. The code that places the backgrounds is the same for all areas - i.e. containers. Each container has it's own name. The major containers on your page are as follows:

body
#wrapper
#row_Findsection
#body-content
#conten tTable
#topFrame
#profileContent
#bottomFrame

The formula to put a background in a container is broken down into three parts:
name { what you want to do: how you want it done; }

or in real terms:
selector { property: value; }
body { background: url("name.file"); }

Thus, you have the following for all container names. The containers are listed from the outside in and top down, or in other words #row_Findsection container is inside #wrapper container and #topFrame container is over #profileContent container.

body { background: url("name.file"); }
#wrapper { background: url("name.file"); }
#row_Findsection { background: url("name.file"); }
#body-content { background: url("name.file"); }
#contentTable { background: url("name.file"); }
#topFrame { height: XXpx; background: url("name.file"); }
#profileContent { background: url("name.file"); }
#bottomFrame { height: XXpx; background: url("name.file"); }
NOTE: A height must be specified for the containers #topFrame and #bottomFrame.

To get more information on each container, to see where each container is, and to get width information to make your images for that container - go to page 2 of the Pawsome Pages Tutorial by CLICKING HERE.
Dante

Mom`s- Blue - Boy!!
 
 
Barked: Sat Sep 10, '11 6:25am PST 
Hi guys,

I`m having a little trouble with my sisfur`s stats box & gift box. I was wondering if someone could help me.

My sisfur T.J, has images in both boxes, and they work.. But the images aren`t the right size, or something?? The images are there, but they look stretched, or fuzzy somehow.. Could someone take a look and tell me where I`m going wrong..

For some reason the images on MY profile (stats & gift boxes), look good.. It`s just T.J`s page..


My Sisfur T.J`s page

Thank you for any help you can give me..
Webster

Eternally in- love with- Katie...
 
 
Barked: Sat Sep 10, '11 12:43pm PST 
Hi, Dante! wavewave %Thanks for providing the link to your sister's page. big grin

The code is the same for those containers on both of your pages; only the URL for the image is different. And it's doing exactly what it should be doing.

The problem is that you are using a huge image for a small space. The code does not include any positioning properties, so the space is filled, by default, from the upper left corner of the image.

If you compare what you see in the Stats and Gift boxes with what you see in the upper left corner of the page (and of the image alone), you'll see that they are the same.

Those boxes on your page look better because that portion of your background image just happens to be better suited for that small space.

For both pages, you should use an image that is better sized for those smaller boxes. Find an appropriately-sized area in that large image that you like, and crop off the rest. Save it with a new name, upload it to wherever you store your images, and use that URL for the Stats and Gift boxes. You don't want to make it too small, because those containers will grow according to whatever is in them at the time. But using such a large image not only makes it look odd, as you noted, but also means that it slows down the loading of your page for something that doesn't even show up.

Your code - for both pages - is fine! way to go You just need a smaller image.

Dante

Mom`s- Blue - Boy!!
 
 
Barked: Sat Sep 10, '11 1:16pm PST 
Thank you Webster! hail

I resized my large background image into a smaller size, and you were right Webster. T.J`s page now loads much faster....

What size should I make the new image for her gift & stats boxes?

Edited by author Sat Sep 10, '11 1:31pm PST

Webster

Eternally in- love with- Katie...
 
 
Barked: Sat Sep 10, '11 3:09pm PST 
Hmm, maybe I should clarify what I said..? The main (BODY) background image was actually okay as it was, because it was used for a large area. I meant to suggest only making a smaller image for the smaller containers.

A width of 400px should work well for both boxes. As for the height, right now 120px would be sufficient, but more prezzies on your page would expand the box(es), so you'll want to plan ahead! I would suggest at least 200px, up to about 400px.

You used the word "resize"... I don't know whether you meant simply changing the size by cropping the image, or - as the term is usually used in image editing programs - reducing the dimensions without cutting anything off. Either way would work, of course, but the results would be quite a bit different in appearance. I would suggest trying it both ways, so you can choose the image that looks best in those locations. big grin
Dante

Mom`s- Blue - Boy!!
 
 
Barked: Sat Sep 10, '11 4:33pm PST 
WoooHooo! I did it! Thank you Webster.. T.J`s page looks great now!

By re-sizing the (BODY), I meant that I changed the dimensions without cutting anything off. When I went back to look at T.J`s profile. The (BODY) looked fuzzy to me as well. But maybe that`s just the image I used. Since re-sizing it -- it looks pretty much the same! Mol`

From my understanding, I think you mentioned that the larger the image -- means the longer the page will take to load? Since re-sizing the (BODY), now T.J`s page loads pretty fast. I didn`t realize that the size of an image would affect things like that.

Edited by author Sat Sep 10, '11 4:37pm PST

Webster

Eternally in- love with- Katie...
 
 
Barked: Sat Sep 10, '11 5:07pm PST 
Well... it CAN make a big difference, but the amount you changed that body background pic was not so drastic, so I don't think that change by itself would have been a big factor. More likely it was quicker when you loaded it later because the image file was already in your browser's cache so that sped things up. And then using smaller images for the boxes would help because of the reduced size of the files.

Having a big file or two to load isn't such a bad thing by itself, but you want to avoid using really big images where the large size doesn't serve any useful purpose.

Perfect choice for the part of the image to use in those boxes! applauseapplause

Edited by author Sat Sep 10, '11 5:09pm PST

Dante

Mom`s- Blue - Boy!!
 
 
Barked: Sun Sep 11, '11 6:55am PST 
That makes sense to me Webster...

So much to learn about codes & stuff. laugh out loud shrug

Thanks again for all your help.
Tigger ~- Loved- Forever

Whatever, I do- what I want!
 
 
Barked: Thu Sep 15, '11 8:20am PST 
I would like to have a transparent background on my page. Can you lead me to the directions and code for that? smile

Thanks so much!
Tigger
Pharaoh- Purrince Tao- DIT#33

Qreus Mynd
 
 
Barked: Thu Sep 15, '11 11:29am PST 
i cant make a URL fur my background and also the headers that everyone has their names written on!! if u go see my furend Blade's page u'll see what i want!! but i dont know how to do that!! can u help me, webster??
  (Page 1 of 17: Viewing entries 1 to 10)  
Page Links: 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17