I have a website of my own design. It has a picture as background, just enough for a short info page. What I wanted to do was stretch it in for longer pages at a specific point, so it would not be seen as if the picture was cut, or pulled, or otherwise warped.
My search for a solution was rather long and most people said it was impossible.
Then I got this idea - and maybe it would not be a new one for some of you, but it would be for some others, as I found I really wasn't the only one looking for the solution.
1. I cut the part of the image which served as background for the content into 3 different pieces:
- "top": from top of container until the point of the stretch;
- "stretch": just the place of stretch, full width by a few px height;
- "bottom": from end of stretch to the bottom of container.
3. I placed the "stretch" image as background of the first container (.body), making it repeat itself down (repeat-y). My image is jpeg, so it is not transparent, the image may begin at the top. But in transparency issue one may position it at the point where the header image and the "top" image end.
4. I placed both the other images as background in the top, content, container: "top" - position under the header image, "bottom" - at the bottom.
This is how it looks in the CSS file:
.body {
width: 1028px;
margin: 0px auto 0px auto;
background-image: url(../images/bg.content-stretch.jpg);
background-repeat: repeat-y;
background-position: center 725px;
}
.body .container-fluid {
width: 1028px;
margin: 0px auto 0px auto;
background-image: url(../images/bg.content-top.jpg), url(../images/bg.content-bottom.jpg);
background-repeat: no-repeat, no-repeat;
background-position: center 415px, center bottom;
}
Hope this may be of help to someone.