Dynadot — .com Registration $8.99

Background Image

Spaceship Spaceship
Watch

a1nerd

Established Member
Impact
3
My project www.parkgrubbs.com i want to add this http://parkgrubbs.com/subpage.gif image in the background of my subpage so i can put a table on top of it. I have two problems.

1. I dont know how to add the image in the background of the page. I want to keep the subpage like the main page but have the image http://parkgrubbs.com/subpage.gif in the background.

2. The file size for the image is half a meg how do i work with that or somehow make it smaller so it wont load very slow in the browser.
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
AfternicAfternic
First off take your image and turn it into a png file. A png will load much faster and it won't lose much. For background image you can use css and the code would be

background-image: url(images/yourimage.png);
background-repeat: none;

If you know css that would be the two lines of code you would have to call. If you don't know css I can set this up for you for a small fee. PM me and let me know.
 
0
•••
How much?


TheComputerGeek247 said:
First off take your image and turn it into a png file. A png will load much faster and it won't lose much. For background image you can use css and the code would be

background-image: url(images/yourimage.png);
background-repeat: none;

If you know css that would be the two lines of code you would have to call. If you don't know css I can set this up for you for a small fee. PM me and let me know.
 
0
•••
i thought .gif file is the smallest and fastest to load
am I wrong?
 
0
•••
Roughly, do this:

<table style="background-image: url(http://parkgrubbs.com/subpage.jpg); background-repeat: none;">

and read this:
http://www.w3.org/TR/CSS1
To learn style sheets.

Use a jpg not a png for best compression. I use GIMP (http://gimp.org). Converting your GIF to PNG still is over 400k with GIMP compression set at 9 for the PNG. Converting your GIF to JPG in GIMP with quality set at only 20, gets your file size down to 38K. (to be honest, I don't know if GIMP is the best PNG converter)

IMPORTANT: Normally, you should not use JPEGs for line art or drawings (like yours). This is because JPEGs are intended for shrinking photographs. They are "lossy". This means with every compression of the same image, more image information is lost. In a photo, this is barely noticeable. On a line drawing, you will see "fuzziness" around the edges of your lines. This fuzziness is unacceptable and is the mark of a bad ignorant designer who doesn't understand graphic formats. But this time you are in luck. Your drawing is more complex. It is a wood grain pattern, with jagged text over top of it. The fuzziness is barely even noticable with JPEG. Therefore, IMHO, the best choice for your case (a rarity).

You will run into a problem using a table to host a background image because the table size is bound to be different from your image. Ideally you will not use a table for formatting, but will solely use style sheets. My website has a detailed explanation on how to use DIV blocks instead of tables for your website layouts - if the CSS link above is not clear enough.

After saying all that, I recommend hiring someone (but not me) if you don't have the time to dive into it at these depths.

Have fun.

I think there are still legal issues with gif but I don't know what they are. PNG was created to replace gif to some degree.

But it also depends on what kind of image you are using and what the purpose of the image is.

In brief:
GIF is 256 paletted with a reduced palette if possible (fewer colours, so fewer bits per pixel). This means you only have up to 256 colours to choose from, but only 1 byte (or 8 bits) per pixel (generally speaking).

PNG is 24 bits per pixel with basically unlimited colours. Bpp (bits per pixel) for a PNG can be reduced however to save images with a smaller number of colours.

With both GIF and PNG, there is a compression applied to the raw pixel data.

In the end, I find, the difference between PNG and GIF file size is neglible so I use PNG unless I want transparancy. PNG supports transparancy like GIF does, but IExplorer doesn't show PNG transparancy correctly.

PNG can works well with line drawings and photographs, but JPEG is even better for photos (with respect to compression).
 
0
•••

We're social

Unstoppable Domains
Domain Recover
DomainEasy — Payment Flexibility
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back