SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background not displaying on body(checked for answers)

    Hi all,

    I am trying to add a whote background to my body but it either is not appearing or it messes with the content.

    Code

    CSS
    HTML Code:
    #wrap{ 
    	width: 964px;
    	margin: auto; 
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -40px;
    	
    	
    	
    	
    }
    #bg
    {
    	
    	position: absolute; 
    	top: 0; 
    	left: 0; 
    	min-width: 100%;
    	min-height: 100%;
    	background :no-repeat;
    
    }
    div.header_main{
    	display : block;
    	position:relative;
    	padding : 2em;
    	text-align : center;
    	width: 850px;
    	min-width:850px;
    	max-width:850px;
    	height: 100px;
    	margin-left:auto;
    	margin-right:auto;
    	
    
    
    
    }
    div.left_bar{
    
    	
    	display : block;
    	position:relative;
    	width: 385.6px;
    	min-width:386px;
    	max-width:386px;
    	height : 80px;
    	margin-left:250px auto;
    	float: left;
    	
    	
    	
    }
    div.middle_bar{
    
    	
    	display : block;
    	position:relative;
    	width: 192px;
    	min-width:192px;
    	max-width:192px;
    	height : 80px;
    	float : left;
    	
    
    }
    div.right_bar{
    
    	
    	display : block;
    	position:relative;
    	width: 386px;
    	min-width:386px;
    	max-width:386px;
    	height : 80px;
    	float : left;
    	
    	
    	
    }
    div.left_panel{
    	
    	
    	display : block;
    	float : left;
    	position: relative;
    	width:44px;
    	height:600px;
    	margin-left:250px auto;
    	border-left:ridge;
    	border-width:5px;
    	border-color: rgb(100,149,237);
    	
    	
    }
    div.right_panel{
    	
    	display : block;
    	float : right;
    	position: relative;
    	width:44px;
    	height:600px;
    	margin-right:200px auto;
    	border-right:ridge;
    	border-width:5px;
    	border-color: rgb(100,149,237);
    	
    	
    }
    div.footer_bar{
    
    	
    	
    	width: 964px;
    	position:relative;
    	min-width:964px;
    	max-width:964px;
    	height : 40px;
    	
    }
    div.window
    {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	width: 680px;
    	height:400px;
    	background-color:rgb(255,255,255);
    
    
    
    
    
    
    }
    div.windows
    {
    	
    	border-style:outset;
    	width: 130px;
    	height:400px;
    	float:left;
    	position :relative;
    }
    
    
    
    
    div.border
    {
    
    
    	border-style:solid;
    	border-width:3px;
    	border-color: rgb(0,0,0);
    	border-width:25px 25px 25px 25px;
    	-moz-border-image:url("b1.png") 30 30 30 30 Stretch stretch;
    	-webkit-border-image:url("b1.png") 30 30 30 30 Stretch stretch;
    	border-image:url("b1.png") 30 30 30 30 Stretch stretch;
    
    }
    p.content
    {
    	display : block;
    	width: 850px;
    	min-width:850px;
    	max-width:850px;
    	text-align: center;
    	
    	
    }
    div.body{
    	
    	background-color : rgba(255,255,255,0);
    	position : fixed;
    	background-size : 100%;
    
    
    
    }

    HTML
    HTML Code:
    <!DOCTYPE HTML>
    		<html xmlns="http://www.w3.org/1999/xhtml">
    
    
    		<head>
    		
    		<meta charset="UTF-8">
    		<link href="general.css" rel="stylesheet" type="text/css">
    		<title>TEMP NAME</title>
    		<img src="blue.png" id="bg" alt=""> 
    		<div class="header_main">
    		
    		Logo and heading(Picture) animated
    		</div>
    		</head>
    		
    		<body id="wrap">
    		<div class="whole">
    		<div class="left_bar">
    		<img src="left_bar.png" alt="Left Bar"></img>
    		</div>
    		<div class="middle_bar">
    		<img src="middle_bar.png" alt="Middle Bar"></img>
    		</div>
    		<div class="right_bar">
    		<img src="right_bar.png" alt="Right Bar"></img>
    		</div>
    		<div class="left_panel">
    		
    		</div>
    		<div class="right_panel">
    		
    		</div>
    		
    		
    		
    		<div class="window">
    		
    		<div class="windows">
    		<embed src="test.mov" width="130" height="400" controller="false" autostart="true" loop="true" >
    		</div>
    		<div class="windows">
    		<embed src="test.mov" width="130" height="400" controller="false" autostart="true" loop="true" >
    		</div>
    		<div class="windows">
    		<embed src="test.mov" width="130" height="400" controller="false" autostart="true" loop="true" >
    		</div>
    		<div class="windows">
    		<embed src="test.mov" width="130" height="400" controller="false" autostart="true" loop="true" >
    		</div>
    		<div class="windows">
    		<embed src="test.mov" width="130" height="400" controller="false" autostart="true" loop="true" >
    		</div>
    		</div>
    		
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		
    		
    		
    		</div>
    		
    		</body>
    		
    		
    		</html>


    I have been trying to find solutions for hours now but i cant even find a problem. Please help. Also my p.content tag is not appearing underneath my windows. Dont know what to do about that either .

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by djCurzed View Post
    I am trying to add a whote background to my body but it either is not appearing or it messes with the content.

    #bg
    {position: absolute; ...}
    Nah, wrong approach. Add it as an actual background image, via CSS. These days, you can set the image to cover the visible area easily. E.g.

    Code:
    body {
    background-image: url(blue.png);
    background-size: cover;
    }
    There are other options, if that doesn't suit, such as

    Code:
    background-size: 100% 100%;

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey man thanks a lot that worked. Its pretty stupid that I have to create a white background image though. Hehe

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by djCurzed View Post
    Its pretty stupid that I have to create a white background image though. Hehe
    Yes, no doubt there was a better way to get the result you wanted.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ye lol. I wonder if you can also help me with my background image. I want it to extend so that the bottom is always touching the bottom of the window. Even if that means it cuts off some of the width. Because right now it displays a white strip at the bottom.

    Here is my code :

    #bg{
    width: 100%;
    height:100%;
    min-width:1000px;
    min-height: 750px;
    position: absolute;
    top: 0;
    left: 0;
    }

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by djCurzed View Post
    I wonder if you can also help me with my background image. I want it to extend so that the bottom is always touching the bottom of the window. Even if that means it cuts off some of the width.
    That's what I was talking about above:

    Code:
    body {
    background-image: url(blue.png);
    background-size: cover;
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh lol I was talking about my content not body but that worked also lol thanks man much appreciated


Tags for this Thread

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
  •