Member Avatar for samw1

I want to add side images to my html page. On the entire left and right side of the page I want a image repeating vertically (different for each side).

How do I go about doing it?

  • 2 Contributors
  • 3 Replies
  • 88 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by samw1

Recommended Answers

All 3 Replies

Member Avatar for Lusiphur

Simply because there's a few different ways you can accomplish this in CSS I'll toss you this link here to a search where the top 3-4 results should be able to help you through that.

Hope this helps :) Please remember to mark as solved once your issue has been resolved.

Member Avatar for samw1 
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #1280d5;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 80%;
	max-width: 905px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	background: #1280d5;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}


.outerx2{
padding-left:100px;
background: url(images/Light_02.jpg) repeat-y left top;
}
.innerx2{
background:#d2da9c url(images/ragged-left.gif) repeat-y right top;
padding:1em 1em 1em 0;
}
/* mac hide \*/
* html .innerx2{height:1%}
/* force "layout" in IE */
.outerx2 p{padding:0 10px;margin:0 0 1em 0}
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>

<body>

<div class="outerx2">

<div class="container">

 <!-- Content Here -->
  
</div>
  
</div>
</body>
</html>

I edited out unnecessary info.

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.