Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Background image either side of webpage

  • 28-10-2012 03:00PM
    #1
    Registered Users, Registered Users 2 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,698 ✭✭✭tricky D


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

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


  • Registered Users, Registered Users 2 Posts: 1,802 ✭✭✭cormee


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


Advertisement