Trying to make a image appear in back of a transparent text box

Page 1 of 1

11 Replies - 3539 Views - Last Post: 28 October 2011 - 06:30 PM

#1 black_yurizan  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 80
  • Joined: 18-June 11

Trying to make a image appear in back of a transparent text box

Posted 15 October 2011 - 11:00 AM

Hello everyone, I'm trying to to this tutorial from w3schools http://www.w3schools...ransparency.asp . The actual thing I'm trying to learn is the text in transparent box example. I know how to make the transparent box appear on my web page, however, I can't get the image i want to appear behind the transparent box.
The way they put the background image behind their box is by putting this code 


<style type="text/css">
div.background{height: 500px; width:500px; background(image.jpg);}
</style>


Whenever I try to put an image in the background slot it never shows up. Unless I put single or double quotation marks around the image name, yet when I do that the image is clipped off and it's never fully shown. Does anyone know what's going on? Does this have to do with the type of internet browser I'm using ? (which is firefox) Or maybe this way of putting a image up is deprecated? I don't know

This post has been edited by black_yurizan: 15 October 2011 - 11:00 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Trying to make a image appear in back of a transparent text box

#2 black_yurizan  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 80
  • Joined: 18-June 11

Re: Trying to make a image appear in back of a transparent text box

Posted 15 October 2011 - 04:08 PM

Here is a better example of what it looks like

<head>
<style type="text/css">
div.transbox{height:100px; width:200px; position:relative; left:100px; bottom:-100px;}
div.transbox p{  opacity:0.4; background-color:white; margin:30px; padding:10px;
border:solid black 1px; }
div.background{width:500px; height:500px; background:url(hot.jpg); 
 }
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p> This is a paragraph that has the transparent background</p>
</div>
</div>
</body>

Was This Post Helpful? 0
  • +
  • -

#3 FrankC  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 42
  • Joined: 06-October 11

Re: Trying to make a image appear in back of a transparent text box

Posted 15 October 2011 - 06:19 PM

Can you put it online? It's difficult to tell without live example, because an image and an image path are involved.
Was This Post Helpful? 0
  • +
  • -

#4 black_yurizan  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 80
  • Joined: 18-June 11

Re: Trying to make a image appear in back of a transparent text box

Posted 15 October 2011 - 07:58 PM

well... how do i do that ?
Was This Post Helpful? 0
  • +
  • -

#5 FrankC  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 42
  • Joined: 06-October 11

Re: Trying to make a image appear in back of a transparent text box

Posted 16 October 2011 - 12:51 AM

Get a hosting account and upload the files. Most website editors have a built-in FTP upload function. There are also free hosts, e.g. http://www.000webhost.com/, but if you want your own URL, you should get a paid hosting account.
Was This Post Helpful? 0
  • +
  • -

#6 JacksonD  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 215
  • Joined: 18-October 11

Re: Trying to make a image appear in back of a transparent text box

Posted 24 October 2011 - 05:57 AM

I know this thing.. can't remember the name. But you put your code in and it makes the page for you. NO sign up needed. It was great, can't remember it though.
Was This Post Helpful? 0
  • +
  • -

#7 I X Code X 1  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 47
  • View blog
  • Posts: 66
  • Joined: 28-July 10

Re: Trying to make a image appear in back of a transparent text box

Posted 24 October 2011 - 07:03 AM

