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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    40
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Text over Background Image

    Hi all!

    I am trying to add text over a background image. I am using an external style sheet and using DIV tag within the HTML page.

    I have made a test page for you to look at. Look at the bottom of the footer. I am trying to move the image underneath the text "DIV and CSS".

    Here is the HTML page:



    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>DIV and External Style Sheet</title>
    
    <link href="Std.css" rel="stylesheet" type="text/css">
    
    </head>
    
    <body>
    
    
    
    
    <div id="header">
      
    <h1>DIV and External Style Sheet</h1>
    
      <p>A great way to speed up!</p>
    
    </div>
    
    <div id="list">
    
    <ul>
      <li id="nav-home"><a href="index.html"><span>Home</span></a></li>
      <li id="nav-design"><a href="design.html"><span>Site Design</span></a></li>
      <li id="nav-host"><a href="hosting.html"><span>Hosting</span></a></li>
      <li id="nav-port"><a href="portfolio.html"><span>Portfolio</span></a></li>
      <li id="nav-contact"><a href="contact.html"><span>Contact</span></a></li>
    </ul>
    
    
    
    
    </div>
    
    
    <div id="content">
    
    
        <p>Improve work process! dfsdf s sdfsdf sdf sdf sdf sdf </p>
        <p>Simple to make changes!</p>
        <p>Extremely easy to manage!</p>
        <p>A top notch performer!</p>
    	 <p>Improve work process!</p>
    
    
    </div>
    
    
    
    
    
    
    
    
    <div id="header2">
      
    <h2>DIV and CSS </h2>
    
    
    
        <p>Improve work process!</p>
        <p>Simple to make changes!</p>
        <p>Extremely easy to manage!</p>
        <p>A top notch performer!</p>
    	<p>Improve work process!</p>
        <p>Simple to make changes!</p>
        <p>Extremely easy to manage!</p>
        <p>A top notch performer!</p>
    	<p>Improve work process!</p>
        <p>Simple to make changes!</p>
        <p>Extremely easy to manage!</p>
        <p>A top notch performer!</p>
    	<p>Improve work process!</p>
        <p>Simple to make changes!</p>
        <p>Extremely easy to manage!</p>
    
    
    
    </div>
    
    
    
    
    
    
    
    <div id="footer">
    
    
    
      <p>DIV and CSS</p>
    
    </div>
    
    
    
    
    
    
    
    
    </body>
    
    </html>



    Here is the external style sheet:

    Code:
    * {
    	border: 0;
    	margin: 0;
    	padding: 0;
    }
    html, body {
    	min-height: 100%;
    	height: 100%;
    }
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	background-image: url(Background.gif);
    	background-position: center;
    	background-repeat: repeat-y;
    	position: relative;
    }
    
    #header h1 {
    	font-size: 20px;
    	color: #BD8538;
    	width: 380px;
    	height: 115px;
    	background-image: url(0000000.jpg);
    	background-repeat: no-repeat;
    	padding-top: 50px;
    	padding-left: 630px;
    }
    
    
    #header p {
    	font-size: 12px;
    	color: #ffffff;
    	width: 380px;
    	height: 115px;
    	background-image: url(00000000.jpg);
    	background-repeat: no-repeat;
    	padding-top: 50px;
    	padding-left: 630px;
    }
    
    
    
    
    #header2 h2 {
    	font-size: 15px;
    	color: #BD8538;
    	width: 380px;
    	height: 25px;
    	background-image: url(0000000.jpg);
    	background-repeat: no-repeat;
    	padding-top: 10px;
    	padding-left: 630px;
    }
    
    #header2 p {
    	font-size: 12px;
    	color: #ffffff;
    	width: 380px;
    	background-image: url(00000000.jpg);
    	background-repeat: no-repeat;
    	padding-left: 630px;
    }
    
    
    #list {
    	font-size: 12px;
    	color: #000000;
    	width: 380px;
    	background-image: url(00000000.jpg);
    	background-repeat: no-repeat;
    	padding-left: 660px;
    	padding-bottom: 15px;
    }
    
    
    
    
    
    #content {
    	font-size: 12px;
    	color: #ffffff;
    	width: 380px;
    	background-image: url(00000000.jpg);
    	background-repeat: no-repeat;
    	padding-left: 630px;
    	padding-bottom: 100px;
    }
    
    
    
    
    
    #footer h4{
    	font-size: 12px;
    	color: #ffffff;
    	width: 380px;
    	background-image: url(00000000.jpg);
    	background-repeat: no-repeat;
    	padding-left: 630px;
    	padding-bottom: 30px;
    	padding-top: 50px;
    }
    
    #footer p{
    	font-size: 12px;
    	color: #ffffff;
    	width: 380px;
    	padding-left: 630px;
    	padding-top: 50px;
    	padding-bottom: 125px;
    	background-image: url(background_image.jpg);
    	background-repeat: no-repeat;
    	z-index: 1;
    
    }


    I tried to do this within the #footer style.



    Thanks!!

  • #2
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Have you tried using position:relative, etc. for your text to place it over the image? http://www.w3schools.com/css/pr_class_position.asp

  • #3
    New Coder zfred09's Avatar
    Join Date
    Dec 2006
    Posts
    69
    Thanks
    0
    Thanked 5 Times in 5 Posts
    I would suggest using/learning floats, very nice. http://www.w3schools.com/css/pr_class_float.asp

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I am not sure what you are after.
    This page has text over a jpeg. Might help you.

    http://exitfegs.co.uk/hol3large.html

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I am trying to move the image underneath the text "DIV and CSS".
    Normally text will be placed over the background image. I guess it's not visible for you, since the background color of footer and the text insed <p> are same.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Oct 2007
    Posts
    40
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks everyone for your help!

    I am still trying to get the smaller background image to center underneath the text "DIV and CSS" at the bottom footer. For some reason, it's not showing up at all. I have attached a zip file for everyone to look at. There is an image within the zip file called "background_image.jpeg" and that is the image I want to put it underneath the text "DIV and CSS".

    I already know how to add a background image to the <body> tag. Maybe adding another background image over another background image is not possible.

    Thanks!!
    Attached Files Attached Files


  •  

    Posting Permissions

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