WordPress.org

1. b_corwen
   Member
   Posted 7 months ago #

   I would like each page to have a different background image; but it looks like that image is going to have to be in a div tag because I want it to fill the page and maintain the aspect ratio.

   Right now I'm clearly over my head as I can't even get a different background colour on each page; after reading various posts on here and on the internet all day.

   I am currently editing this theme locally, but I know that it would be helpful for you to be able to see the code. I was hoping I could use a free hosting site so I created this blog: http://testingthemightyrhino.wordpress.com

   But I can't even figure out how to upload a child theme. I don't remember this being so hard the last time I set up a blog.

   The theme I'm editing is just a child of "twenty eleven" so far all I've really done is changed all the backgrounds to be transparent. This website is the inspiration for this blog: http://abstractartform.com/

   This the info I have on a full screen image that maintains the aspect ratio:
   http://css-tricks.com/3458-perfect-full-page-background-image/

   If you could please, just point me in the right direction, I would greatly appreciate it. If you can just tell me where to insert a bit of code that will put am ugly 200px v 200px div tag box with a different colour on each page into the body of every page then hopefully I can figure out the rest. At least I'd know I am editing the right file.

   Thanks!

2. b_corwen
   Member
   Posted 7 months ago #

   Hmm I think I've finally figured it out, except that the code to make the image fill the screen doesn't quite do what I want.... but hopefully I can work out the math... wait can css do math....

   What I want is this...

   the website detects the size of the browser window and the size of the photo (or I think this number could be hard coded).

   As an example let's say the image is 400px by 500px
   so width is 80% of height

   If the screen width/height of the window is greater than .8 then the screen is bigger in proportionally in width than the picture. So if I set the height to be 100% of the screen, maintain the aspect ratio, and center it then then edges are cut off.

   If the window is less than .8 then the picture is bigger proportionally in height. So if I set the width to 100%; maintain the aspect ratio, and center, then the top and bottom of the picture will be cut off.

   Basically I want to have the least amount of the image cut off while ensuring that it fills the screen. This is far more complicated than I thought because I thought the code at this site: http://css-tricks.com/3458-perfect-full-page-background-image/ would work but it doesn't seem to.

   It's ensuring that the picture fills the screen, but the picture is ending up 4x bigger than the screen which means far too much is being cut off. It's possible I've completely lost my mind.

   Anyway, one more incredibly basic question (I hope!).... if I want to lock the header and menu in position, and have only the posts/text scroll. Like the facebook header for lack of a better example. How do I do that?

Reply

You must log in to post.