Advice on CSS Background

Posted on 2012-09-03
Medium Priority
Last Modified: 2012-09-03
Hi Experts,

I have this website which I refreshing:


As you can see the background image (on the #wrapper div) is quite large and I'm trying to get it to repeat, but as you can see it is not extending to the bottom of the text.

My questions are these:

Do you think the image is too large and the the fancy left and right borders should be split into their own divs then make up the centre background using the repeating option?


Is there a way to may this large background image repeat to the bottom of the text?

Question by:G0ggy
  • 4
  • 3
LVL 60

Expert Comment

by:Julian Hansen
ID: 38360512
Firstly the page you get to shows a different page than when you click on the landing page - I am assuming you are talking about the second one?

Secondly, the image is repeating but its container div is not long enough for you to see this.

Currently the blue line around the mainContent div shows this.

Repeating the image - if you have downloaded it then repeating it is not a problem.

Taking the borders left and right off won't save you anything in size but it will increase the number of get's on the server which you don't want - so no don't split current image.
LVL 11

Author Comment

ID: 38360515
Oops - sorry for got to mention, ignore the splash page!
LVL 11

Author Comment

ID: 38360541
You say the container div isn't long enough to allow the repeat, but the image is repeating, however there's a gap, this was after I applied a specific pixel height to the MainWrapper div to test it.


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

LVL 60

Expert Comment

by:Julian Hansen
ID: 38360608
Just to confirm you are talking about this image?

LVL 11

Author Comment

ID: 38360614
Yes, that's the baby.
LVL 45

Accepted Solution

Chris Stanyon earned 2000 total points
ID: 38360694
Couple of things to do to fix the problem.

Add overflow:hidden to div.MiddleArea {}
Remove the top margin from div.MiddleArea {}

Your background image is repeating - the gap in the footer is part of your background image - you have a 225px (ish) blank area at the bottom. To remove it you'll need to edit your image.
LVL 11

Author Closing Comment

ID: 38360697
Good grief - I never spotted it, I just copied the image out from our graphic designers! Time to go berate them - thanks!
LVL 60

Expert Comment

by:Julian Hansen
ID: 38360698
Ok you have two problems

1. If you look at the background image in an image editor you will see it has a bunch of space at the bottom. The image is repeating it is just not showing because the transparent section at the bottom is pushing it down below the bottom of the screen

2. Your BottomArea div needs a clear:both before it - which is why the maincontent is not stretching to include the bottom Area.

So first fix your image - crop off the extra transparent space at the bottom.
Second put this just before bottomarea
<div style="clear: both"></div>
<div id="BottomArea">

Open in new window


Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

807 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