Subwoofer image to wrap around content

Hi there everyone. Very new to CSS. Have a project under way that requires an image of a sub woofer to contain my main content. So I guess I will need to have sides that will extend with the length of the content and separate images for the top and bottom and another image in behind the content that will be the sub itself.

How can I go about making this work???

Welcome to Sitepoint :slight_smile:

Yes, something along those lines would work, the solution really depends on what the image looks like - do you have a link?
You need to make boxes that are flexible with height because the text can be always be different sizes on different computers.

Thanks for that - but how would you go about coding something like that so that all the images and divs sit nicely on the page and the sides of the amp extend to fit the text/ content??

Thanks for your help too btw :slight_smile:

We really need to see the image of what you’re trying to replicate to give the right advice.
Most people who have been designing for the web for a while don’t try to fit variable height text into fixed height images.
Here’s one way to achieve what you’re after.


<div class="sub">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>


.sub {
  width: 300px;
  background: blue url(sub-sides.png) repeat-y 0 0;
}
.sub .inner {
  padding: 20px;
}
.sub:before, .sub:after {
  display: block;
  content: '';
  height: 30px;
  background: red url(sub-top.png) repeat-y 0 0;
}
.sub:after {
  background: red url(sub-bottom.png) repeat-y 0 0;
}

Give the wrapper the repeating side images, add an element top and bottom, add padding to the inner element.
The :before and :after are generating the top and bottom elements, kind of like doing this, but without having to put them into the HTML.


<div class="sub">
  <div class="top"></div>
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="bottom"></div>
</div>

ok so here is the type of image that I am talking about do you think this would work with your suggestion above?

Since you can neatly slice a horizontal line through the middle of that image, it should be ok to expand vertically. The middle section can be cut out and allowed to repeat as much as needed.