Jump to content
Sign in to follow this  
tsalstrand

Background Image Overlay

Recommended Posts

tsalstrand

I am trying to do an overlay image that covers part of my background. I've added the following code:

#page-main .content { background-image: url(http://www.socialdesignstudios.com/wp-content/uploads/2012/03/bg-themes1.png);background-repeat: no-repeat; }

It works good, however I just want it to have that image centered at the top of my content area. When I use that code it places that image in every content, boxes, banner, portfolio, etc... any way to just make it appear once per page?

Share this post


Link to post
Share on other sites
Jenny
Make sure you've downloaded [url="http://www.getfirebug.com"]Firebug[/url]. It's a huge help. In order to have it display on one page only, you'll need to use firebug to determine the CSS selector that applies to that page (or post) only. It is listed at the top and looks something like page-id-1. Then add that selector to the beginning of your CSS, like [code].page-id-1 #page-main .content[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
tsalstrand
Hi simple mama, I actually want it on all the pages (for now). Adding .page-id only limits the page, not where on the page. Right now it looks like this: [img]http://www.socialdesignstudios.com/wp-content/uploads/2012/03/Untitled.png[/img] As I said before I need the image to only appear once on any given page... not duplicating for every content, boxes, banner, portfolio, etc... Thanks

Share this post


Link to post
Share on other sites
catrina
Have you tried using Firebug (http://getfirebug.com) to find the correct CSS selector in your code? #page-main .content may not be the correct one (I think it needs to be a bit more specific or a different one needs to be used).

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
tsalstrand
Hi Catrina, Yes, I use Firebug quite a bit. However, I still can't find the correct selector... thus my request on the forum for help. :(

Share this post


Link to post
Share on other sites
James B
Try this, not 100% sure it will work, but worth a shot. [code]#dynamic-content {background-image: url(http://www.socialdesignstudios.com/wp-content/uploads/2012/03/bg-themes1.png); background-repeat: no-repeat;[/code]

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
tsalstrand
Jamie, you rock! All I have to do is center it up... much appreciated! ^:)^

Share this post


Link to post
Share on other sites
James B
You're more than welcome, glad it worked. :)

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×