The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

how to do this

  • # November 27, 2009 at 2:24 pm

    Lets say you have a site that is 960 width and 800 height. You want to set a gradient background image. The image is only 800px in height. So if the site should become more than that by adding future content, how to you handle the repeating background with a gradient so that it looks good? I see this done on the top part of the page has a white to gray color gradient. but the image isn’t that big. So it looks like there is a background color as well. So what is a good technique for this?

    # November 27, 2009 at 2:55 pm

    Well, just have it repeat in one direction (horizontally) and have the bottom of the image fade to a solid color…. so the CSS would be like:

    background: url(image/image.jpg) repeat-x #333;
    # November 27, 2009 at 3:12 pm

    I didn’t think you could do a background color and image at the same time. I will try what you posted, thank you

    # November 27, 2009 at 3:39 pm

    Here’s a nice simple tutorial on CSS background:

    The last box talks about the "background" property.

    # November 27, 2009 at 3:53 pm
    "cybershot" wrote:
    I didn’t think you could do a background color and image at the same time. I will try what you posted, thank you

    Yup, that is exactly what you’re supposed to do. The color will only show where the image isn’t.

    # November 27, 2009 at 4:38 pm

    You know, I think I knew that but just forgot. I have been working on so many other things, that my coding skills are getting weak. Ya got to ake sure to keep coding.

    # November 27, 2009 at 7:11 pm

    Yea, I hear you. I hate when a client calls and asks about a site that’s been done for 6 months. So much has happened since then, I practically forget the domain name… okay not really, but you get the idea.

    # November 27, 2009 at 7:15 pm

    I am in school right now for web design. going for an assoctiates degree. I have been doing so much homework on how the internet works, php, and databases in access, that my coding is getting sloppy and I am forgetting things I tought myself months ago from living on this site.
    it’s coming back though. I just got to keep myself busy coding sites so that I don’t forget.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed