WordPress.org

Ready to get started?Download WordPress

Forums

How to make a background using a repeating image? (4 posts)

  1. wbaraz2
    Member
    Posted 4 years ago #

    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

  2. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    don't put a leading slash / before images:

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

  3. wbaraz2
    Member
    Posted 4 years ago #

    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

  4. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic