Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Background image either side of webpage

Options
  • 28-10-2012 3:00pm
    #1
    Registered Users Posts: 173 ✭✭


    I am looking to have a background image to fill the voids created on larger displays on either side of the webpage.

    I have now successfully centered the page but want to have an image in the voids.

    Like this site http://www.skysports.com/football

    My style sheet code goes like this: (have corresponding div tags in the HTML)
    @charset "utf-8";
    #wrapper {
    	float: left;
    	height: auto;
    	width: 960px;
    	background-image: url(Resources/Images/lgrey162.jpg);
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    }
    #container {
    	width: 960px;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    #header {
    	float: left;
    	height: auto;
    	width: 960px;
    	margin-bottom: 10px;
    	background-image: url(Resources/Images/lgrey011.jpg);
    }
    #mainwrapper {
    	float: left;
    	height: auto;
    	width: 960px;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    #navbar {
    	float: left;
    	height: auto;
    	width: 90px;
    	margin-right: 10px;
    	padding-left: 10px;
    	background-image: url(Resources/Images/lgrey011.jpg);
    }
    #triwrapper {
    	float: left;
    	height: auto;
    	width: 680px;
    }
    
    #mainarea {
    	float: left;
    	height: auto;
    	width: 680px;
    	margin-right: 5px;
    	margin-left: 0px;
    	background-image: url(Resources/Images/lgrey008.jpg);
    	margin-bottom: 10px;
    	color: #000000;
    }
    
    .prodbox {
    	float: left;
    	height: auto;
    	width: 330px;
    	margin-right: 5px;
    	margin-left: 5px;
    	margin-bottom: 10px;
    	background-image: url(Resources/Images/lgrey008.jpg);
    }
    #adbar {
    	float: right;
    	height: auto;
    	width: 150px;
    	margin-left: 10px;
    	padding-bottom: 5px;
    	background-image: url(Resources/Images/lgrey011.jpg);
    }
    .footerbox {
    	background-color: #0F0;
    	float: left;
    	height: auto;
    	width: 480px;
    }
    .adbox {
    	background-color: #FF0;
    	float: left;
    	height: auto;
    	width: 140px;
    	margin-left: 5px;
    	margin-top: 5px;
    }
    .imagecaption {
    	color: #000000;
    	font-size: 11px;
    }
    
    

    Any ideas ? Thanks. Novice Student Here


Comments

  • Closed Accounts Posts: 9,700 ✭✭✭tricky D


    You want it outside the wrapper, ie. in the body

    body {
    background-image: url(Resources/Images/bigbackground.jpg);
    }


  • Registered Users Posts: 1,801 ✭✭✭cormee


    CSS3 allows for multiple background images, so you could consider that option.


Advertisement