|
|
Post a Project »
Find a Professional HTML Freelancer!
Find a Freelancer to help you with your HTML projects
| |
|
How to code a faded photo background?
06-24-2007, 07:05 PM
|
How to code a faded photo background?
|
Posts: 19
|
I'm fairly new at this so bear with me...not even sure this is the right forum for this question. I want to create a simple website, maybe 5 or 6 pages, with a photogragh of a wetland, faded and soft, to be the background for the home page. There will be some "handwritten" text as the title in the middle upper left hand corner (ie the domain name) and links to various articles on the below right hand corner. The main visual impact of the page will be the photo itself. (are there major drawbacks in regard to SEO in having little text on the first page and just links to the articles?)
I know the basic html tags...I know about img src codes but that's about where my knowledge begins and ends. Don't know CSS or Java or much else...I downloaded NVU but have been sorta stuck on this first step.
Suggestions? Thanks for whatever help you can give me to overcome my deep procrastination...I did already purchase the domain names though! 
Last edited by decterlove; 06-24-2007 at 07:06 PM..
|
|
|
|
06-25-2007, 01:06 AM
|
Re: How to code a faded photo background?
|
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
|
As far as the seo part of the question search engines read text and while they're working on it they don't really read images. So having text on your page is better when it comes to seo, but that is a very general statement on my part. There's a lot more to seo and it's hard to really answer your question in one post. You might want to explore some of the threads in the seo forums here and raise some questions there.
You probably would be better having more text on your home page, but at the same time you could still do well in search engines without much on a page.
When it comes to the code for the faded image the way I would do that is fade the image in something like Photoshop and then set it as a background image on the page with css. I'm guessing that's beyond your knowledge at the moment, but I promise it's not very hard.
A really good place to begin learning how to build websites is at W3Schools. They have tutorials on most of the things you'll want to learn. The tutorials are easy to understand and get through, but will give you a lot of the basic knowledge to get you going.
Even though you know html it's probably a good idea to go through that tutorial anyway. It'll make for a nice refresher and I'm sure a few things in there will be new. Next I would go through the css tutorial. After that you can go through any you want depending on what you want to learn.
You can get through both tutorials in a few hours at most and you really will learn quite a lot from them. CSS isn't any harder to learn the basics than HTML, though it can get more difficult later depending on what you want to do with it.
Hopefully that's enough to get you started and of course feel free to ask more detailed questions. It won't all come overnight, but the sooner you start learning the sooner you'll get to where you want to go.
|
|
|
|
06-25-2007, 11:27 AM
|
Re: How to code a faded photo background?
|
Posts: 22
Name: Dan Finney
|
Decter, this is all you will need to call and center your image on the page. Create the faded edge in your photo-editing program and match the background color (change this: #3366CC) of the body to the edge of your image. If you want it to align left instead of center change "center" to "left." Put the photo in a folder called "images" and change "YourImage.jpg" to match the name of your file.
Any text or links can be created on top of this graphic and styled with CSS as well.
Paste this inside the <head></head> tags. Just after the title is a good spot. For multiple pages, you will want to create a seperate CSS document and link to it.
<style type="text/css">
<!--
body {
background:#3366CC url(images/YourImage.jpg) no-repeat center top;
}
-->
</style>
|
|
|
|
06-25-2007, 01:26 PM
|
Re: How to code a faded photo background?
|
Posts: 19
|
Thanks to both of you for the above tips...this forum is pretty cool and you've already given me a lot of new and valuable information. Hey, Van Gogh, I saw your exhibit once at the Whitney Museum in New York, or was it the Met, I forget...pretty decent stuff tho, does it sell well?
|
|
|
|
06-25-2007, 05:21 PM
|
Re: How to code a faded photo background?
|
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
|
My paintings hang everywhere and fetch quite a price at auctions. Too bad I gave them all away or I'd be rich. My bad for being ahead of the market.
|
|
|
|
06-25-2007, 05:42 PM
|
Re: How to code a faded photo background?
|
Posts: 3,621
Name: Thierry
Location: I'm the uber Spaminator !
|
Quote:
Originally Posted by vangogh
My paintings hang everywhere and fetch quite a price at auctions. Too bad I gave them all away or I'd be rich. My bad for being ahead of the market.
|
Hehehehe.....

__________________
Only a biker knows why a dog sticks his head out the window.
|
|
|
|
06-25-2007, 11:12 PM
|
Re: How to code a faded photo background?
|
Posts: 19
|
Yeah Vincent was the ultimate marketing genius...too bad, I think he's my favorite artist. There was a book that came about 25 years ago, I forget the title right now but it traced the roots of expressionism to all those fantastic Japanese prints those guys were getting access to at the time (Japonaise? or something...) His artwork is so amazing "in person" the brush strokes really become alive....Mishima? a movie that came out in the early 80s has a scene where someone steps into a Van Gogh painting like Alice in Wonderland...
A short story about one of his pieces, "Night Cafe"...
I live in the North Bay area, north of S.F. that is, and they have a great open studio thing going on every Fall here where all the local artists open their studios to visitors.
I had never gone on one before so I put an ad in Craigslist asking for some company to do the tour. I figured the ad would be more appealing with a picture and I wanted to indicate what kind of art I liked so I went on Google images, decided Van Gogh was a great example and one of the first images to come up was "Night Cafe", a piece I'd never seen before. So I put it in the ad and did meet someone....yada yada ya....but that's not the point of my story.
Two months later I found the very same piece all framed out in a nice cherrywood frame in the basement of a local Goodwill store, for eight dollars! Naturally I bought it and thought is was a strange coincidence and still do.
Sorry to divert from the topic but I do want to say thanks again for all the responses. One more question for Dan Finney...I don't think I explained my challenge well enough. What I want to do is actually have the whole photo faded, which I can do with a photo editor (any faves that are free...Picassa? etc?) and have the entire faded photo to serve as the background "color" for the entire home page.
So basically I'm asking how do I use a photo instead of a web color for my background. Wish I could find a good example but most sites make their photo into some sort of banner. Here's sort of where I want to go...check the section at the bottom of the page below all the text....thanks again!
http://www.skyhillinstitute.org/index.php
|
|
|
|
06-25-2007, 11:30 PM
|
Re: How to code a faded photo background?
|
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
|
I'm not sure I'm following. The image I see in the link isn't really faded. It's just there at the bottom of the content. The way the site is set up is they created a footer div, which includes all the links, etc at the bottom of the page. Using css they set that image as a background image on the div.
The html might be something like:
<div id="footer">
all the code for the links, etc here
</div>
and the css:
div#footer {background-image:url(pathToTheImage) no-repeat; width:900px; height:250px}
There's obviously more to the overall code, but that's all it would take to set the image in the footer. I'm guessing at the width and height.
I'm currently using a faded background image on my site. Click on any of the links in my sig and you should say a faded image in the lower right. It might be upper right depending on your resolution.
And that image connects us back to Van Gogh since it's part of a drawing I did of his Yellow House painting which you might guess is where my domain came from.
|
|
|
|
06-25-2007, 11:40 PM
|
Re: How to code a faded photo background?
|
Posts: 122
Name: Nate
Location: Orlando, FL
|
Quote:
Originally Posted by vangogh
My paintings hang everywhere and fetch quite a price at auctions. Too bad I gave them all away or I'd be rich. My bad for being ahead of the market.
|
I e-bay'd your ear.
|
|
|
|
06-26-2007, 12:19 AM
|
Re: How to code a faded photo background?
|
Posts: 19
|
Okay Vinnie Van (sorry! just couldn't resist this dreadful bastardization...that's probably what people would call him tho if he live today in any one of the five boroughs of New York tho, let's face it!)
Does your drawing extend as a background to your entire web pages or it is aligned right?
Is this the background tag or something else?
<img id="logo"="/images/logo2.gif" alt="YellowHouseHosting.com" />(I took out the src....I didn't want to introduce html into this post!)
hmmmn...is the background coded in the css?
I'm lost!
ps the link I sent was a bad example....I just want a simple background of one photo that serves as a background to the whole page....at least that's my starting point anyway....
(what'd that ear sell for anyway? Sotheby's, I'm sure....)
Last edited by decterlove; 06-26-2007 at 12:24 AM..
|
|
|
|
06-26-2007, 02:51 PM
|
Re: How to code a faded photo background?
|
Posts: 880
Name: Jacob
|
Quote:
|
Yeah Vincent was the ultimate marketing genius
|
He died, having sold only one work. He was poor and unknown during his lifetime also.
-Still one of the best~
Last edited by highanddry; 06-26-2007 at 02:53 PM..
|
|
|
|
06-26-2007, 04:11 PM
|
Re: How to code a faded photo background?
|
Posts: 36
Name: Greta
Location: Winchestertonfieldville
|
CSS is a good tool for what your looking for.
You can use the background tag to assign an image to the background, then position it as you want it.
Code:
<style type="text/css">
body { background: url(images/yourpic.jpg) fixed;
background-position: top left; }
</style>
you can change the position to whatever you want it to be. it takes commands like right, left, center, top, bottom... really easy stuff like that. This code also fixes the picture so it doesn't move as your viewers scroll down. If you want it to move, delete "fixed". Just put this bit into your <head> section.
As for the fading of your picture, I think you'll have to do that in a photo editor. Just change the opacity and you should be ok.
I'm pretty new too but I think this is along the lines of what you asked. Hope it helps!
Last edited by Rusalka; 06-26-2007 at 04:14 PM..
|
|
|
|
06-26-2007, 04:54 PM
|
Re: How to code a faded photo background?
|
Posts: 3,621
Name: Thierry
Location: I'm the uber Spaminator !
|
maybe that's what you're looking for?
http://cow.neondragon.net/stuff/reflection/
Quote:
Reflection.js 1.6 allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.
It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing. Best of all, it's under 5KB.
|
__________________
Only a biker knows why a dog sticks his head out the window.
|
|
|
|
06-27-2007, 02:30 AM
|
Re: How to code a faded photo background?
|
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
|
dectorlove I have the image set as a background image in css. It's essentially the code Rusalka posted above though my image is bottom right and I used a shortcut
body {background:url(pathToImage) no-repeat fixed bottom right}
It sounds like you want a bigger image. You'd probably want to position it top left or possibly center middle. Also know you can add a background image to other html elements. It doesn't have to be on the body tag.
How much did you get for it Nate? I have to think I'm entitled to most of that. It is or was my ear after all.
Quote:
|
He died, having sold only one work. He was poor and unknown during his lifetime also.
|
And I believe he gave the money he made for that one sale to a woman he saw while walking home because she looked like she needed the money more than he did.
He was actually just becoming known right before he died. He was certainly known by many of the artists of the time. His brother Theo was an important art dealer who helped promote many of the Impressionists and was working to promote Vincent as well. Theo supported Vincent throughout his life and also gave money to Gaughin for a few years. I believe he also helped several other artists of the time with money and he was one of the first to recognize the merit in the work of the Impressionists.
|
|
|
|
06-27-2007, 02:47 AM
|
Re: How to code a faded photo background?
|
Posts: 122
Name: Nate
Location: Orlando, FL
|
Quote:
Originally Posted by vangogh
How much did you get for it Nate? I have to think I'm entitled to most of that. It is or was my ear after all.
|
hmm..sold it to a guy named 'miketyson204' for about $3.00.
|
|
|
|
06-27-2007, 03:00 AM
|
Re: How to code a faded photo background?
|
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
|
That's all my ear fetched? I'd have thought at least a few more 0s at the end. Mike Tyson huh? Well he was working on that collection of ears. I do hope mine is worth more than Evander's. And I guess when Mike Tyson negotiates you just give him what he wants or your ear could be next to join the collection.
|
|
|
|
06-27-2007, 12:03 PM
|
Re: How to code a faded photo background?
|
Posts: 880
Name: Jacob
|
Quote:
|
That's all my ear fetched?
|
It is an old and disembodied ear. I'm surprised it made 3 bucks as ears completely disintegrate over time.
Hey I just noticed you live in Boulder Van Gogh..crazzy, me too
Last edited by highanddry; 06-27-2007 at 12:04 PM..
|
|
|
|
06-27-2007, 03:35 PM
|
Re: How to code a faded photo background?
|
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
|
You say old I say antique.
I didn't realize you were in Boulder. Cool.
|
|
|
|
|
« Reply to How to code a faded photo background?
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|