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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using images for visual effect / appearance

Status
Not open for further replies.
josel

josel

Programmer
Oct 16, 2001
716
US
Howdy!

I have basic knowledge of html and I am able to write what you would refer to as "simple" pages - nothing fancy - no WOW! effects or appearance.

In other words, my pages are simply the make up of boxes as defined by the use of tables.

I want to start using images which placed together, give the page a more pleasant (or professional) look. I figured the trick is possitioning the images on the right spot. I started with something simple and was not able to get it to work - "to have a two color image show on left side of screen (aka. Navigational Bar)" and obtain a color transission effect.

I created an image with vertical radiant colors and failed to get the effect I am looking for.

The problems I ran into were:
1. The image repeats
2. Space between image (tiled)
3. Could not make it fill screen unless image was huge

An example of simple effect I am looking for can be seen at Their navigation bar is pretty cool as it waves in a solid shape.

Where can I find the "tutorials" and/or "sample" code to accomplish such tricks?

Regards;


Jose Lerebours



KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours
 
Sort by date Sort by votes
Remember, the only way to keep html source code a secret is to not publish it on the net. That basically means that you can just do view source code on a site you like and check how they accomplished it. I wouldn't know where you can find tutorials for these kind of things, but people here will be more than willing to help you get the desired result. First of all, if you look at the background picture on the site you mentioned ( the picture IS huge (1200x609px). If you employ CSS for your design, it doesn't have to be this big. You can set the background in css like this:

background: color url(picture) x-position y-position repeat;

in html code you would use it like this:

<body style="background: #ffffff url(back.gif) top left repeat-y;">

to repeat your background on the y-axis but not on x. Post the url to your site and we will take a look at it and try to help you.
 
Upvote 0 Downvote
Vragabond,

I agree, I should "view source" to understand how they get these things to work ... and I shall ... and I will ...

I will look into using CSS as you mention. As per my URL, I have none for this study or R-N-D; I am experimenting locally within my intranet.

I could, however, open something up for case studies.


Thanks for replying!


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
178
Alt255
Alt255
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
544
198709km
198709km
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
632
3esolar
3
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
152
lucasbrown
lucasbrown
tyutghf
  • Locked
  • Question
Slight page curl effect
Replies
3
Views
208
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top