6 replies to this topic

[danflux]

Hi guys.

New to PageLines here and just getting used to it. I have searched the forums, google and checked the docs but not found an exact answer to my problem...

I've added a background image to my content area by using the following CSS...

 .content {background-image: url(http://bullitband.co.uk/site/wp-content/uploads/2012/07/contentbg.png);
	}

I did not add a repeat instruction as I would like it to repeat horizontally and vertically as it does by default.

The problem I am having is that it does not display fluidly throughout the header, nav bar and content area, the image shows in the header, then "starts again" in the nav bar, and then again in the content. You can see this by looking at my site here... http://bullitband.co.uk/site/ ( I have added a more prominent image to illustrate the problem, this is not the one I am using!)

I would like it to start in the header and be repeat fluidly horizontally and vertically through the header, nav bar and content area. Any ideas?

Thanks. D

[bxbmedia]

Hey @danflux,

Using the .content class for your background image will do that. The reason being is that that class is used many many times throughout the layout. If you inspect your html (using chrome for example by right clicking and choosing "inspect element") you will see that every section has a div with a content class inside.

Using the mode your site is in right now, it would be difficult to achieve the look you want.

Try making this change:
From the admin dashboard go to Pagelines > Site Options > Layout Editor and from there choose Fixed-Width Mode and save.

Then you can add this to your custom css:

 #header {
	background-image: url(http://bullitband.co.uk/site/wp-content/uploads/2012/07/contentbg.png);
	}
	#header .content {
	background-color: transparent;
	}

What this does is applies the background image you want to the header as a whole which includes the navigation, and sets the content background color to transparent so that the branding and nav sections (which have content classes) don't cover up that image with a solid color.

Let me know how that works for you.

[danflux]

Hi @bxbmedia Thanks for your reply Unfortunately that doesn't work for me. First problem is that I am using the lite edition of PageLines (making sure I can do what I want before buying it!) so I cannot change to fixed width mode. Second problem; implementing that code gives me a transparent header but nothing else. The background image in the header does not even display when removing the transparency instruction unless I add .content after #header. Thanks, D.

[bxbmedia]

@danflux, The css I gave you was designed for the fixed width mode :/. I didn't realize you had the lite edition. I really don't know the limitations of the lite edition either, so that doesn't help. You try this instead: [code#header { background: white url(http://bullitband.co...7/contentbg.png) repeat-x; margin: 0 auto; width: 976px; } #header .content { background-color: transparent; }[/code] See how that works for you

[danflux]

@bxbmedia, Thanks again for your reply. I'm only using the lite edition for now, just until I'm sure if it's the right framework for me or not. I assume changing to fixed width mode puts the header, navigation and content in a container which I could then target? I tried your code, it displays the background image fluidly for the whole header section (branding and nav) but it doesn't carry on in to the content. From inspecting the site with firebug I'm not sure it will be possible to have a consistent background carrying on in to the content without the header and content being linked by a common element i.e. a container, what do you think? Thanks, D.

[bxbmedia]

@danflux,

I actually didn't understand that you wanted the background to extend all the way down into the content area, I thought you just wanted it in the full header.

See what I did here (unfortunately this uses fixed-width mode):

Is this what you were trying to achieve?

Here is the exact css I used to achieve this, but this requires full-width mode.

 body, body.fixed_width {	background: black url(http://bullitband.co.uk/site/wp-content/uploads/2012/07/backgroundwhite2.png);	background-position: 50% 0;	}	#page {	background: white url(http://bullitband.co.uk/site/wp-content/uploads/2012/07/contentbg.png);	background-position: 50% 0;	}

Just showing you what is possible. I really don't know what else is possible in the lite version.


-Evan

[Danny]

@danflux Did @bxbmedia suggestion work for ?