Solved

Extending background image

Posted on 2009-05-10
7
671 Views
Last Modified: 2012-05-06
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.

Thoughts?
0
Comment
  • 3
  • 3
7 Comments
 
LVL 16

Expert Comment

by:robinu
ID: 24352349
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.
0
 
LVL 10

Expert Comment

by:Kechka
ID: 24352655
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.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 24353864
@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
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 16

Expert Comment

by:robinu
ID: 24354324
In what direction do you want it to extend? Can you make an example test page where it shows the fault?
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 24354467
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,
0
 
LVL 16

Accepted Solution

by:
robinu earned 500 total points
ID: 24356368
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;
		
	PADDING-LEFT: 45px;
	WIDTH: 980px;
	BACKGROUND-POSITION: center top;
	BACKGROUND-IMAGE: url(images/line.jpg); 
	BACKGROUND-REPEAT: repeat-y;
}

Open in new window

0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 24361097
Thanks or this tip! This has me going in the right direction.

Ryan
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ability to create nested list on the UI using PHP, HTML, Javascript 7 45
Insert Button on a table 16 38
Do alert on select 6 14
Selected in an option list 13 21
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question