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

Tags: html,css

Problem :

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

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.

Solution :

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:


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


#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.

    CSS Howto..

    How to detect CSS inheritance source?

    how to print 60 degree rotated watermark in HTML CSS

    How to implement min left/right in css

    CSS: How to remove enter from HTML?

    How can I memorize all CSS shorthands?

    How to set backround image in css

    How to create css based breadcrumb which supports IE8 [closed]

    CSS--how to detect screen aspect ratio and apply styling accordingly? [duplicate]

    How to vertical align top in my case

    How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?

    How do I break the border around text in css?

    How to do Background Image horizontal slide

    How do I add a mouseover drop shadow effect for circular images?

    How to achieve this awesome CSS animation

    Showing HTML page with CSS attached in a WebView

    How do I display content in a way like UICollectionView on the web?

    How to use @Media queries

    How to add space using css?

    How to use global variables in CSS-Modules?

    How do I apply desktop media queries style to IE?

    What is SVG and how does it work?

    How to remove space between bannner and content in wordpress theme?

    CSS: How to limit horizontal/vertical scrolling?

    How to make other line indent using css?

    How to check the CSS hyphens in effect using Chrome developer tools?

    How to use toggle css classes on an element onclick?

    How to turn off carousel when resized?

    How to include this basic html (CSS, JavaScript) template into a php file?

    How to use jQuery to find a certain string within a div, and then apply specific styles to another div if it exists? [closed]

    CSS: How do you keep this Div to the right of a float?