Peter Falkenberg Brown Posted December 24, 2013 Share Posted December 24, 2013 Hello All, After spending most of my free time this year building a large web application with ProcessWire, I've finally found the time to migrate my magazine site from MODX Evolution to PW. http://significatojournal.com I'm very, very pleased with ProcessWire, and will no longer be using MODX. In a separate post, I'll write up a case study of how I did the migration. But for now, I really thank Ryan and all the extremely supportive gurus in this very fine PW community. Peter Brown 8 Link to comment Share on other sites More sharing options...
SiNNuT Posted December 24, 2013 Share Posted December 24, 2013 Nice Job Peter. I'm not sure i like the margins on both sides of the site, but maybe that's just me. Also, width and height set to 100% on that background image gives some funny effects when resizing the browser window; trees going out of propportion. Maybe you could try with background-size: cover; . Link to comment Share on other sites More sharing options...
diogo Posted December 24, 2013 Share Posted December 24, 2013 Great to see you in the videos Peter. I'll watch some of them as soon as I have time Link to comment Share on other sites More sharing options...
Peter Falkenberg Brown Posted December 24, 2013 Author Share Posted December 24, 2013 Dear All, Thanks for the likes, and thanks Diogo. SiNNuT, I agree about the background -- it stretches when the window is resized. I have to say that my CSS comfort zone is still rather small. I copied the code from somewhere on the web, for the scrolling ability with the background image. I tried the background cover option, but I'm not doing it right, and it didn't change anything. Here's my current css and html code: HTML: <body> <div> <img src="/site/assets/site_images/ireland_wallpaper.jpg" alt="background image" name="background" id="background" /> </div> <div id="scroller"> <br /> ... body content here ... </div> CSS: #scroller { position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2; } So, based on this, my understanding is that everything inside the scroller div scrolls over the image. I tried adding the "background-size: cover;" attribute to the div wrapped around the image, to no effect. If you've got any tips on how to integrate that, I'd welcome them. Thanks! Peter Link to comment Share on other sites More sharing options...
SiNNuT Posted December 25, 2013 Share Posted December 25, 2013 Have a look at this http://css-tricks.com/perfect-full-page-background-image/ Quite an old article but the browser support ( http://caniuse.com/#search=background-size ) nowadays is even better. Should you need IE8 there's probably a way to do it. Link to comment Share on other sites More sharing options...
Peter Falkenberg Brown Posted December 26, 2013 Author Share Posted December 26, 2013 Dear SiNNuT, Thanks for that link! That info is great. I shall try one or more of them -- probably the first one. Best regards, Peter Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now