WordPress.org

Support

Support » How-To and Troubleshooting » How to make a background using a repeating image?

How to make a background using a repeating image?

  • Hello

    I would like to make a background for my site using a repeating image. I have the image and I have tried putting it into my css. Here is what I have so far

    http://www.sportsremix.net

    Here is my css, what am I doing wrong? The image I want to repeat is main-bg2.png. As you can see, the background is only showing up in some places. I would like for this to be the background all over the site

    /* MAIN ELEMENTS */
    
    body {
    	background: #eaeaea;background-image:url(/images/main-bg2.png);background-repeat:repeat;}
    	color: #343434;
    	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;
    }
    
    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/main-bg2.png') repeat-x;
    	height: 96px;
    	padding: 0 30px;
    	position: relative;
    }
    
    #main {
    	padding: 0 30px;
    	background: url('images/main-bg2.png') repeat-x;
    	min-height: 500px;
    	overflow: hidden;
    	position: relative;
    }
    
    #main-top {
    	clear: both;
    	background: url('images/main-bg2.png') repeat-x;
    	width: 998px;
    	height: 2px;
    }
    
    #main-bottom {
    	background: url('images/main-bg2.png') repeat-x;
    	width: 998px;
    	height: 2px;
    	clear: both;
    }
    
    #left {
    	float: left;
    background: url('images/main-bg2.png') repeat-x;
    	width: 662px;
    	margin: 0 8px 0 0;
    	display: inline;
    }
    
    #left-pad {
    	padding: 10px 10px;
    }
    
    #sidebar {
    	float: left;
            background: url('images/main-bg2.png') repeat-y;
    	width: 268px;
    	display: inline;

    Any help is appreciated, thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • don’t put a leading slash / before images:

    background: #eaeaea;background-image:url(images/main-bg2.png);background-repeat:repeat;}

    Thank you for your help. I made the change but unfortunately it had no effect. I can’t seem to understand why the background is so random like this

    http://www.sportsremix.net

    it is showing now as body background. for you to see the change you may need to press CTRL F5 at the same time – this will clear the browser cache.

    the background image is a patterned grey gradient, if you keep putting it into every div, it will show the way it is now.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to make a background using a repeating image?’ is closed to new replies.
Skip to toolbar