Results 1 to 5 of 5

Thread: Background image not showing up

  1. #1
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Background image not showing up

    Hello all,

    I'm new to CSS and websites. Mainly just trying to teach myself something new. But can someone help me. I'm probably doing this wrong but here's the code and if someone has some ideas that'd be great. Basically, img03 is not showing up like I expect it to so my webpage doesn't look right. And yes, the img files are there and in the images folder.

    Code:
    /*
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    */
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	margin: 0px;
    	background: #002F43 url(images/bg01.jpg) repeat-x;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #B9B9B9;
    }
    
    h1, h2, h3 {
    	margin-bottom: 1.5em;
    }
    
    h1 {
    	font-size: 2em;
    }
    
    h2 {
    	font-size: 1.4em;
    }
    
    h3 {
    	font-size: 1em;
    }
    
    p, ul, ol {
    	margin-bottom: 1.5em;
    	line-height: 180%;
    }
    
    ul, ol {
    	margin-left: 3em;
    }
    
    blockquote {
    	margin-left: 3em;
    	margin-right: 3em;
    }
    
    a {
    	color: #8AC800;
    }
    
    a:hover {
    	text-decoration: none;
    }
    
    strong {
    	color: #D7D7D7;
    }
    
    img.left {
    	float: left;
    	margin: 5px 25px 0px 0px;
    }
    
    img.right {
    	float: right;
    	margin: 5px 0px 0px 25px;
    }
    
    /* Background */
    
    #bg1 {
    	background: url(images/bg02.jpg) no-repeat center top;
    }
    
    #bg2 {
    	background: url(images/bg03.jpg) no-repeat center top;
    }
    
    #bg3 {
    	background: url(images/bg04.jpg) repeat-y center top;
    }
    
    #bg4 {
    	background: url(images/bg05.jpg) no-repeat center top;
    }
    
    #bg5 {
    	background: url(images/bg06.jpg) no-repeat center bottom;
    }
    
    /* Header */
    
    #header {
    	width: 900px;
    	height: 145px;
    	margin: 0px auto;
    	text-transform: lowercase;
    	color: #FFFFFF;
    }
    
    #header h1 {
    	float: left;
    	margin: 0px;
    	padding: 70px 0px 0px 25px;
    	font-size: 40px;
    }
    
    #header h1 sup {
    	font-weight: normal;
    }
    
    #header h2 {
    	float: right;
    	margin: 0px;
    	padding: 95px 25px 0px 0px;
    	font-size: 14px;
    }
    
    #header a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    /* Header2 */
    
    #header2 {
    	width: 900px;
    	height: 88px;
    	margin: 0px auto;
    }
    
    /* Menu */
    
    #menu {
    	float: left;
    }
    
    #menu ul {
    	margin: 0px;
    	padding: 34px 0px 0px 0px;
    	list-style: none;
    	text-transform: lowercase;
    }
    
    #menu li {
    	float: left;
    }
    
    #menu a {
    	padding-left: 50px;
    	text-decoration: none;
    	font-size: 16px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    
    /* Search */
    
    #search {
    	float: right;
    }
    
    #search form {
    	margin: 0px;
    	padding: 35px 80px 0px 0px;
    }
    
    #search fieldset {
    	margin: 0px;
    	padding: 0px;
    	border: none;
    }
    
    #search input.text {
    	width: 160px;
    	background: none;
    	border: none;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #AEC38B;
    }
    
    #search input.button {
    	display: none;
    }
    
    /* Page */
    
    #page {
    	width: 846px;
    	margin: 0px auto;
    	padding: 40px 0px 0px 0px;
    }
    
    /* Content */
    
    #content {
    	float: left;
    	width: 583px;
    }
    
    .post {
    }
    
    .post .title {
    	height: 49px;
    	background: url(images/img02.gif) no-repeat;
    }
    
    .post .title h2 {
    	float: left;
    	padding: 12px 0px 0px 24px;
    	font-size: 24px;
    	text-transform: lowercase;
    }
    
    .post .title h2 a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    .post .title h2 a:hover {
    	color: #8AC800;
    }
    
    .post .title p {
    	float: right;
    	padding: 12px 24px 0px 0px;
    	font-size: 15px;
    	font-weight: bold;
    	color: #343434;
    }
    
    .post .entry {
    	padding: 30px 23px 0px 23px;
    }
    
    .post .meta {
    	height: 70px;
    	clear: left;
    	margin: 0px 23px;
    	padding: 15px 0px 0px 0px;
    	border-top: 1px solid #262626;
    }
    
    .post .meta .credit {
    	float: left;
    }
    
    .post .meta .links {
    	float: right;
    }
    
    .post .meta .links .more {
    	padding-left: 17px;
    	background: url(images/img05.gif) no-repeat left center;
    }
    
    .post .meta .links .comments {
    	padding-left: 19px;
    	background: url(images/img04.gif) no-repeat left center;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: right;
    	width: 236px;
    }
    
    #sidebar ul {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    
    #sidebar li {
    	background: url(images/img03.gif) no-repeat;
    	padding: 0px 23px 20px 23px;
    }
    
    #sidebar li ul {
    }
    
    #sidebar li li {
    	padding: 8px 0px;
    	background: none;
    	border-bottom: 1px solid #262626;
    }
    
    #sidebar h2 {
    	margin: 0px;
    	padding: 16px 0px 30px 0px;
    	text-transform: lowercase;
    	font-size: 14px;
    	color: #FFFFFF;
    }
    
    /* Footer */
    
    #footer {
    }
    
    #footer p {
    	margin: 0px;
    	padding: 20px 0px;
    	text-align: center;
    	text-transform: lowercase;
    	color: #566D77;
    }
    
    #footer a {
    	color: #8097A1;
    }
    Last edited by Snookerman; 04-27-2009 at 08:01 PM. Reason: added [code] tags

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Hey Tom, I'm afraid there's not much we can tell from the CSS code alone, please post a link to the page on your site or at least post your markup code so we can check it out and help you.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I don't even have a live site yet. This is just something I'm playing with on my home machine.

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Quote Originally Posted by Snookerman View Post
    at least post your markup code so we can check it out and help you.
    Good luck Tom!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    When I want to have a different background image for a page I tend to make a different class and then use that in the <body>

    eg
    Code:
    body {
    	margin: 0px;
    	background: #002F43 url(images/bg01.jpg) repeat-x;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #B9B9B9;
    }
    
    body.bg2 {
    	margin: 0px;
    	background: #003A39 url(images/bg02.jpg) repeat-x;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #B9B9B9;
    }
    I then use
    Code:
    <body class="bg2">
    May not be the most efficient but it hasn't failed me yet

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •