Jump to content
Sign in to follow this  
bluesquirrel

Body Background - Bottom right aligned?

Recommended Posts

bluesquirrel

Thanks to Kate for initially fixing this problem for me but as the site's development went on it seemed to stop working. Just to go over the point again.... what I really need of the background image is for it to be RIGHT & BOTTOM aligned, this is because the main feature of the photo is in the bottom right corner. http://www.pagelines.com/forum/discussion/comment/65100 - Original Fix Should I be removing any background settings from the PlatformPro Settings if I am putting this in CustomCSS or will the CustomCSS override anything it finds in the settings? Site in question - http://bit.ly/qlogYN Many thanks for any tips, I hope it's nothing simple like a typo on my part as I will feel like a silly sausage.

Share this post


Link to post
Share on other sites
catrina

Here's the original fix:

body {url('http://194.110.243.165/~shipinn/wp-content/uploads/2011/07/background3.jpg') no-repeat fixed right bottom !important;}

http://194.110.243.165/~shipinn/wp-content/uploads/2011/07/background3.jpg <- is this the correct image URL?


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
bluesquirrel

I can see why you asked, it did get messy whilst I was playing around and I did upload a few. That one's fine to use though.

Share this post


Link to post
Share on other sites
catrina

but as the site's development went on it seemed to stop working. Was there any other custom CSS you added as development went on?


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
bluesquirrel

In the CustomCSS settings I currently have: body.page-id-4 #column-main div.mcolumn-pad, body.page-id-10 #column-main div.mcolumn-pad, body.blog #column-main div.mcolumn-pad {width: 835px;} #feature div.fcontent div.snap_nopreview {display: none;} body{url('http://www.theshipinnfreckleton.co.uk/wp-content/uploads/2011/07/background2.jpg') no-repeat fixed right bottom !important;}

Share this post


Link to post
Share on other sites
catrina

Did you double check to make sure that the background2.jpg file was uploaded correctly?


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
bluesquirrel

I thought you were giving me a clue so that I could help myself and feel a sense of pride then! background2.jpg It definitely seems to work ok for me, I really can't work out where I'm going wrong. I want to keep this ontopic to PlatformPro instead of making it a general query about CSS though - do I need to change any of the background settings in Platform settings or does CustomCode overrule everything else?

Share this post


Link to post
Share on other sites
Kate

My apologies, I'm not really understanding the issue. I see the background loading... Is that not the issue?

Share this post


Link to post
Share on other sites
bluesquirrel

No my apologies, I haven't made it clear in this version of the problem. I wanted the image to be fitting the browser window - I think I've gone about this the wrong way - so that the building at the bottom right of the image - background2.jpg - stays at the bottom right corner of the browser window. I've no idea what it's doing in Chrome at the moment - it seems to be zooming in on the image?

Share this post


Link to post
Share on other sites
catrina

I'm observing your site in Chrome and, yes, it does look oversized. I'm not sure why it's stretching since there are no parameters for resizing it and the image isn't even that large. Do you still have this code in your Custom CSS?:

body{url('http://www.theshipinnfreckleton.co.uk/wp-content/uploads/2011/07/background2.jpg') no-repeat fixed right bottom !important;}


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
bluesquirrel

I do have a background set under Design Control with a vertical and horizontal position of 100 and a repeat set horizontally. Will Custom CSS be overriding this? This is an exact copy and paste of my Custom CSS: body.page-id-4 #column-main div.mcolumn-pad, body.page-id-10 #column-main div.mcolumn-pad, body.blog #column-main div.mcolumn-pad {width: 835px;} #feature div.fcontent div.snap_nopreview {display: none;} body{url('http://www.theshipinnfreckleton.co.uk/wp-content/uploads/2011/07/background2.jpg') no-repeat fixed right bottom !important;}

Share this post


Link to post
Share on other sites
kastelic

This should do it:

	body{
	background: url('http://www.theshipinnfreckleton.co.uk/wp-content/uploads/2011/07/background2.jpg ') no-repeat fixed bottom right;
	}
	#page {
	background: transparent !important;
	}
	

Share this post


Link to post
Share on other sites
bluesquirrel

Thanks Kastelic, but unfortunately that had the side effect of taking out the black from the foot rendering the text unreadable. Apart from that it did work, but why? If I just took the first section and dropped the #page then I ended up with current "zoomed" background but also the background repeating in the black footer section. I can see why these CSS segments would normally have an effect - are the conflicting with Platform in some way?

Share this post


Link to post
Share on other sites
kastelic

Oh, so you want to keep the black background? Then add the background to #page instead:

	#page{
	background: url('http://www.theshipinnfreckleton.co.uk/wp-content/uploads/2011/07/background2.jpg ') no-repeat fixed bottom right !important;
	}
	

Share this post


Link to post
Share on other sites
bluesquirrel

Sir you are a genius. Just so I can understand better (I hate people that take an answer and run away), please can I ask why we're putting the image into page instead of body? Is this why the background scrolls beneath the black footer bar? (not something I'm worried about on this site)

Share this post


Link to post
Share on other sites
kastelic

Because the footer is actually tranparent in most layouts and its the body background thats showing through. i guess you could put it on the body and then add a backround to the footer content area.

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  

×