Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I use a gradient image as my webpage background using CSS

    Real simple, I have a 5px by 768px gradient image which was created in photoshop and saved as a jpg.

    I would like this image to repeat vertically across the page. From left to right.
    the code I tried to use :

    Code:
    body{
    	text-align: center;
    	background-color: #080d47;
            background-image: url(images/backdrop.jpg);
    	background-repeat: repeat-x;
    }
    Unfortunately, this doesn't work. Any suggestions?

    Here's the CSS code in its entirety

    Code:
    * {margin:0px;padding:0px;top:0px;left:0px;}
    body{
    	text-align: center;
    	background-color: #080d47;
            background-image: url(images/backdrop.jpg);
    	background-repeat: repeat-x;
    }
    #central{
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: 8px;
    	position: relative;
    	width: 1000px;
    	text-align: left;
    	background-color: #FFFFFF;
            
    }
    #header{
    	background-image: url(images/header.jpg);
    	height: 226px;
    	width: 1000px;
    	left: 0px;
    	top: 0px;
    }
    #header a{
    	font-size: 18px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: bolder;
    	color: #FFFFFF;
    	text-decoration: none;
    	margin-left: 112px;
    	font-family: "Courier New", Courier, mono;
    	margin-top: 35px;
    }
    #navlist{
    	margin-left: 0px;
    	padding-left: 0px;
    	white-space: nowrap;
    	position: absolute;
    	height: 53px;
    	width: 964px;
    	top: 225px;
    }
    #navlist li{
    	display: inline;
    	list-style-type: none;
    }
    #navlist a {
    	padding: 3px 10px;
    	background-image: url(images/button.gif);
    	height: 20px;
    	width: 91px;
    	display: inline;
    	position: absolute;
    	text-align: center;
    	color: #fff;
    	text-decoration: none;
    }
    #navlist a:hover{background-image: url(images/buttonover.gif);}
    #n1{left: 0px;}
    #n2{left: 111px;}
    #n3{left: 222px;}
    #n4{left: 333px;}
    #n5{left: 444px;}
    #n6{left: 555px;}
    #n7{left: 666px;}
    #n8{left: 777px;}
    #n9{left: 888px;}
    #leftside{
    	float: left;
    }
    #leftside h3{
    	border-top-width: 3px;
    	border-right-width: 3px;
    	border-bottom-width: 0px;
    	border-left-width: 3px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #00306f;
    	border-right-color: #00306f;
    	border-bottom-color: #00306f;
    	border-left-color: #00306f;
    	width:200px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #333333;
    	background-color: #FFFFFF;
    	text-align: center;
    	display: block;
    	margin-left: 15px;	
    	margin-top: 35px;	
    }
    #content{
    	margin-top: 252px;
    	position: absolute;
    	width: 1000px;
    	background-color: #0d0d86;
    }
    #picture1{
    	margin-left: 15px;
    	height: 150px;
    	width: 200px;
    	background-image: url(images/nicehomesmall.jpg);
    	border: 3px solid #00306f;
    }
    #picture2{	
    	margin-left: 15px;
    	height: 150px;
    	width: 200px;
    	background-image: url(images/poolareasmall.jpg);
    	border: 3px solid #00306f;
    }
    #picture3{	
    	margin-left: 15px;
    	height: 150px;
    	width: 200px;
    	background-image: url(images/bentlycoupesmall.jpg);
    	border: 3px solid #00306f;
    }
    #picture4{	
    	margin-left: 15px;
    	height: 150px;
    	width: 200px;
    	background-image: url(images/blueSeassmall.jpg);
    	border: 3px solid #00306f;
    }
    #footer{
    	clear: both;
    	background-color: #FFFFFF;
    	position: relative;
    	height: 46px;
    	background-image: url(images/footer.gif);
    	background-repeat: no-repeat;
    	background-position: right bottom;
    }
    #rightside{
    	float: right;
    	width: 748px;
    	background-color: #FFFFFF;
    	margin-right: 15px;
    	margin-top: 20px;
    	overflow: hidden;
    }
    #rightside p{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	font-weight: strong;
    	color: #000000;
    	margin-left: 20px;
    	margin-bottom: 20px;
    	width: 710px;
    }
    #rightside h1{
    	margin: 10px 0px 10px 20px;
    	width: 300px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #033387;
    }
    #rightside span{
    	margin-top: 10px;
    	margin-bottom: 4px;
    	width: 430px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #649721;
    }
    #rightside a{color: #666666;}
    #footer p{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #FFFFFF;
    	float: right;
    	padding-top: 23px;
    	margin-right: 10px;
    }
    #footer a{color: #fff;}
    #footer a:hover{color: #fff;}
    #imagepreloader{
    	visibility: hidden;
    	overflow: hidden;
    	height: 0px;
    	width: 0px;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    That should work actually. At least there’s nothing wrong with the CSS. Have you made sure the image is stored in the right location and/or the path in the stylesheet is correct?
    Remember relative paths are counted from the location of the stylesheet. That measn if your stylesheet is in a directory called /css you would need to go one level up to the root and then into the images directory: ../images/backdrop.jpg

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    That should work actually. At least there’s nothing wrong with the CSS. Have you made sure the image is stored in the right location and/or the path in the stylesheet is correct?
    Remember relative paths are counted from the location of the stylesheet. That measn if your stylesheet is in a directory called /css you would need to go one level up to the root and then into the images directory: ../images/backdrop.jpg

    Oops, I knew it had to be something that simple. Thanks man. I had the image file in the wrong folder.

  • #4
    New Coder
    Join Date
    Jul 2007
    Location
    Chicago
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As a side-note: why are you using such a long graphic? For the purposes you describe, most people will make a "sliver" graphic that extends the gradient down the page maybe 300-400 pixels depending on the look, and then repeat the x axis. Then make the background color of the container the same color as the very bottom of the gradient so that everything blends nicely. It's only a few K probably but just thought I'd mention it.


  •  

    Posting Permissions

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