/    Sign up×
Community /Pin to ProfileBookmark

background problem

Copy linkTweet thisAlerts:
Mar 24.2007

Below is code that creates part of my header. I want the background color to be #F1F1F1. i tried backbround – color:#F1F1F1 but it goes over top all my text and images

[code]
<div style=”width:800px; margin: 0 auto 0 auto; background-image: url(‘../images/logo.gif’);background-repeat: no-repeat; background-position: left; height:150px;”>
[/code]

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangMar 24.2007 — background-color:#f1f1f1;
Copy linkTweet thisAlerts:
@WebJoelMar 24.2007 — ... i tried backbround - color:#F1F1F1 but it goes over top all my text and images...[/QUOTE] What Fang said. "color:#F1F1F1" is the color of the TEXT, not the color of the BACKGROUND. ?
Copy linkTweet thisAlerts:
@kprocauthorMar 24.2007 — so how do I get the background color to go behind my text.
Copy linkTweet thisAlerts:
@FangMar 24.2007 — Maybe you should show the whole document.
Copy linkTweet thisAlerts:
@WebJoelMar 24.2007 — so how do I get the background color to go behind my text.[/QUOTE]
The background-color [I]is[/I] behing the text (hence the name "background"). But you need to state the [I]color[/I] of the text too.... and they must be contrasting colors. -"Black" text on a "black" background will not show anything.

Try something like:

background-color:#f1f1f1; color:#000;

That is background-color with a [I]nice light gray[/I], with [I]black[/I] text over top of it

Also, -look again at your first post.... you mis-spelled "background" once while explaining the problem... -is it possible that you mis-spelled "background" in your HTML document too?
Below is code that creates part of my header. I want the background color to be #F1F1F1. i tried [B]back[U]b[/U]round - color:#F1F1F1[/B] but it goes over top all my text and images[/QUOTE] and, no 'white space' between "background-color", -it's all one word.
Copy linkTweet thisAlerts:
@kprocauthorMar 24.2007 — I have dark blue text which should be fine but the background is not acting like the back layer its layering over top of the images and text.
Copy linkTweet thisAlerts:
@WebJoelMar 24.2007 — Fang had a great idea... show us your code. ?
Copy linkTweet thisAlerts:
@kprocauthorMar 24.2007 — and the answer is

this now works

<div style="width:800px; margin: 0 auto 0 auto; background: #f1f1f1 url('../images/logo.gif') no-repeat; background-position: left; height:150px;">

<div style="float:right;">
Copy linkTweet thisAlerts:
@WebJoelMar 24.2007 — combining two or background styles you use just the word "background", so if you want 'just' the color, it would be "background-color:#000;" but if you want an image too, you can combine (and shorten) the code to:

background: #000 url(picname.jpg);

further shortening what you have, you could just go:

[B]background: #f1f1f1 url('../images/logo.gif') no-repeat bottom left;[/B] and not even have "background-position", as it can be included with the "background" Selector.

Had you shown the code in the first post we'd have come to this alot sooner. ? It's a neat little trick to shorten one's page-size.
×

Success!

Help @kproc 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 6.18,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...