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
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Background image either side of webpage

  • 28-10-2012 2: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,700 ✭✭✭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