WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Line in in my background? (link inside) (3 posts)

  1. wbaraz2
    Member
    Posted 4 years ago #

    Hey guys, here is the theme I started with

    http://www.themeblvd.com/demo/stylez/

    If you'll notice, it has repeating background image that is very hard to notice. Anyways, I wanted to change this image to my own background. I changed the picture in the css and here is my result

    http://sportsremix.net/

    It worked, but there is a line seperating the top and the bottom halves. Also, the bottom half is much more noticeable than the top half. Can anyone help me out? By the way, the image that I am repeating as background is main-bg.png. All the other .pngs are just there from the theme, not sure if they are affecting anything

    Here is the css code that I think is relevant. If you need differnet code, let me know

    /* MAIN ELEMENTS */
    
    body {
    	background: #151515 url('images/body-bg.png');
    	color: #FFFFFF;
    	font-style: normal;
    	line-height: 140%;
    	text-align: center;
    	padding: 0;
    	margin: 0;
    	font: 13px 'Sansation Regular', tahoma;
    	/* font: 13px Lucida Grande,Helvetica,Arial,Verdana,sans-serif; */
    	letter-spacing: 0;
    }
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    .clear {
    	clear: both;
    }
    
    a {
    	color: #009cff;
    	text-decoration: none;
    }
    
    a:hover {
    	text-decoration: underline;
    }
    
    .special {
    	font-family: arial;
    }
    
    /* GENERAL TYPOGRAPHY */
    
    p {
    	margin: 10px 0;
    	text-shadow: 1px 1px #000000;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	font-weight: lighter;
    }
    
    small {
    	font-size: 11px;
    }
    
    /* MAJOR LAYOUT ITEMS */
    
    #wrapper {
    	width: 998px;
    	margin: 0 auto;
    	text-align: left;
    }
    
    #header {
    	background: url('images/header-bg.png') no-repeat top left;
    	height: 96px;
    	padding: 0 30px;
    	position: relative;
    }
    
    #main {
    	padding: 0 30px;
    	background: url('images/main-bg.png') repeat-y;
    	min-height: 500px;
    	overflow: hidden;
    	position: relative;
    }
    
    #main-top {
    	clear: both;
    	background: url('images/main-top.png') no-repeat;
    	width: 998px;
    	height: 2px;
    }
    
    #main-bottom {
    	background: url('images/main-bottom.png') no-repeat;
    	width: 998px;
    	height: 2px;
    	clear: both;
    }
    
    #left {
    	float: left;
    	width: 662px;
    	margin: 0 8px 0 0;
    	display: inline;
    }
    
    #left-pad {
    	padding: 10px 10px;
    }
    
    #sidebar {
    	float: left;
    	width: 268px;
    	display: inline;
    }
    
    #sidebar-pad {
    	padding: 0 3px 25px 3px;
    }
  2. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    the black line is from the background image. as i said in an earlier reply, the background image is a patterned black/grey gradient with a black line at the top, and grey #1d1d1d at the bottom.

    you could try (only first line is different):

    body {
    	background: #1d1d1d url('images/body-bg.png') top repeat-x;
    	color: #FFFFFF;
    	font-style: normal;
    	line-height: 140%;
    	text-align: center;
    	padding: 0;
    	margin: 0;
    	font: 13px 'Sansation Regular', tahoma;
    	/* font: 13px Lucida Grande,Helvetica,Arial,Verdana,sans-serif; */
    	letter-spacing: 0;
    }

    and see how you like that effect.

  3. Samuel B
    moderator
    Posted 4 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic