Design Question - Text inputs and borders

I have been thinking of redefining the look of my site to make everything more contained and functional. As of now, the site is "ok" but doesn't reflect the atmosphere or purpose I am trying to convey. While I know art is something I need to find on my own I have some questions:

I notice a lot of sites are using larger text and text input fields. The text input fields always have an CSS onfocus change to them. The borders are usually blue (or something matching the site theme) and are apparently using a blur/gradient. How does one achieve this?

Background images are my worst challenge. I would love to use something that compliments my centrally laying content, but have no idea how to make a background image on the canvas fit the screen without having the user on a large monitor seeing the end of the picture or someone scrolling to see the same. Is this an easy fix?

Borders in general look great in sites that are made in wordpress or use the gradient/blurring feature. Again, however, I can't figure out how to implement this. Everything on my site uses solid 1 pixel borders that almost make it hard to have everything look "dreamy or cloudy" like these gradient borders offer. When I do try to use a color theme for inner boxes (which I wish I could make rounded!!!! ) it is to strikingly different. I use Dark colors such as black and dark greys.

I'm not really a fan of large boxes/fonts ... takes up too much screen space for my liking, and I can read it just as well at the average size of 12pt.

As to getting the background to change, I'm not entirely sure for I've never done that before. Someone else on this forum might be able to help you with that.

Yeah, backgrounds where you can see a beginning and an end are really quite annoying. An easy way to get around that is to have a repeating background - easily achieved with CSS. You could always have a solid, mono-coloured, background:



But in most cases it can be pretty boring ...

Say, for example, you wanted a gradient going from dark blue at the top of the page to a light blue further down the page, and when the gradient finishes you want that light blue to continue, rather than starting from dark blue again. You don't need a phenominally long image to do that (or a wide one ... only a couple of pixels perpendicular to the gradient will do), all you need is to do a bit of typing in CSS:



bluegradient.jpg is the image of the gradient itself ... 10 pixels wide, 100 pixels deep

repeat-x makes the image repeat itself along the x-axis only, ie horizontally

#289dc3 is the colour that the gradient ends with, the light blue. Of course, change this to suit the gradient.



The trick with borders is to use them sparingly, and only when needed. There's little more annoying than seeing everything with a black line around it, apart from when people leave the table borders visible.

The way I make my boxes rounded is through images, and then just aligning them properly with html/css ... there's another way, I think, but I couldn't be bothered with it, and I hear it's a problem to get right over the many different browsers.

I hope I answered some of your questions