Member Avatar for kitsunemoon

I need help on this css content box
I want the content2.png to extend as long as the data on the table goes but I dont know how...
the content of the table is dynamic and would vary through the mysql data
It retiles whenever the text is long
and shows half of the picture if the text is short

Here is the code:

<html>
<head><style>
*{
	margin:0;
	padding:0;
}

body{
	font-size:0.825em;
	color:#666;
	font-family:Arial, Helvetica, sans-serif;
}

.content{
	width:900px;
	
	float:left;
	margin:10px;
	margin-left:80px;
	padding:50px;
	color:#000;
	
	background-image:url(/root-directory/images/content2.png);

	/* CSS3 rounded corners */

	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;

}
</style>
</head>
<body><table class="content">
<tr><td>
Text Here...
</td>
</tr>
</table>
</body>
</html>
  • 3 Contributors
  • 2 Replies
  • 101 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by BrianHelp

Recommended Answers

All 2 Replies

Member Avatar for papanyquiL

CSS uses nothing but containers and styling for existing HTML properties. You can't physically change the size of the image through CSS. For that, you need to do it via the <img> tag directly in your HTML to set width and height values, etc...

Member Avatar for BrianHelp

If the image just needs to repeat. You could use css to do this. You would do the following:

background-image:url(/root-directory/images/content2.png) repeat-x;
    background-image:url(/root-directory/images/content2.png) repeat-y;
    background-image:url(/root-directory/images/content2.png) repeat;
    background-image:url(/root-directory/images/content2.png) no-repeat;

The first example is repeat-x which mean it will repeat on the x axis which is horizontal.

The second example is repeat-y which means it will repeat only on the y axis which is vertical.

the third example is repeat which means it will repeat on the x and y access.

the fourth example is no-repeat which will not repeat the background at all, it will only display once.

to force the entire image to be displayed you can use a min-height or set a default height for the grid.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.