Hey everyone. I’m new to web page design and this looked as a quality forum in order to join.
I’m aiming to create a track record for my website, www. deepbluetrees. com. I have just one idea but I am open to quite a few options.
Now, the background is simply a static grey color. I have considered quite a few paterns, but can’t think of an idea that might both look very good and fit with the " design" with the site.
My idea for that design is to acquire a gradient which turns from dim grey (darker versus current color) to a black or dark navy blue down with the bottom of your page. This would choose pretty far to the footer, where there could well be downward facing tree outlines that end in the very bottom with the page. The idea should be to make it seem like a reflection… Related to that made feeling, I’m going in an attempt to work out a mockup in photoshop. The type of look i always would be going for can be bought in this picture: http: //deepbluetrees. com/images/inspiration. jpg
I’d even be fine with something like cropping the reflection in that photo plus setting it to display along at the very bottom regarding my page. A common concern I have is how that might display in several screen sizes, as well as those above 1024px with width
Thus, that is this idea. I’m looking for advice first then when I finally do make a decision on what I want to do, implementing that stands out as the next step.
Thanks for ones help.
Avoid using patterns, they’re frustrating and old school.
Gradient is usually fine. Have your 200-400 px huge and 1px wide(give repeat-x to help background and it will eventually repeat to total width) gradient.
Your logo is usually much larger than it should be. Scale it decrease.
Unlike in the west the reflection, have 2 divs around every one of the content in your web blog. Give the top rated background gradient towards first one. Then flip the actual gradient vertically and save proper new file. Apply this for the 2nd div in addition to give " background-position: bottom; " in CSS. This provides you with the bg reversed at the bottom of the page.
Using a photo isn’t a good option for the reasons you mentioned above, and your page’s load time has already been reduced heavily through your logo, so using an image will always make it worse.
It’s safe to second the ‘dont apply patterns’. stick into a simple gradiant, the grey ough had didnt possibly bother me in truth. your content looks like to stick out okay. maybe lighten that a lil, but looks good in my experience
Thanks for that replies. I’m going to experiment in photoshop a small amount to see what would bode well as a pattern. What’s the simplest to take a shot on the entire screen
print screen button.
alt+print screen for that current window
ctrl+v as well as Edit> Paste within paint/photoshop
Well the matter is not having a screenshot, but buying a screenshot of your entire length of that page, which doesn’t squeeze in the browser eye-port.
ah: ERSUS… not sure
I’m sure your out of luck with that particular, you could create a screenshot, paste it
and then scroll, take another screenshot, paste it and line them up…. not sure you can do it any additional way
So I have been doing a minor CSS but I’m still not entirely sure the right way to implement this. Quite a few backgrounds are done by repeating an image for that entire width and length with the page, but this of course won’t work whenever it changes throughout the length of the page.
This is determined by your background. If it’s just a vertical gradient (or everthing else that is the exact same horizontally), you simply make it happen in CSS:
. yourelement
track record: url(" yourbgimage. png" ) repeat-x;
Now use that using a 1px wide graphic gradient.
If it changes during the entire width of this page, there’s not much you can do. Because people have different screen measurements, the image will repeat it doesn’t matter how wide it really is (to some degree, of course), and it is going to look ugly.
Another option should be to fade out to the sides and facility the background impression. But, it would ruin the full point of any universal background…
You opt for.
Your current background looks a little funky.