6 replies to this topic

[rjltaylor]

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:

 

Please Login or Register to see this Hidden Content

 

 

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!

 

[James B]

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.

 

Please Login or Register to see this Hidden Content

That will stop the image from repeating down the page, like this -

Please Login or Register to see this Hidden Content

[rjltaylor]

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?

[James B]

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.

 

Please Login or Register to see this Hidden Content

[rjltaylor]

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!

[James B]

No worries, you're welcome :-)

[rmaxsg]

thank you