/    Sign up×
Community /Pin to ProfileBookmark

Help with tricky background tiles

Copy linkTweet thisAlerts:
May 15.2007

I need some help figuring out how to get this background to work the way I need it to. Please take a look at the attached image to see what I’m trying to accomlish. Let me know if it isn’t clear.

Basically, I have a background image applied to the body the repeats on the x axis. Lets say that background image is 300px tall and it has a gradient in it. Once the content area on the site exceeds that 300px in height I want to have a different background tile start to fill in the open space (that would the the cyan colored part in the attached image) and should continue with the depth of the content. But it should exceed the content area. In other words I don’t want it next to the footer. Hopefully the attached image will help explain this because I’m not sure I’m making sense here.

Please let me know if I can explain this better. By the way here is my current code if you need to take a look.

[URL=”http://www.bridgepoint-int.com/dev/test.html”]Current HTML[/URL] can be found here

[URL=”http://www.bridgepoint-int.com/dev/includes/css/bpi.css”]Current CSS[/URL] can be found here:

[upl-file uuid=7dd6a95f-2849-4056-ba2e-75e28f4a6674 size=80kB]tilehelp.jpg[/upl-file]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelMay 15.2007 — That is a very well thought-out explanation and the code is clean, readable. -Kudos for that. ?

I am sure that this can be done. I am sharing computer today so will be limited to times to experiement but will check back occasionally and be trying some ideas offline on the other machine.
Copy linkTweet thisAlerts:
@po3authorMay 15.2007 — wow, thanks for the nice comments. I worked hard at getting the code clean because I was chastised a few times recently for doing things the old way with tables and whatnot. This is my first shot at building a site without the use of tables and trying to have semantic code. It sounds like I have done a decent job.

I look forward to hearing your response on how I might be able to accomplish my background.

thanks! ?
Copy linkTweet thisAlerts:
@po3authorMay 15.2007 — I think I have this resolved. It took a couple of non-semantic divs to make it work but with the help of another coder we were able to overlay two divs to create the effect I wanted.

Have a look.
Copy linkTweet thisAlerts:
@WebJoelMay 15.2007 — Getting there. I see in Firefox something that you probably do not want: the navigation top-left, changes, and the picture image is 'crowded' and slightly beneith the right-hand edge...

All these are fixable. I'll come back to this (almost supper-time here). ?

[upl-file uuid=85bb8f57-317c-4ddf-9457-7f4c2ac99b5f size=29kB]ScreenHunter_1.gif[/upl-file]
Copy linkTweet thisAlerts:
@po3authorMay 16.2007 — what version of firefox are you using. I'm not seeing that on my pc running firefox 2.0.0.3
×

Success!

Help @po3 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...