CODEWITHSUNDEEP
htmlcss
Sean Miller
Sean Miller

Reputation: 3

Can't figure out how to make a box with multiple images with CSS/HTML

I've got three images that I'm trying to use for a box like this in my website:

http://imageshack.us/photo/my-images/41/examplemg.png/

I am trying to do this with CSS and HTML but I have had no success on my own and have not found any article speaking on how to do this particularly.

I basically want it so that the mid_image repeats when I add content.

Upvotes: 0

Views: 2189

Answers (5)

mattcdev
mattcdev

Reputation: 3271

Other than set extra div and backgrounds this is how I would do it..

<div id="side_bar">
  <img src="top.jpg" alt="" class="top" />
  <div id="middle">
    text here
  </div>
  <img src="bottom.jpg" alt="" class="bottom" />
</div>

Then for the css I'd have

#side_bar {
   width: xxxpx;
}

#side_bar .top, #side_bar .bottom {
   display: block;
}

#middle {
  background: url(middle.jpg) repeat-y;
}

Upvotes: 0

Jon P
Jon P

Reputation: 19772

My 2 cents worth

HTML

<div id="container">
    <div id="content">Add some content</div>
    <div id="bottomImg"> </div>
</div>

CSS

#container {
   background-image: url("yourTopImage.png");
   background-position: left top;
   background-repeat:no-repeat;
   padding-top: /*Use Height of top image*/;
   width: /*Use Width Of Image*/   
 }

#content {
   background-image: url("yourRepeatingImage.png");
   background-repeat: repeat-y;
}

#bottomImg{
   background-image: url("yourBottomImage.png");
   height: /*Use Height of Bottom image*/;
   width: /*Use Width Of Image*/   
 }

The Lean CSS3 CSS2.1 Version. Wont work in IE7 and below

:after browser support

HTML

<div id="container">
    <div id="content">Add some content</div>
</div>

CSS

#container {
   background-image: url("yourTopImage.png");
   background-position: left top;
   background-repeat:no-repeat;
   padding-top: /*Use Height of top image*/;
   width: /*Use Width Of Image*/   
 }

#content {
   background-image: url("yourRepeatingImage.png");
   background-repeat: repeat-y;
}

#content:after{
   content: " ";
   display: block;
   background-image:url("yourBottomImage.png");
   height: /*Use Height of Bottom image*/;
   width: /*Use Width Of Image*/   
 }

The Leaner CSS3 CSS2.1 Version. Wont work in IE7 and below

:before/:after browser support

HTML

    <div id="content">Add some content</div>

CSS

#content:before {
   content: url("yourTopImage.png");      
   height: /*Use Height of top image*/;
   width: /*Use Width Of Image*/   
 }

#content {
   background-image: url("yourRepeatingImage.png");
   background-repeat: repeat-y;
}

#content:after{
   content: url("yourBottomImage.png");
   height: /*Use Height of Bottom image*/;
   width: /*Use Width Of Image*/   
 }

For an ugly as sin demo check out this fiddle

From all the answers you can see there are many ways to skin this cat!

Upvotes: 0

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

To repeat a background-image, you set the CSS background-repeat attribute. In your case you should set it to repeat-y.

Something like this should do it:

HTML:

<div id="top"></div>
<div id="middle">Content here</div>
<div id="bottom"></div>

CSS:

#top {
   background-image: url("sometopimage.png");
}
#middle {
   background-image: url("somemiddleimagetorepeat.png");
   background-repeat: repeat-y;
}
#bottom {
   background-image: url("somebottomimage.png");
}

Note Omitted size attributes in the example, since we don't have any measures on your layout. You will however need to add width and height to your elements, to fit your layout.

Upvotes: 2

SenorAmor
SenorAmor

Reputation: 3345

HTML:

<div class="container">
    <div class="top"><img src="top.jpg" height="" width="" alt="" /></div>
    <div class="middle">
        /* content here */
    </div>
    <div class="bottom"><img src="bottom.jpg" height="" width="" alt="" /></div>
</div>

CSS:

.middle { background: url('path/to/middle/image.jpg') repeat-y; }

Upvotes: 1

clem
clem

Reputation: 3366

try to create the following html structure

<div id="wrapper">
  <div id="top_image"></div>
  <div id="middle_image">
    text here
  </div>
  <div id="bottom_image"></div>
</div>

the assign the images as background images to their respective containers

Upvotes: 0

Related Questions