image with an image as watermark? Oo?

[rootKID]

Okay, my title should say it all, just not sure if this is possible, nothing i have been making for a while now.

 

Here is an example of what happens with my code at the moment:

 

 

As you see, i have tried adding an image as my watermark INSIDE the image itself at the blog i'm about to code/finish.

My ideas is to get the watermark image inside all images posted on my website later on in the bottom/right corner, as you see in the image also.

 

Any suggestions? Because the images i'm generating is coming from my database, so you should guess it would be pretty simple?

 

This is my code for the generation at the moment:

		$blog_query = "		SELECT			blog_id,			blog_picture_url,			blog_title,			blog_message,			blog_created_date,			blog_edited_date,			blog_userid		FROM			blog				ORDER BY blog_id DESC				LIMIT 5		";		$blog_result = $mysqli->query($blog_query);				// If bigger than 0		if ($blog_result->num_rows > 0)		{			echo "<div class='home_blog_wrapper'>"; // Wrapper				echo "<div class='home_blog_wrapper_inner'>"; // Wrapper Inner				echo "<hr />";				// output data of each row				while($row = $blog_result->fetch_assoc())				{					//echo "";										echo "<div class='home_blog_box_header'>";						// Blog Title						echo "<div class='home_blog_box_header_title'>";							echo $row['blog_title'];						echo "</div>";												// Blog Number (#)						echo "<div class='home_blog_box_header_blog_post'>";							echo "Blog indlæg, #".$row['blog_id'];														// Date							echo "<div class='home_blog_box_header_blog_date'>";								echo date('d/m/Y H:i:s', strtotime($row['blog_created_date']));							echo "</div>";						echo "</div>";					echo "</div>";										echo "<img src='".$row['blog_picture_url']."' alt='Blog Billede' title='Blog Billede'>";						echo "<img class='watermark' src='style/images/img_watermark.png' alt='Vandmærke' title='Vandmærke'></img>";						echo "Derp";					echo "</img>";										/*					echo "<div class='home_blog_image_div_sized'>";						echo "<img class='watermarked' src='".$row['blog_picture_url']."' /><br />";					echo "</div>";										echo nl2br($row['blog_message'])."<br />";					echo $row['blog_userid']."";					*/					echo "<hr />";				}				echo "</div>"; // Wrapper Inner			echo "</div>"; // Wrapper		}		else		{			echo "Ingen blog-nyheder er tilføjet i nu!";		}		$mysqli->close();

and this is my style as it is at the moment:

/*# Global Design==================================================*/img.watermark {	/*background-image: url(images/img_watermark.png);*/	height: 40px;	width: 40px;	position: absolute;	bottom: 40px;	right: 40px;}.home_news {	border-radius: 5px;	background-color: #C2C2C2;}	.home_blog_wrapper {		clear: both;		width: 100%;	}		.home_blog_wrapper_inner {			margin: 10px;		}				.home_blog_box_header {			width: 100%;		}			.home_blog_box_header_title {width: 100%; font-style: normal; font-weight: bold;}			.home_blog_box_header_blog_post {text-align: left;}				.home_blog_box_header_blog_date {float: right;}		.home_blog_wrapper_inner hr {margin-top: 5px; margin-bottom: 5px;}

Any ideas about what i'm doing wrong? Any help would be greightly appreciated!

 

Thanks!

[Ingolme]

Image elements are empty elements. You can't put anything inside them. If you want a watermark, open the image in a photo editor and add the watermark manually.

 

If you really want a program that automatically adds watermarks, learn about PHP's GD library: http://php.net/manual/en/book.image.php

[rootKID]

hmm... ok, thanks alot! I might just do that, i just wish to have the "option" to add the watermarks via my website whenever i upload or make a new blog ... in case i make a blog while im at a friends house x)

 

Thanks for the info tho! .P

[Wolverine]

You could try the HTML FOOTER TAG:

Definition and Usage The <footer> tag defines a footer for a document or section. A <footer> element should contain information about its containing element. A <footer> element typically contains: • authorship information•copyright information•contact information•sitemap•back to top links•related documents You can have several <footer> elements in one document.

[Day]

While it wouldn't actually watermark your images or stop people from saving the images without the water mark on them, it is possible to place the watermark over top the image by making the following changes:

		$blog_query = "		SELECT			blog_id,			blog_picture_url,			blog_title,			blog_message,			blog_created_date,			blog_edited_date,			blog_userid		FROM			blog				ORDER BY blog_id DESC				LIMIT 5		";		$blog_result = $mysqli->query($blog_query);				// If bigger than 0		if ($blog_result->num_rows > 0)		{			echo "<div class='home_blog_wrapper'>"; // Wrapper				echo "<div class='home_blog_wrapper_inner'>"; // Wrapper Inner				echo "<hr />";				// output data of each row				while($row = $blog_result->fetch_assoc())				{					//echo "";										echo "<div class='home_blog_box_header'>";						// Blog Title						echo "<div class='home_blog_box_header_title'>";							echo $row['blog_title'];						echo "</div>";												// Blog Number (#)						echo "<div class='home_blog_box_header_blog_post'>";							echo "Blog indlæg, #".$row['blog_id'];														// Date							echo "<div class='home_blog_box_header_blog_date'>";								echo date('d/m/Y H:i:s', strtotime($row['blog_created_date']));							echo "</div>";						echo "</div>";					echo "</div>";										// wrap your images in a div					echo "<div class='relativeParent'>";						// images are empty elements so the forward slash stays in the opening tag						echo "<img src='".$row['blog_picture_url']."' alt='Blog Billede' title='Blog Billede' />";						// ditto						echo "<img class='watermark' src='style/images/img_watermark.png' alt='Vandmærke' title='Vandmærke' />";										// close the wrapping div					echo "</div>";										/*					echo "<div class='home_blog_image_div_sized'>";						echo "<img class='watermarked' src='".$row['blog_picture_url']."' /><br />";					echo "</div>";										echo nl2br($row['blog_message'])."<br />";					echo $row['blog_userid']."";					*/					echo "<hr />";				}				echo "</div>"; // Wrapper Inner			echo "</div>"; // Wrapper		}		else		{			echo "Ingen blog-nyheder er tilføjet i nu!";		}		$mysqli->close();

/*# Global Design==================================================*//* Set the position property of the relativeParent div to relative.   This will insure that the bottom and right properties of the watermark are relative to the relativeParent div */.relativeParent {	position: relative;}img.watermark {	/*background-image: url(images/img_watermark.png);*/	height: 40px;	width: 40px;	position: absolute;	bottom: 40px;	right: 40px;}.home_news {	border-radius: 5px;	background-color: #C2C2C2;}	.home_blog_wrapper {		clear: both;		width: 100%;	}		.home_blog_wrapper_inner {			margin: 10px;		}				.home_blog_box_header {			width: 100%;		}			.home_blog_box_header_title {width: 100%; font-style: normal; font-weight: bold;}			.home_blog_box_header_blog_post {text-align: left;}				.home_blog_box_header_blog_date {float: right;}		.home_blog_wrapper_inner hr {margin-top: 5px; margin-bottom: 5px;}

[rootKID]

Thanks everyone! I found a solution