Web Analytics Made Easy -
StatCounter Using background-image and a gradient - CodingForum

Announcement

Collapse
No announcement yet.

Using background-image and a gradient

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Using background-image and a gradient

    What I have right now is a header with a background that is composed of a photoshop slice as the background-image. This slice is repeated along the x-axis.

    What I'd like to do is add a gradient on top of this to lighten part of the background. I can't figure out how to do this. I'd really appreciate some help.

  • #2
    You're limited to one background image per element so the solution for you will depend on your page structure. Can we see your live test page?

    I know that in the past I have applied one background to the body, one to the actual HTML tag (seriously, it works that way), and one to a header element to get blended results before. You can do some pretty cool stuff, but I would need to see your layout as-is to know how to help...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

    Comment


    • #3
      Originally posted by Rowsdower! View Post
      You're limited to one background image per element so the solution for you will depend on your page structure. Can we see your live test page?

      I know that in the past I have applied one background to the body, one to the actual HTML tag (seriously, it works that way), and one to a header element to get blended results before. You can do some pretty cool stuff, but I would need to see your layout as-is to know how to help...
      Don't have a live test page but i can show you the code.

      Code:
      <div id="main_header_container">
      	<div id="logo">
      		<h1>Engine Room</h1>
      		<h2>Web Design</h2>
      	</div>		<!--end of logo div-->
      	<nav id="main_top">
      		<ul>
      			<li><a href="home.html">Home</a></li>
      			<li><a href="about.html">About me</a></li>
      			<li><a href="what_i_do.html">What I do</a></li>
      			<li><a href="portfolio.html">Portfolio</a></li>
      			<li><a href="contact.html">Contact</a></li>
      		</ul>
      	</nav>
      </div>		<!--end of main_header_container div-->
      Code:
      header#main_header {
      	display: block;
      	background-image: url(images/header.png);
      	background-repeat: repeat-x;
      	background-position: left-bottom;
      	margin: 0;
      	height: 150px;
      	position: relative;
      	-moz-box-shadow: 0px -3px 5px #333;
              -webkit-box-shadow: 0px -3px 5px #333;
      	box-shadow: 0px -3px 5px #333;
      }

      Comment


      • #4
        So we would have to recreate your background images? lol

        Really, either get a free hosting providor, or I guess you could zip up all your html, css and images and post them here. I personally dont usually download zipped files from ppl here.
        Teed

        Comment


        • #5
          Originally posted by teedoff View Post
          So we would have to recreate your background images? lol

          Really, either get a free hosting providor, or I guess you could zip up all your html, css and images and post them here. I personally dont usually download zipped files from ppl here.
          Agreed 100%. I'm not one to download random files and unzip them, either. Nothing personal.

          Freehostia (see the "free hosting" link in my sig) will work just fine for you for free hosting for test pages. If you have an FTP client (Filezilla or somesuch) you can even use that with Freehostia. They're ad-free, they support PHP, they support FTP, and they don't insert any tracking or traffic counter code into your page. They aren't the absolute tops for up-time but they're the "all-around" best free host that I have tried (out of 3 thoroughly tested so far).

          Anyway, I'll be happy to help if there is a live page that I can get to, but I'm not likely to create a local test copy for myself.
          The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
          See Mediocrity in its Infancy
          It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
          Seek and you shall find... basically:
          validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

          Comment


          • #6
            I appreciate what you're saying but i'd have to register a domain name, and right now i don't have the money.

            I wasn't looking for anyone to recreate my background images, i thought it might be possible for someone to explain to me how to go about doing it myself. If this can't be done without a live example - then i'm out of luck.

            Comment


            • #7
              Originally posted by gnolan View Post
              I appreciate what you're saying but i'd have to register a domain name, and right now i don't have the money.

              I wasn't looking for anyone to recreate my background images, i thought it might be possible for someone to explain to me how to go about doing it myself. If this can't be done without a live example - then i'm out of luck.
              No you wouldn't. Look at my crappy little never-been-updated website in my sig (the "mediocrity in its infancy" one). That's hosted on freehostia without a domain name of any kind from me. Freehostia just puts you in a subdomain of their own name and lets you run with it for free.
              The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
              See Mediocrity in its Infancy
              It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
              Seek and you shall find... basically:
              validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

              Comment


              • #8
                Originally posted by Rowsdower! View Post
                No you wouldn't. Look at my crappy little never-been-updated website in my sig (the "mediocrity in its infancy" one). That's hosted on freehostia without a domain name of any kind from me. Freehostia just puts you in a subdomain of their own name and lets you run with it for free.
                I can't find any option when signing up to use the freehostia domain. You are asked to choose from a list of the regular domain name extensions, with no option for using freehostia.

                This is the link i followed.

                Comment


                • #9
                  Holy crap! They must have stopped offering the subdomain option. Sorry!

                  Yep, confirmed here:
                  http://forum.freehostia.com/viewtopic.php?p=23833

                  That stinks.


                  Well, plan B then would be 000webhost as they have a domainless registration also. Their servers are slower and their FTP is spotty, but they're still free, ad-free, and support PHP and FTP.

                  Register here:
                  http://www.000webhost.com/order.php

                  and use the "or, I will choose your free subdomain" option
                  The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
                  See Mediocrity in its Infancy
                  It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
                  Seek and you shall find... basically:
                  validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

                  Comment


                  • #10
                    Thanks for that. Here's the homepage of the site. Most of this is just sample content including the main image. The page is done in HTML5.

                    You'll see the header has a background-image repeating (a slice from photoshop). Now i'd like to have partial radial gradient covering the main nav menu in the header, to make it look as if the menu is kind of backlit.

                    P.S. I know the site is pretty ugly at the moment!

                    Comment


                    • #11
                      At first glance I would say that you should just use that background on the body (rather than on #main_header) and then use whatever other gradient you want on #main_header or even on #main_top itself, if it fits within the confines of that element's size.

                      Posting an image of the completed PSD (as a jpg or png) would help also.
                      The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
                      See Mediocrity in its Infancy
                      It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
                      Seek and you shall find... basically:
                      validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

                      Comment


                      • #12
                        Thanks. Here is the original mockup for the site done in PS.
                        Attached Files

                        Comment


                        • #13
                          OK, that will definitely not fit in the menu element itself. Just use your gradient in the header and your repeated background on the body as I said and this should be no sweat.

                          Give it a try and let me know if you get stuck for any reason.
                          The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
                          See Mediocrity in its Infancy
                          It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
                          Seek and you shall find... basically:
                          validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

                          Comment


                          • #14
                            Have to head out, but i'll try that and post the results. I can foresee a problem with the opacity though, i'm sure that the gradient will appear on top and completely cover the repeated background image in the body. And any attempt to reduce the opacity of the main header in order to see the background image will result in reduced opacity of h1, h2 and image elements.

                            Comment


                            • #15
                              Yeah, there are definitely problems with the opacity. Leaving the opacity as it is, all i can see is the gradient and no background image. If you follow the original link i posted to the home-page, i have the main_header set to an opacity of 0.4. This is close to how i'd like the gradient background to look; but as you can see, all the header content is faded to 0.4 too.

                              Is there any way around this, or an alternative?

                              Comment

                              Working...
                              X