Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

gif image from MS Paint -set as background

Status
Not open for further replies.
Andy128

Andy128

Technical User
Oct 15, 2005
13
0
0
US
I am using Trellian as a web editor. I created an image in MS Paint and saved it as a gif. When I tried to set it as the back ground- it makes it tiled. Is the problem with the way I made /saved the image? Image size? Or is it a simple code problem?

Thanks-
Andy
 
Sort by date Sort by votes
By default in html, background images tile. If you do not want that, you should specify. Considering it is the body you're putting background on, try this:
Code: 
<body style="background: blue url(myBackgroundImage.gif) no-repeat;">
When you're satisfied, move the style into separate stylesheet. Make sure the color preceding the url is something similar to your image color (in my case it was blue), so that people who cannot load the image can still read the text.
 
Upvote 0 Downvote
Vragabond-
Thanks for the reply. below is how it appears when I open the html page in notepad and Trellian.

<BODY lang=EN-US style="tab-interval: .5in"
background="Pics\Back ground.GIF">

I have tried plugging it in as you suggested and it hasn't seemed to work. As I am totally new to html- I am sure it is something I am doing. Could you show me how it should look?

Andy
 
Upvote 0 Downvote
Uh-oh. First, a couple of observations.
1. In html, folder delimiter is forward slash, not backslash.
2. For the best compatibility do not put spaces in the names of files you publish on the internet.

Now, providing your code, it should look something like this:
Code: 
<BODY lang=EN-US style="tab-interval: .5in; background: blue url(Pics/Back%20ground.GIF) no-repeat;">
Again, if your background is not primarily blue, change that color to whatever will make the text on the page readable if no picture shows.
 
Upvote 0 Downvote
Vragabond,
Tried exactly as you suggested. It put the gif in the left upper corner. Currently, there is nothing assigned to the back ground and the lettering is black. I thank you for your help and will continue to work on it.

Andy
 
Upvote 0 Downvote
You never said where you wanted your background. You said you don't want it tiled. My code did that. If you want to position it, you can do so after the url declaration, e.g.
Code: 
<BODY lang=EN-US style="tab-interval: .5in; background: blue url(Pics/Back%20ground.GIF) center center no-repeat;">
 
Upvote 0 Downvote
Vragabond,
Thanks- sorry for not being clear. I did as you sugested and it worked the gif was centered directly in the middle (or center) of the page. So I guess I will have to create a rather large gif to envelope the whole web page. I had drawn a pic with paint that had colorful borders with the center clear. I figured I could then use that pic as a background for the whole web page- at least that was what I was trying to do. Is there a code to expand the size of the gif to due just that? Or, will I have to create a page size picture? Thanks again for you help and patience.

Andy
 
Upvote 0 Downvote
You can either tile (repeat) the background, horizontally, vertically or both or not. You cannot strecth it. I am wondering though if your approach is the best. Basically, you need not use center center for positioning, you can use pixels, you can even apply background to a specific element rather then the whole page. This would be much easier if we saw the thing. If it is only borders though, have you considered making borders to whatever container holds the page? Can you show us your page? Or at least the image that you use for background.
 
Upvote 0 Downvote
Vragabond,
desktop.webhop.org

Click on the family page. The green border is what I made in MS Paint and wanted to apply as the page background. I did it by making the picture attributes 1200X1600 pixels and then saved it. It worked rather well. Don't laugh too hard as I am just getting into the website building thing and expirementing with html. I run Apache off a home computer and therefore want to keep graphics to a minimum so as not to tax my bandwidth. I also provide a live feed of a our local police scanner with the same computer. So you can see- simplicity and bandwidth conservation is a must. Thanks for all the help.

Andy
Any critique or suggestions welcomed.
 
Upvote 0 Downvote
Andy,

I don't see any pictures loading from the Family page, let alone an example border, so cannot say for sure if this suggestion will work or not...

If all you want is a green border, consider doing this with CSS borders and avoid images altogether.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
this is in the source code of the page:

<body lang=EN-US style="tab-interval: .5in" background=Pics\paper1.jpg>

it's not the HTML code you were suggested to use:

<BODY lang=EN-US style="tab-interval: .5in; background: blue url(Pics/Back%20ground.GIF) center center no-repeat;">
 
Upvote 0 Downvote
Dear Andy,

please do not understand this post as bashing your work but as a friendly advice. Basics of HTML are not that hard. Mustering up a site that looks like yours will not take you too long if you write all the code yourself. The benefit of that compared to whatever you're using right now: one fifth (or even less) of the current size. That means five people accessing the page will take as much bandwidth as one currently does. Whatever the editor you're using is (it says Word 10), it generates ridiculously bloated code which increases bandwidth and load times and does not help you at all to learn html. If you go to W3 Schools you will notice that producing simple html is really easy.

Now, to get to whatever is bothering you. First of all, the background does not show in browsers other than IE, because you're using backslashes instead of forward slashes. I told you that will not pass. Change that as soon as possible.

As for your border -- other than a picture, you cannot recreate a border like that. Question is, do you want to? Current solution looks terrible on larger screens (background starts repeating again, eventhough I showed you how to make it not repeat) and it looks awfully out of place. I would personaly scrap the background image and go for something different. If you want to use something like that, I guess I would scrap the top part (or try achieving it differently) and try tiling vertically the green border down left side. Anyway, for something like you have right now, I don't think it is worth losing bandwidth on.
 
Upvote 0 Downvote
Kevin, Billy and Vragabond-
Thanks- and no I do not take it personal. I appreciate all the help you have given. Yes- I am using MS Word 2002 to create my pages and then save them as web pages. I have noticed the excess html also- but being new, have not a clue what I can cut.

As to the back and forward slashes. I did do as you say but in Trellian- it changes them upon saving. In fact- trying to input the code as suggested -it was immediately changed upon saving.
So it appears that things only work in IE. This I will have to work on. Basically I was looking for a free program that would help me establish a web site with a small learning curve on my home machine. I will look into what you have suggested and hopefully be back in short time to show my progress. Again- thank you.

Andy
 
Upvote 0 Downvote
I liked 1stPage 2000 for HTML editing (Its not WYSIWYG though but it's free and has lots of nice features). I see they have a new product too, FirstPage 2006 (in beta).


If you insist on a WYSIWYG editor search the free software sites and see what you can find or if anyone has recommendations. I never use them (well, I did use Dreamweaver but thats expensive and the learning curve is a bit steep too).

If you download the Mozilla browser it comes with a builtin editor thats pretty easy to use and seems to function well, although I've never used it much myself.


BTW, when I look back at some of my first websites I thought were so cool I can't believe how guady and silly they look. Unless you are exceptional and already have a design or art background, give yourself about 2 years to gain the experience and knowledge needed to start making "good" websites/webpages.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
320
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
58
lmcate
lmcate
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
202
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
78
jjgupta915
jjgupta915
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
55
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top