/    Sign up×
Community /Pin to ProfileBookmark

Body Backgrounds + Gradients for different resolutions

I was wondering if someone can tell me how to do this. I’m creating a site in wordpress and right now, I’ve got the header image set with

[CODE]
body {
background: #FFF url(/head_img.jpg) no-repeat center top;
}
[/CODE]

This gives me a header image over the nav menus with a white background for everything else. The header_bg.jpg has a gradient that goes down into the actual content part which is what I want to do. I’ve seen other websites add another thin gradient image to goes repeat-x throughout the entire body so it blends in with the header image.

[url]http://espn.go.com/[/url] is a PRIME example. They have the image in the center and then a gradient image that keeps repeating throughout.

Can anyone provide some guidance on how I can do this with my WP site? I’ve tried to do the following.

Move my body css to another div and to add the gradient image as repeat-x on the body css. So my html code looks like

<body [STYLE WITH GRADIENT]>
<div style=”[CSS ABOVE]”>

My div ends up cancelling my body css because it lies on top of it. Any help would be amazing!

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@mikeroqApr 18.2011 — You would set the body to have the gradient background. Make a container to contain all the site layout and have that set to the width of the fixed background image, then center your other layout elements in this new main container.

Example:

http://fourseventy.com/css_bg.php
×

Success!

Help @smoh 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.2,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

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