...

View Full Version : Text over Background Image



creativemind
05-23-2008, 01:27 AM
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:




<!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:




* {
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!!

RexxCrow
05-23-2008, 01:59 AM
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

zfred09
05-23-2008, 04:53 AM
I would suggest using/learning floats, very nice. http://www.w3schools.com/css/pr_class_float.asp

effpeetee
05-23-2008, 06:06 PM
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

abduraooft
05-23-2008, 06:27 PM
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.

creativemind
05-24-2008, 12:02 AM
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!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum