Extending background image

Posted on 2009-05-10
Medium Priority
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.

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
LVL 16

Expert Comment

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.
LVL 10

Expert Comment

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.

Author Comment

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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

LVL 16

Expert Comment

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

Author Comment

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,
LVL 16

Accepted Solution

Robin earned 2000 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;
	WIDTH: 980px;
	BACKGROUND-IMAGE: url(images/line.jpg); 

Open in new window


Author Comment

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


Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

743 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