SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gradient background

    Hi! I have a fixed centered layout of 960px. Within my container div I have a div of 960 x 300px for which I use a background image. The background is made up from a gradient going from left (dark) to right (lighter). What I try to figure is what the best way would be to continue those two colors outside the container so that on the left the dark color continues on the right side the lighter color. Does anyone has any suggestion how to do such a thing.

    Thank you ina advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Addict WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if this is the best way because it involves a background image in the body that sits behind the container. I would repeat-y a thin horizontal strip that was the one colour on the left and the other colour on the right.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the reply WebMachine. What I finally have done is the following: I took a 1px vertical strip from each side and created two absolute positioned divs:
    Code CSS:
    .left_background,
    .right_background {
    	width: 50%;
    	height: 300px;
    	position: absolute;
    	left: -25%;
    	top: 132px;
    	z-index: -100;
    	background: url(../images/site/left_background.png) 0 0 repeat-x;
    }
     
    .right_background {
    	left: 50%;
    	background: url(../images/site/right_background.png) 0 0 repeat-x;
     
    }
    I saw it on two computers with different dimensions and screen resolutions, and it is giving the desired result. If anyone see that this will give me some kind of trouble please let me know.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well, you are using percents to specifcy where the image starts, and depending on the resolution, that can mess with how it appears.

    It should be fine for the most part but seeing as I don't know what the images look like it may or may not cause issues with how seamless the image plays into the design.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Addict WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I understand it, your two background images are just solid colours that match the edges of the gradient in the container, so why don't you simplify it a bit by setting one colour as the body background colour and just use one of your images, say the left background div.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    If you want the background to keep track with the text automatically (unlike the absolute method) then you could do this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    html,body{margin:0;padding:0}
    .content p {
    	margin:0 0 1em 0;
    	padding:5px
    }
    .wrap {
    	color:#fff;
    	clear:both;
    	width:100%;
    	min-width:1000px;
    	float:left;
    	background: #fc6;
    	color:#000
    }
    .inner {
    	float:left;
    	width:50%;
    	position:relative;
    	background:red;
    	margin-right:-1px;
    }
    .content {
    	width:1000px;
    	margin-right:-500px;
    	position:relative;
    	float:right;
    	padding:1em 0;
    	background:orange;
    }
    </style>
    </head>
    <body>
    
    <div class="wrap">
    		<div class="inner">
    				<div class="content">
    						<p>This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    :</p>
    						<p>This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    :</p>
    						<p>This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    :</p>
    						<p>This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    :</p>
    				</div>
    		</div>
    </div>
    </body>
    </html>

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    mein gott people -- talk about taking something simple and making it complex...

    make a background image that's like... 2048x1, repeat-y it on an outer container aligned center, end of problem.

    Code:
    <div class="headerWrapper"><div class="header">
    Whatever you have inside the header here
    <!-- .header, .headerWrapper --></div></div>
    Code:
    .headerWrapper {
      background:#CCC url(images/headerBackground.png) top center repeat-y;
    }
    
    .header {
      width:960px;
      height:300px;
      margin:0 auto;
    }
    The background color would be what you want to show images off, and again headerBackground.png being some absurd width like 2048 or 3072 and 1px tall, and headerWrapper would be the first thing after your <body> tag.

    DONE!!! SIMPLE! (basically what webmachine was suggesting).

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Tossed together a live demo of that in action....
    http://www.cutcodedown.com/for_other.../template.html

    I made the image 3072x1 with the center 960px being red to blue -- the left side fades that red towards orange, the right side fades towards green. You could just as easily make those a fade towards the same color like black (often desirable in some designs) or make them a solid color.

    As with all my examples the directory
    http://www.cutcodedown.com/for_others/donboe

    is open for easy access to the bits and pieces.

    -- edit -- made one small change to the image -- set it to fade to the same purple on both sides as the images off background color, that way should it be shown on something wider than 3072px, it won't look broken.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    mein gott people -- talk about taking something simple and making it complex...
    My example was one extra div and no large repeated image needed so I think that's a fair trade off - and more fun .

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    My example was one extra div and no large repeated image needed so I think that's a fair trade off - and more fun .
    Only useful for solid color though... does handle very large widths nicely...

    But when the 'large' image is 520 bytes... That massive CSS of yours really offsets the difference.

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Oh, tossed up an example of doing what Paul was doing, just a wee bit simpler by NOT wrapping it since OP did say '300px height' -- fixed height means don't wrap it -- becomes way simpler and can support dynamic width.

    Code:
    <div id="headerBackground"><div></div></div>
    <div id="header">
    	Whatever you'd have inside the header here.
    </div>
    Code:
    #headerBackground {
    	position:relative; /* make sure legacy IE gets 50% correct */
    	margin-bottom:-300px;
    	background:#00F;
    }
    
    #headerBackground div {
    	height:300px;
    	width:50%;
    	background:#F00;
    }
    
    #header {
    	position:relative; /* depth sort over #headerBackground */
    	width:960px;
    	height:300px;
    	margin:0 auto;
      background:#808 url(images/headerBackground2.png) top center repeat-y
    }
    http://www.cutcodedown.com/for_other...template2.html

    No floats, no clearing, no extra id or class, no unnecessary width declarations... I'm going to play with a THIRD technique as well just to show another approach.

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Third and final method - CSS3 with IE filters. Problem is, even IE9 doesn't support color-stops, so what we're trying to accomplish will NEVER work in IE9 and lower (works in 10 beta).

    Code:
    <div id="headerWrapper"><div id="header">
    		Whatever you'd have inside the header here.
    <!-- #header, #headerWrapper --></div></div>
    Code:
    #headerWrapper {
    	/* pre-css 3 gets solid bg */
    	background:#808; 
    	/* 'current' 2012 browsers */
    	background:-moz-linear-gradient(left,#FF0000 0, #FF0000 50%, #0000FF 50%);
    	background:-o-linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
    	background:-ms-linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
    	/* early webkit declares it different */
    	background:-webkit-gradient(linear,left top,right top,color-stop(0%,#FF0000),color-stop(50%,#FF0000),color-stop(50%,#0000FF));
    	/* while newer webkit does not */
    	background:-webkit-linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
    	/* THE ACTUAL CSS3 property! */
    	background:linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
    	/* IE filters can't do color stops, so don't even BOTHER */
    }
    
    #header {
    	position:relative; /* depth sort over #headerBackground */
    	width:960px;
    	height:300px;
    	margin:0 auto;
    	/* pre-css 3 gets solid bg*/
    	background:#808;
    	/* 'current' 2012 browsers */
    	background:-moz-linear-gradient(left,#FF0000 0, #0000FF 100%);
    	background:-o-linear-gradient(left,#FF0000 0,#0000FF 100%);
    	background:-ms-linear-gradient(left,#FF0000 0,#0000FF 100%);
    	/* early webkit declares it different */
    	background:-webkit-gradient(linear, left top, right top, color-stop(0%,#FF0000), color-stop(100%,#0000FF));
    	/* while newer webkit does not */
    	background:-webkit-linear-gradient(left,#FF0000 0,#0000FF 100%);
    	/* THE ACTUAL CSS3 property! */
    	background:linear-gradient(left,#FF0000 0,#0000FF 100%);
    	/* filter can do this for legacy IE */
    	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#0000FF',GradientType=1 );
    }
    Yeah, those vendor prefixes make implementing this so clear and easy... Got it live here:
    http://www.cutcodedown.com/for_other...template3.html

    Though at least no images were harmed in the coding of this demo. The real laugh is thanks to all those vendor prefixes, even without the comments all those background declarations are two to three times LARGER than the image file.

    As usual it will be so buggy and slow in FF the moment you have enough content to scroll, you'd think it was a myspace page

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Just to show how absurd using code for this really is...

    http://www.cutcodedown.com/for_other...ackground4.png

    4096x1, continues the solid color each side of the center 960 px... file size? 317 BYTES lossless 24 bit no alpha .png...

    Forget the fancy CSS bull -- Use an image on an outer wrapper.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Good examples Jason

    Quote Originally Posted by deathshadow60 View Post
    As usual it will be so buggy and slow in FF the moment you have enough content to scroll, you'd think it was a myspace page
    Yes, Firefox is slow with those gradients in the same way that fixed position used to causes it to slow right down when scrolled.

    I'll throw one more into the mix but only for IE8+.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    .wrap {
    	width:100%;
    	min-width:960px;
    	overflow:hidden;
    }
    .content p {
    	margin:0 0 1em 0;
    	padding:5px
    }
    .content {
    	width:960px;
    	position:relative;
    	margin:auto;
    	padding:1em 0;
    	background:orange;
    	color:#fff;
    }
    .content:before, .content:after {
    	content:" ";
    	display:block;
    	position:absolute;
    	top:0;
    	bottom:0;
    	left:-999em;
    	width:999em;
    	background:red;
    }
    .content:after {
    	left:auto;
    	right:-999em;
    	background:green;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    		<div class="content">
    				<p>This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    :</p>
    				<p>This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    :</p>
    				<p>This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    :</p>
    				<p>This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    :</p>
    		</div>
    </div>
    </body>
    </html>
    Only needs the two divs now but would need an expression for IE6/7 to match the before and after pseudo classes.

    I do agree that the background image approach is the simplest and easiest to implement if you don't mind the extra image.

  15. #15
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    On a side note, here's a handy tool for generating the CSS/ IE Filter gradients that DS60 demonstrated: http://www.colorzilla.com/gradient-editor/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •