Why does this background image have a huge black bar at the bottom? - HTML Forums

JohnnyScience · 11-01-2009, 12:22 PM

Hey everyone, I'm trying to set my background image, but for some reason it has a large black bar at the bottom, where the pink gradient should actually start at the bottom so that you cant see the black bar?

I'm trying to upload my Index.html file, but when I do the image loader says that its not a valid file?

Any ideas?

Pegasus · 11-01-2009, 12:38 PM

You can upload the image or you can provide a link to the html file. Or you can just post the code. That would work, too.

JohnnyScience · 11-01-2009, 12:52 PM

Quote:

Originally Posted by Pegasus

You can upload the image or you can provide a link to the html file. Or you can just post the code. That would work, too.

How do I provide a link to the html file on here so you guys can see how I'm putting it together?

And how/where would I upload the image that I'm using for the background image?

Pegasus · 11-01-2009, 12:58 PM

Just type in the address. It should automatically become a link. We'd need to see the entire page code, though, so we know what's at the foot of your page.

JohnnyScience · 11-01-2009, 01:05 PM

Quote:

Originally Posted by Pegasus

Just type in the address. It should automatically become a link. We'd need to see the entire page code, though, so we know what's at the foot of your page.

But right now its just a file on my computer? I guess I dont understand?

JohnnyScience · 11-01-2009, 01:11 PM

You know now that I look at it, I just dont think the image is large enough to span the entire website & its starting to tile.

I've made the image larger in photoshop, but what is the most ideal height for me to make this background image so it doesnt tile.

Pegasus · 11-01-2009, 01:21 PM

Rather than make the image square, you could take one vertical pixel column, make it longer in the pink section, and use CSS to add it as a background. Like this:

<body style="background-image: url('image.jpgj'); repeat: repeat-y;">

Alternately, you could make the background colour of the page pink and just use a single vertical column of pixels set to repeat-y.

JohnnyScience · 11-01-2009, 01:27 PM

Quote:

Originally Posted by Pegasus

Rather than make the image square, you could take one vertical pixel column, make it longer in the pink section, and use CSS to add it as a background. Like this:

<body style="background-image: url('image.jpgj'); repeat: repeat-y;">

Right now I'm just setting up a single splash page with just 2 email links on it and a single logo/image on top of the background, so I dont know if the CSS code will work for me now will it?

I dont understand photoshop enough to do the vertical pixel column, but what I did was change the size to 950 height which made the width 1013.

I guess it seemed to work now?

I made a zip of the html file & the image. Let me know if it works.

Thanks.

Pegasus · 11-01-2009, 02:02 PM

Okay, try this

JohnnyScience · 11-01-2009, 02:13 PM

Quote:

Originally Posted by Pegasus

Okay, try this

Ok so I see the image you made blacktopink2 - what does this small little strip actually do?

And what do I do with this .ds_Store? I've never seen a file like that before?

Step 2:

Now I have my logo that I want to put in the top middle, I did:

<img src="blackglow.jpg" />

But how do I center it to the top middle? Doesnt it look a bit off? Did I put it in the right section?

Also I was able to get the link for models@punkrockprincess.com to work, but why wasnt the email for the photographers.com showing up?

I've attached the new zip with the new logo in it.[ATTACH]Attachment 10398[/ATTACH]

Pegasus · 11-01-2009, 02:17 PM

.ds_Store you can ignore/delete. I think it's a Mac thing. That small strip is what makes your background. It tiles left to right only and the pink is the background colour.

Here's the code for centering the image. You might want to make it about 300px smaller, though. Just to make sure it fits on most browsers without scrolling. It also makes the image a bit smaller as far as filesize goes and that makes it faster to load. Same with the difference between the strip of the background and the large background you had.

Your second link doesn't work because there's no text in between the tags.

JohnnyScience · 11-01-2009, 02:25 PM

Quote:

Originally Posted by Pegasus

.ds_Store you can ignore/delete. I think it's a Mac thing. That small strip is what makes your background. It tiles left to right only and the pink is the background colour.

So what is the benefit of using just that little strip & having it tiling vs. having just one large image?

Also, I just updated the latest .zip file to include the hyperlink emails I'm trying to make active, yet I am having issues with one of them.

Pegasus · 11-01-2009, 02:51 PM

Your second link doesn't work because you haven't added any text between the <a> and </a> tags.

JohnnyScience · 11-01-2009, 02:57 PM

Quote:

Originally Posted by Pegasus

.ds_Store you can ignore/delete. I think it's a Mac thing. That small strip is what makes your background. It tiles left to right only and the pink is the background colour.

Here's the code for centering the image. You might want to make it about 300px smaller, though. Just to make sure it fits on most browsers without scrolling. It also makes the image a bit smaller as far as filesize goes and that makes it faster to load. Same with the difference between the strip of the background and the large background you had.

Your second link doesn't work because there's no text in between the tags.

Ok awesome, I fixed the link too and added some other stuff.

Now all I need to do is get the text size & color to work, what am I doing wrong?

I do want to resize the picture, probably to at least half of what it is now, where/how is the best way to do that?

I've attached the updated zip file.

Thanks.

Pegasus · 11-01-2009, 03:28 PM

You had the colour as starting with the letter O rather than the number 0. Here's an updated version of the page. I've resized the image using Photoshop. Let me know if that's small enough. It's 900x156px, or 1/2 the size of the original. I can take it down to 1/4 of the size if you prefer.