This seems to work for me. I tested in the newest version of firefox and also in IE9. However, in IE9 the box is not transparent. This may be that IE9 (and probably other IE's) do not support this CSS3 feature.

<html>
	<head>
		<style type="text/css">
			div.transbox{height:100px; width:200px; position:relative; left:100px; bottom:-100px;}
			div.transbox p{  opacity:0.4; background-color:white; margin:30px; padding:10px;
			border:solid black 1px; }
			div.background{width:500px; height:500px; background:url(cows.jpg) no-repeat;}
		</style>
	</head>
	<body>
		<div class="background">
			<div class="transbox">
				<p> This is a paragraph that has the transparent background</p>
			</div>
		</div>
	</body>
</html>


This seems to be what you want, right?

Click here for a picture of what it looks like.


Make sure your image is in the same folder as your html document. For example, when I made this: the html document and image where both sitting on my Desktop. Thus, in the background: url(cows.jpg) no-repeat; , that's all I had to write. If your image is not showing up there is a very good chance you do not have this correct.

Also, this link can help you have cross-browser compatibility.

In a nutshell, use this code and it should work in all browsers.
.transparent {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
}

This post has been edited by I X Code X 1: 24 October 2011 - 08:56 AM

Was This Post Helpful? 1
  • +
  • -

#8 EnvXOwner  Icon User is offline

  • PHP Brogrammer
  • member icon

Reputation: 355
  • View blog
  • Posts: 2,314
  • Joined: 10-August 09

Re: Trying to make a image appear in back of a transparent text box

Posted 24 October 2011 - 01:17 PM

If you don't want the text to fade as well, you can use RGBa colors. It's basically RGB with an alpha filter. You can see more about them here. Also, I wouldn't suggest w3schools.com for learning HTML and CSS. Also, I really see no need for the op to provide us with a live version, so you don't need to go through the trouble of setting up hosting if you don't want to.
Was This Post Helpful? 0
  • +
  • -

#9 JacksonD  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 215
  • Joined: 18-October 11

Re: Trying to make a image appear in back of a transparent text box

Posted 24 October 2011 - 02:26 PM

I only managed to learn DOM on W3schools.

I don't recommend using it.

This post has been edited by JacksonD: 24 October 2011 - 11:42 PM

Was This Post Helpful? 0
  • +
  • -

#10 EnvXOwner  Icon User is offline

  • PHP Brogrammer
  • member icon

Reputation: 355
  • View blog
  • Posts: 2,314
  • Joined: 10-August 09

Re: Trying to make a image appear in back of a transparent text box

Posted 24 October 2011 - 02:39 PM

If you go to http://w3fools.com/, they'll explain to you how I feel about w3schools.
Was This Post Helpful? 0
  • +
  • -

#11 black_yurizan  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 80
  • Joined: 18-June 11

Re: Trying to make a image appear in back of a transparent text box

Posted 28 October 2011 - 09:26 AM

I'm still having trouble with the transparent box application. Like I said before, the image isn't resized to fit the whole box only a portion of the image is shown when I try to put a transparent box over it. I don't think it really has to do with the transparent box, I actually believe it has to do with the "background:url()" attribute.

The website to see the image is
http://blackyurizan....%20Reviews.html

or just look at the picture I uploaded

Again here is the code I used for the transparent box
Line 26-29 is the initialization and 51-55 is where I wrote it in



"http://www.w3.org/TR/html4/frameset.dtd"> 
<html>
<head>
<title > Anime Reviews </title>
<style type ="text/css">
p{color:white; font-family:verdana;}
.palette{background-color:rgb(1,23,60);  border-style:groove; border-width:10px; border-color:rgb(36,146,255); 
outline-style:inset; outline-width:10px; outline-color:rgb(50,70,255); text-align:center; 
margin-top:100px; margin-left: 170px; margin-right:30px; 
}
.menu{  list-style-type:none;
position:fixed; top:330px; border-width:2px; left:-20px;
}
a{ display:block;text-decoration:none; color:white;  
   background-color:rgb(1,23,60); font-size:20px; 
font-family:verdana; margin-bottom:10px;  border:solid rgb(36,146,255) }
a:visited{ background-color:black;}
 a:hover{background-color:rgb(36,146,255); color:white; }
 
 h1.recent{color:white; text-decoration:underline; }
div.red img:hover{ height:250px;width:250px; border:solid white 5px; }
div.red img:hover p{ opacity:0.4; background-color:rgb(36,146,255);}
img{margin:3px;}

#back{width:200px; height:200px; background:url(yyh.jpg)no-repeat; }
div.trans {position:relative; left:10px; bottom:-20px; }
div.trans p{opacity:0.4; padding:2px; margin:10px; font-weight:bold; color:black;
  background-color:rgb(36,146,255);}
</style>
</head>
<body style="background-color:rgb(0,18,49);">
<div style="text-align:center; font-size:3em; font-family:verdana;">
<h1 style="color:white;">J's Anime Reviews </h1>
</div>

<div class="palette">
<img src="Howl.jpg " width="700px" height="400px" />
<p>Welcome to the best Anime Reviews on the net and then some

</p>
<h1 class="recent"> My Recent Reviews</h1>

<div class="red">
  <img src="yyh.jpg" height="200px" width="200px"/>
<img src="dragon-ball-z.jpg" height="200px" width="200px"/>
<img src="outlaw.jpg" height="200px" width="200px"/>
<img src="chobits.jpg" height="200px" width="200px"/>
</div>

<div id="back">
<div class="trans">
<p> Hello, this is a transparent box </p>
</div>
</div>


<ul    class="menu" >
<li><a  href="www.google.com"> Home</a></li>
<li><a  href="www.google.com"> Full Review</a></li>
<li><a  href="www.google.com"> First Impression</a></li>
<li><a  href="www.google.com"> Movies</a></li>
</ul>




</body>
</html>

Attached File(s)

  • Attached File  trans.bmp (532.76K)
    Number of downloads: 22

Was This Post Helpful? 0
  • +
  • -

#12 JacksonD  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 215
  • Joined: 18-October 11

Re: Trying to make a image appear in back of a transparent text box

Posted 28 October 2011 - 06:30 PM

View PostEnvXOwner, on 24 October 2011 - 02:39 PM, said:

If you go to http://w3fools.com/, they'll explain to you how I feel about w3schools.


"We believe w3schools is harmful to the web. Web developers deserve better."
I CU WHAT U DID THAR!
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1