Extending background image

Is there a way to extend the background image if the content goes longer than the image itself?

Http://www.markfriedler.com - We took over a site where the whole background image is one giant image and now the client wants it to extend longer if needed but we can't get it to work.

Who is Participating?
RobinConnect With a Mentor Software EngineerCommented:
You can try the following:

create a new image from the http://www.markfriedler.com/wp-content/themes/classic/images/MF_SITE_V1.1_02.jpg
by just using the bottom 13 pixels of it and call it line.jpg in the same directory.

And use that image to extend the page to the bottom.
E.g. change the css #page to the following.

It still doesn't look right, and you lose the paperclip part, but you get the idea.

It would even better if you divide that large background image in the different part:
header, page and paperclip side.

#page {
	margin: 0 auto;
	padding: 10px 0px;
	WIDTH: 980px;
	BACKGROUND-IMAGE: url(images/line.jpg); 

Open in new window

RobinSoftware EngineerCommented:
You can repeat a background image.

Have a look at http://www.tizag.com/cssT/background.php
or http://www.w3schools.com/css/css_background.asp
for some examples on how to repeat it.
The easiest way is to put this design as is in table with the width of the backround image, and place table in a center. On your page make background color blue, like in image, and you will have blue background and centered design with this design no mather what resolution user have. Only the blue part left and right will grow.
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

catonthecouchproductionsAuthor Commented:
@robinu, I did try that, but I am trying to get it for it ONLY extends if it needs it.

@Kechka, could you give me an example? I am kind of confused.

My goal is to only extend the bg past the main one image if it needs it.

Thank you guys
RobinSoftware EngineerCommented:
In what direction do you want it to extend? Can you make an example test page where it shows the fault?
catonthecouchproductionsAuthor Commented:
Below the main content. Like on this page: http://www.markfriedler.com/10tools

The designer of this site, for some odd reason made this site one image: http://www.markfriedler.com/wp-content/themes/classic/images/MF_SITE_V1.1_02.jpg

And if the content goes below the main content then repeat.

Thanks for your help,
catonthecouchproductionsAuthor Commented:
Thanks or this tip! This has me going in the right direction.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.