Sharing idea for seamlessly stretching background picture

Share your Joomla wisdom with the Community on Trending Topics in this forum.
Locked
nicksyl
Joomla! Apprentice
Joomla! Apprentice
Posts: 37
Joined: Tue Jul 16, 2013 8:57 am

Sharing idea for seamlessly stretching background picture

Post by nicksyl » Wed Jul 17, 2013 10:09 am

Hi everyone,
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.
2. I made sure there are two containers full-width for the content part. In the template I worked in, I used the very first, at the very back of the whole page and the body content - .body.

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. :)

Locked

Return to “Trending Topics”