Title: I have an odd-shaped image with text in it. How can I get the text to stay within the image even when scrolling?
Tags: html;css;image
Question: I have an image on my page that's got rough edges to look kind of torn and has an inner shadow to look like it's kind of an indentation of the page. I want the content that's on top of it to scroll under the edges of the image without going outside of the visible image. The image is a PNG and is transparent around the torn effect, but I still can't get it to hide under the background.

http://kellygoekenphotography.com/portfolio.php

Comment: Tangential, but consider using a responsive design to minimize scrolling. I like the effect, but (at least at higher resolutions) there's a little scrolling box and a lot of wasted space.

Comment: To start, read a little about responsive web design if you aren't familiar. Then perhaps try to create a background which can repeat horizontally and/or vertically. This could be quite difficult with the torn edge effect on all sides; you might choose to simplify it to better use real estate. It would be easy to have a torn effect down one or both sides.

Comment: Well I thought so to but I added an image at the top that had some transparency and it still scrolled under the image as though it had no transparency.

Comment: @TimMedora, yeah I understand what you're saying. What would you recommend? I'm fairly new to the design world.

Comment: Welcome to SO. Please read the [FAQ] and [Ask] for tips on writing good questions.  In your case, you given no information that would help someone answer your question, starting with your Javascript, HTML and CSS code.

Comment: The problem is that it's a `background`; you'll need to position an actual image, or another element containing an image/background-image, for the content to scroll 'under'/'behind'.

Here is the accepted answer: The problem is that you only have one image. Whether it is transparent or not is not going to affect it because in any case, it's underneath the text (or else you wouldn't be able to see the text). What you want to do is separate it into two images; one with just the background (silver shiny part) and another with only the ripped part and a transparent center. You would then place the background image underneath the text and the cutout image on top of the text (in the z-index).

Edit: 

OK I didn't notice that your background image has a transparent outside. What you want to do is this:


Keep the background image as it is
Take the original image file (I'm assuming Photoshop), and make the outside white instead of transparent.
Then take the center and make that transparent instead. So all you should have is the white frame around it.
Get rid of any layer effects
Save that image as your foreground
Make the text scroll on top of the background like you originally had it
Position this new image right on top of that area in exactly the same place as the background image


Edit2:

I just realized that won't work either because your page background is not white, but it has some sort of squiggly thing. I therefore thought of another alternative.

BG image will be the silver background without the layer effect above it. Just the plain old ordinary silver part however keep the transparent border around it as it is now.

Top image will be only the layer effect on a transparent background without the silver part. With this image as well, make sure you keep the transparent border around the image as well.

This way the text will be underneath the shadow effect, so when it scrolls at the top, the abrupt cut line won't be quite so obvious. You will probably see it a bit, but it will at least minimize the effect. Of course, the shadow effect will also be on top of the images and text, so you might not like this solution either.

Comment for this answer: This seems like it should work, but for some reason it's not! There must be something in my code that's not right somehow...
Comment for this answer: If you refresh the page, I added the image to it.
Comment for this answer: #content {
 width:575px;
 min-width:575px;
 max-width:575px;
 float:right;
 z-index:2;
 background:url(images/imgbg01.png) no-repeat;
 min-height:500px;
    }

    #cotext {
 padding-left:25px;
 padding-right:25px;
 color:#fff;
 max-height:350px;
 overflow-y:auto;
 overflow-x:hidden;
 border:none;
 text-align:center;
 position:relative;
 z-index:3;
    }
Comment for this answer: Ah okay, yes, thank you. I see where I went wrong! Thank you!
Comment for this answer: Thank you for all the help! I think the shadow only effect would be cool but I think I'll see how the first option goes. In fact, I'm only going to be able to put the top and bottom on as separate images as if I do one whole image over the top, I can't click on the images behind it. But it will do the same thing. Thank you once again!
Comment for this answer: Can I see what you have so far?
Comment for this answer: See my edit. I didn't notice that the background image was transparent around the border.
Comment for this answer: Good point about not being able to click on the links. I overlooked that.

Here is another answer: Replace this line

```<div id="content"&gt;
```

with this

```<div id="content" style="margin-top: 22px;"&gt;
```

Comment for this answer: I have this currently, and it creates a straight line instead of going under the actual image.

Here is another answer: Looks like you're nearly there. 

For your cotext div, try positioning it 20px from the top.

```<div id="cotext" style="position:relative;top:20px;"&gt;
```

Should fit better this way.

Comment for this answer: This just moves it down instead of creating the under the image scroll effect I'm looking for.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 6, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:02/11/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><image>', 'Title': 'I have an odd-shaped image with text in it. How can I get the text to stay within the image even when scrolling?', 'ViewCount': 123, 'id': 14822365, 'user_AboutMe': '<p>I am a mom and a housewife first, and a photographer next. I also enjoy doing web and graphic design on occasion.</p>\n', 'user_AccountId': 2354938.0, 'user_DisplayName': 'Kelly Goeken', 'user_Reputation': 15.0, 'user_Views': 4.0, 'user_id': 2062988.0}}