• 0

Custom Content Background Image

Question

Posted · Report post

Hello one and all, Forgive me if this is a repeat post, I have tried searching for the answer using the search box and some "specific terms" but I didn't have any luck. Please realise that by asking this question I am having to admit defeat and I don't like doing that!! Please can someone tell me how I can make the background image of the main content this image, tiled obviously http://www.prestonbusstation.co.uk/wp-content/uploads/2012/03/preston_bus_station_background1.png'>http://www.prestonbusstation.co.uk/wp-content/uploads/2012/03/preston_bus_station_background1.png At the moment it is my main background image, however I will be changing that so the whole page won't just be a big grey mess. Site url: http://www.prestonbusstation.co.uk Thanks to anyone who can help, Andrew

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

I think, what you are looking for is: [code] #page {background : url ('http://www.prestonbusstation.co.uk/wp-content/uploads/2012/03/preston_bus_station_background1.png') repeat;} [/code] Though I am not sure if that is the selector you were looking for. What area do you mean by main content? Also, If your header has a white background, it will cover it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Gyoery, By main content I'm referring.... to the content area as defined in the settings area of Pagelines - as shown in the graphic http://www.prestonbusstation.co.uk/wp-content/themes/pagelines/admin/images/sprite-design-modes.png That's the area that I want to see with the tiled background image. I'm still playing around with the custom code to achieve that goal, unfortunately that wasn't the solution. Thanks anyway!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry, there was a space too much... try this pls: [code] #page {background : url('http://www.prestonbusstation.co.uk/wp-content/uploads/2012/03/preston_bus_station_background1.png') repeat;} [/code] you do mean the area that is now white, don't U?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes I definitley mean the area that's currently white. I thought I was on the right track with [quote]#maincontent .content{background:url(http://www.prestonbusstation.co.uk/wp-content/uploads/2012/03/preston_bus_station_background1.png) repeat;}[/quote] but it's not getting me anywhere! And to make matters worse I think I've lost the transparent space that was between the header and the top of the page - it's white all the way to the top - or am I imagining that?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

yes it is white all the way to the top... have you tried my corrected version?? Where did you get the #maincontent from?? On your whole page there is not one object with that ID. The closest thing available to it would be #content which does not include your header. My solution (the 2nd) does. Depends what u want. So either use my solution or correct urs so it looks like this: [code]#content .content{background:url('http://www.prestonbusstation.co.uk/wp-content/uploads/2012/03/preston_bus_station_background1.png') repeat;}[/code] Also, you were missing the ' apostrophes around your URL. Hope this helps...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Gyoery - it did work but you were right about the header blocking out the background. To answer your question I'd taken my idea from http://www.pagelines.com/forum/discussion/7780/positioning-of-content-background-image/p1 I think I'll scrap the idea and come up with an alternative design, thank you very much for your help though. I wish I could get that transparent padding back at the top, I managed to delete some of my old custom code. Grr!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You don't have to... you just have to set the header background to :transparent, and use a Logo that is png and uses transparency... Then It will look ok...

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