Page 1 of 1

Need some Help

PostPosted: Wed Mar 11, 2009 4:48 pm
by bilsen
Hi all,

I need some help in this gallery:

I modified this from Thierry's Baltimore CSS. In the bottom right corner is a picture that I want to substitute for the Baltimore image as the background.

Question - How do I get it to fill the entire background instead of just sitting in the corner? I can move it to the center or repeat but I cannot get it to resize. I even went back and doubled the size of the upload but no dice.

Any help would be appreciated.

Re: Need some Help

PostPosted: Wed Mar 11, 2009 7:36 pm
by dang
If the image isn't resizing, it's because you need to specify the size. Add original to the end:
Code: Select all

On a side note, using large images can cause slow downs when people view your page. Be careful about kb, and use the minimum possible for your photo to still look good. I'd also suggest viewing your gallery with various screen resolutions to be sure people aren't required to scroll sideways. :wink:

Re: Need some Help

PostPosted: Wed Mar 11, 2009 9:14 pm
by bilsen
Thanks dang. I tried it and it worked. Do you have any idea as to the right size (ie: 600x900 at 96 dpi) to fit on a pbase page?

Also, thanks for the reminder about loading time. It may not be worth the effort but I'll check.

Re: Need some Help

PostPosted: Thu Mar 12, 2009 12:32 am
by dang
Hi John,
You're welcome, glad it helped. Size depends on the screen resolution of the viewer. If someone uses a resolution of 800 x 600 pixels, then obviously that sized image would cover the area. But someone running 1024 x 768 would require the a larger image. If there's a way to make a background image resize to fit various screens, I can't recall it. (You might possibly find more info doing a "Google" search for CSS html sites)

This is the reason it's best to use an image that works well when repeated. Your other option is to place the image "centered":
Code: Select all
top center no-repeat fixed;
Or, use a smaller image as a logo within a corner rather than a full scene.

If you use an image larger than the viewers screen, as mentioned before, it might cause them to scroll (though you can check). This might only be if the image is located in the description html though... sorry, haven't played with large backgrounds for awhile. But, this is why I suggest looking yourself.

To change screen res, close all windows and "right click" your open screen. A drop down box appears. Click "Properties", then the "Settings" Tab. You'll see where to change settings. :wink:

Lastly, it's also good to check using different browsers. This and checking with different res is something everyone should do anytime they fix a new sheet. While a page may look great with Firefox, and Safari... Internet Explorer reads code differently, and may not display properly.

Primary thing is to enjoy playing with it, and not become frustrated. Pbase is allowing us to hack our pages, and sometimes it works differently when over-writing Pbase code than when doing a standard page for web. The good thing is, there's lots of info which can be found in Srijiths Pbase Wiki, searching this forum and other members info.

Good luck, and have fun!

Re: Need some Help

PostPosted: Thu Mar 12, 2009 1:34 am
by bilsen
Dang that's great info, Dang (sorry :? ).

Anyway, i'm usually pretty good with computers but this CSS is giving me mental cramps.

Thanks again.