/    Sign up×
Community /Pin to ProfileBookmark

Multiple backgrounds in text layer

Copy linkTweet thisAlerts:
Jun 05.2006

I’m pretty sure this can not be accomplished, but before I inform my client of such I thought I’d pass it by the experts…

The main text layer for the site varies in height from page to page (depending on the quantity of copy). There is a background IMAGE behind the text at the top of every page’s text layer. What I’m hoping to accomplish is to fill the REMAINING area below this background image with a background COLOR (or repeating solid-colored pixel image) to the vertical end of the text layer. I believe it is not possible to use a vertical offset with a repeating background image so I’m not sure if I can accomplish this task. The current site in progress is at:

[url]www.24pt-helvetica.com/cedar/[/url]

Thanks in advance.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@nataliemacJun 05.2006 — I don't understand what you mean. I looked at your site and there's an image at the top of the lighter green text area and then a plain light green background extends to the bottom of the page. How does that differ from what you're trying to accomplish?

Anyway, you can set the background image to either not repeat or to repeat only on the horizintal axis, then set a background color for the same block level element that will show elsewhere in the element.
Copy linkTweet thisAlerts:
@MrHelveticaauthorJun 05.2006 — sorry for being vague. Currently I'm using another layer to add the background colour that I need to be behind the text that extends beyond the bottom of the background image. It is innacurate in that it's not tied in any way to the height of the text area so sometimes it ends "close" to the bottom of the text and sometimes it extends way beyond the bottom of the text area. I'd like it to be tied to the exact height of the text box which is determined by the amount of text.
Copy linkTweet thisAlerts:
@nataliemacJun 05.2006 — You should remove that one-celled table from your layout and replace it with a div. The height attribute has been deprecated for tables and table elements, but you can still use it for divs.

Take the div that contains your text and set the background properties like this:

[CODE]#textdiv {
background-color: #hexcolorcode;
background-image: url('path and filename');
background-position: 0 0;
background-repeat: no-repeat;
}[/CODE]

That places a background image at the top left corner of the div, and sets a background color to fill in the rest of the div. You can also play around with those background-position values to set the background image wherever you'd like in your div.

--Natalie
×

Success!

Help @MrHelvetica 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.16,
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,
)...