Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting text with background?

    Hi, i have the text:
    Code:
    <div id="foreat"><td><h3><p><b>What's the scoop on TV?</b></p></h3></td><td><p>Text goes here</td><br /><br /><td>TExt Goes here</td></div>
    and the image i want for the background is called "middlepic.png"


    Heres my css code:
    Code:
    #foreat
    }
    display: block;
    	
    	
    	position: relative;
    	width: 450px;
    	 top:41px;
    	margin-left: -370px;
    	left: 50%;
    font: 12px verdana;
    text-align:left;
    {
    I was wondering if someone could fix this code for me so that the middlepic.png was on the background of the text. Also could you make it so the text and background move when the browser window changes size.

    Thank you
    Last edited by Cheeseboy; 01-01-2007 at 04:51 PM.

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could try this

    Code:
    <style type="text/css">
    	body 	{
    			background:url("middlepic.png");
    		}
    	#foreat {
    			position:absolute;
    			width:450px;
    			top:41px;
    			left:50%;
    			font: 12px verdana;
    			text-align:left;
    			z-index:1;
    		}
    </style>
    
    <div id="foreat">
    
    
    	<h3>What's the scoop on SED TV?</h3>
    	<br />
    	Text goes here
    
    </div>
    If thats what you are looking for...

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry i meant to post this

    Code:
    <style type="text/css">
    	body 	{
    			background:url("middlepic.png");
    			}
    	#foreat {
    			position:absolute;
    			width:450px;
    			top:41px;
    			left:50%;
    			font: 20px verdana;
    			text-align:left;
    			z-index:1;
    			color:blue;
    			}
    	#maincontent
    			{
    				position:relative;
    				z-index:2;
    			}
    
    </style>
    
    <div id="foreat">
    
    
    	<h3>What's the scoop on SED TV?</h3>
    	<br />
    	Text goes here
    
    </div>
    <div id="maincontent">
    
    </div>
    and obviously put in the main content in main content...

    didnt edit because the site wouldnt let me

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    why does the text still move?
    Code:
    <style type="text/css">
    	body 	{
    			
    			
    			
    			
    }
    	#foreat {
    			position:absolute;
    			width:360px;
    			top:249px;
    			left:36%;
    			font: 11px verdana;
    			text-align:left;
    			z-index:1;
    			
    			}
    	#maincontent
    			{
    				position:relative;
    				z-index:-1;
    			}
    
    </style>
    
    
    
    
    
    
    </head>
    <body style="text-align: center;">
    
    <div id="foreat">
    
    
    <td><h3><p><b>What's the scoop on SED TV?</b></p></h3></td>
    <td><p>Text goes here</td>
    
    
    
    </div>	
    <div id="maincontent">
    <img src="titlepic1.png" alt="title"/>
    
    	<div id="masthead">
    		<a href="index.html"><img class="button"src="button1.png" alt="Button1"/></a>
    		<a href="sedtvs.html"><img class="button"src="button2.png" alt="Button2"/></a>
    		<a href="computers.html"><img src="button3.png" alt="Button3"/></a>
    		<a href="gifts.html"><img class="button"src="button4.png" alt="Button4"/></a>
    		<a href="travel.html"><img class="button"src="button5.png" alt="Button5"/></a>
    
    		<a href="finance.html"><img class=""src="button6.png" alt="Button6"/></a>
    </div>
    <img src="middlepic.png" alt="Click Here"/>
    
    
    </div>
    Thanks!


  •  

    Posting Permissions

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