Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member
    Join Date
    Feb 2009
    Location
    Long Island, N.Y.
    Posts
    12
    Member #
    18390
    Hi:

    I'm a complete newbie to web design, but I needed to get a business website up and running in my area for marketing reasons.
    Although I've run through some of the C.S.S. tutorials on the w3school website,
    I'm still having a bit of problem resolving the following issue:
    I have a .jpg that I want to cover the entire background of my page. However, when I set it up using simple html it didn't render in the way I expected. The page renders the image in four different blocks. I wanted a continuous gradient effect to cover the entire page - see attached .jpg.
    From the little I know of C.S.S., I can accomplish this by setting the x and y axis to repeat?
    If you look at the page source, you will find that there are no h1, h2 headers.
    It seemed when I was including them, the page wouldn't pass validation through the w3school validator. Again, I'm completely new to all of this, and want to learn as much as I can. I really want to master all of the elements of web design from the ground up.
    If anyone could offer some advice as to how I should go about achieving this full page, gradient look, it would be really appreciated.

    Thanks in advance,

    Steve

    Just for viewing page source for assistance - NOT SPAM:

    http://www.pcwizguy.com

    B.T.W. - I had changed the file extension from .png to .jpg and have converted once again to .png so I could upload the image.
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    How tall do you want your page to be? The problem with gradients in CSS is that they have to be based on images, and those images can't be stretched to the current page size. Even if they could, they would look bad as it would require scaling the image rather than drawing a new gradient.

    Now, there are advanced CSS properties that support gradients, but those aren't particularly well-supported in browsers right now. The traditional way to deal with this is to have the gradient happen once, with set size (height, in your case). Then, after that, the end color remains. So in your case the darker blue would be the background color of the page, but at the top of the page you'd have the gradient overlayed on it.

  4. #3
    Junior Member
    Join Date
    Feb 2009
    Location
    Long Island, N.Y.
    Posts
    12
    Member #
    18390
    Hi: Thanks for your response, Shadowfiend. I'm not quite certain what you mean by how tall do I want my page to be? If this means did I want a scroll bar on the side to navigate down and up the page: no. All of the necessary information is contained in the one page which should fit the height and width of any particular screen. So I guess the height would be set to 100%?

    Yes, I've read about some of the more advanced CSS properties, but I'm leery about them because I want this to be accessible across as many browsers as possible.

    Would I be better off drawing a gradient in Photoshop and use that instead of the image I have now? I just want it to look like a very clean gradient.

    Thanks in advance.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Basically the question is the standard height, in pixels, of your page, when using the fonts you want and displaying all the content you want. This basically gives you a benchmark on how high you want to make your image. The image won't be able to stretch beyond that, so anything past that height will have to be set to be the same color as the color your gradient has at the very bottom.

  6. #5
    Junior Member
    Join Date
    Feb 2009
    Location
    Long Island, N.Y.
    Posts
    12
    Member #
    18390
    Well, wouldn't that be contingent upon the resolution of each viewing screen? e.g. Some monitor resolutions are set to 800x600, 1024x678. My MacBook Pro is set to 1680x1050.
    When you design a page, what is generally the rule-of-thumb you use if you want the background image to cover the entire page and display all of the fonts and content desired? Perhaps there is some fundamental concept I've glossed over while quickly learning some basic html?

  7. #6
    Junior Member
    Join Date
    Feb 2009
    Location
    Long Island, N.Y.
    Posts
    12
    Member #
    18390
    I'm just making the assumption that I should set the standard height, in pixels, @ 600.

  8. #7
    Junior Member
    Join Date
    Feb 2009
    Location
    Long Island, N.Y.
    Posts
    12
    Member #
    18390
    Found a cool tweak at: http://tools.dynamicdrive.com/gradient/
    Allows you to design your own gradient and save as .jpg. Then you
    merely have to upload to your site. Still have to tweak coloring a bit, though.

    Thanks for the input,

    Steve

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well.. Ultimately, the problem is still the size of the gradient. It will be a fixed height. Once you know the size, there are a half dozen tools that will help you generate a nice gradient, including Inkscape and the GIMP.

    What you want to do once you have the gradient is set it as the background image, set [minicode]background-repeat: no-repeat;[/minicode], and then set the background color to the color at the bottom of your gradient.

  10. #9
    Junior Member
    Join Date
    Feb 2009
    Location
    Long Island, N.Y.
    Posts
    12
    Member #
    18390
    Cool. Thanks, Shadowfiend. It's finally beginning to make a bit more sense.

    Cheers,

    Steve

  11. #10
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    heres a technique i use.
    I make an image thats 1024pixels high by X pixels wide
    Usually 50 or so.
    so 1024x50, i make my gradient in this section, i select
    the gradient and copy it,
    i open a new photoshop file thats 2048x50, i paste my gradient there and put it in the top portion, i paste another copy of the same gradient and put it in the bottom portion. i rotate it so that it looks like a smooth transition.
    then i set background-repeat: repeat-x; on the body tag.

    The reason i use 50px wide and repeat-x is to reduce the file size of the background image.
    2048x768 = large file

    Image example
    BLACK
    DARK RED
    MED RED
    LIGHT RED
    --------------------------this top section is the first 1024x50 gradient
    LIGHT RED
    MED RED
    DARK RED
    BLACK
    --------------------------bottom section e.g pixels 1025-2048 x 50px

    Most of my pages are <1024 pixels high
    however if they extend past this, my gradient takes care of that

    Examples:
    http://www.alldeathnote.com
    http://www.alldeathnote.com/images/bg.jpg


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:25 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com