Archived

This topic is now archived and is closed to further replies.

  • 0

custom content background issues


Question

Posted · Report post

Looking for a solution to fix a content background image problem. I've been working on this using CSS via Chrome's dev tools and am so close, but not quite.

 

I'm no CSS expert, but know enough to get by...or so I thought.

 

Problem: PageLines won't allow me to choose a background color only for the content section without the header background color being affected. As a workaround, I created a custom background image, which gives me the desired effect. That is, until pages with a lot of content forces the background image to repeat. That's where the problem lies. Based on results, I'm not going about this the right way.

 

Here is the link to the site:

 

http://www.pjodwyer.com/pjwp/ 

 

 

Any suggestions and/or solutions would be greatly appreciated! I've been trying to fix this for far too long now.  Thanks in advance for your help!

 

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

Oh i see, ok easier fix in that case :-)

 

When you look in the inspector you'll see the image is assigned to the page canvas area. Inside that page canvas area there are more containers you can apply the background, these containers go through the levels of the page working downwards, each one working on a more specific area of the page as you deeper into the html/css. Try applying to the dynamic content area like in the screenshot below.

 

http://screencast.com/t/XFoHfGcFtX7z

Share this post


Link to post
Share on other sites

Posted · Report post

thank you :)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

To stop the background image repeating on the page, you can use the css command {background-repeat:no-repeat;}

 

You can add this line to the css you've already put in place for the background image.

 

body #page .page-canvas {
    background-image: url("http://www.pjodwyer.com/pjwp/wp-content/uploads/2013/02/bkgr-canvas.png");
    background-repeat: no-repeat;
}

That will stop the image from repeating down the page, like this - http://screencast.com/t/UfLdh8coGLIZ

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for your reply, James. Perhaps I was not clear in my original post.

 

I would still like the image to repeat when necessary, however, if you take a look at my background image, I had to create "white space" above the graphic to keep it from showing in the header area. Therefore, when the image does repeat in the content area, it shows the blank area. I know this is not correct and I'm looking for a solution to fix the problem.

 

Basically, I want a color background in the content area, but do not want color in the header section. PageLines doesn't allow me to do this. It forces me to have the same color in the header section as it does the content, which I don't want.  How do I achieve this through CSS?

 

Does this make better sense?

Share this post


Link to post
Share on other sites

Posted · Report post

Yes! That was it! I knew it had to be a simple fix. My head was obviously buried too deep in this problem far too long! Should've asked this question alot sooner than I did!

 

Thanks so much!

Share this post


Link to post
Share on other sites

Posted · Report post

No worries, you're welcome :-)

Share this post


Link to post
Share on other sites