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
  • 114 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #739054

Dani AI

Generated

— the behavior you describe (the image showing only partially when content is short, and retiling when it grows) happens because one image file contains both the fixed caps and the variable middle. and pointed toward tiling and using image elements, but a more robust pattern is to separate the visual into three parts: top cap, a repeatable middle, and bottom cap — then let the middle expand with content. Below are three practical ways to do that so the box always looks correct as table data grows.

Simple, reliable (extra markup)

<div class="box">
  <div class="cap top"></div>
  <div class="body">
    <!-- dynamic table or rows go here -->
  </div>
  <div class="cap bottom"></div>
</div>

Use CSS to give the top/bottom fixed heights and background images, and make the middle use a small tile that repeats vertically. This is the best fallback for old browsers.

Cleaner, less markup (pseudo-elements)

.box { position:relative; padding:30px 20px; background:url("mid-tile.png") repeat-y; }
.box::before, .box::after { content:""; position:absolute; left:0; right:0; height:30px; background-repeat:no-repeat; }
.box::before { top:0; background-image:url("cap-top.png"); }
.box::after  { bottom:0; background-image:url("cap-bottom.png"); }

This keeps a single wrapper around your table and injects the fixed caps with ::before/::after.

Modern single-file option (CSS3)

Use CSS border-image to slice one image into edges and a center that stretches — neat if you want a single asset and modern-browser support. See MDN for details: border-image and the pseudo-element technique: ::before / ::after.

Practical tips: slice the image in your editor so the middle is a 1–3px high tile for seamless repetition; make the wrapper's top/bottom padding equal to the cap heights; wrap your dynamic <table> inside the decorative <div> (keep tables for tabular data only). For broad compatibility, implement the three-slice markup first and add pseudo-element or border-image enhancements as progressive improvements.

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 Member #739054

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.