Community Forums › Forums › Archived Forums › Design Tips and Tricks › Agency Pro – Setting different stretch images to different pages
- This topic has 4 replies, 2 voices, and was last updated 9 years, 1 month ago by Kary.
-
AuthorPosts
-
February 24, 2015 at 8:11 am #142017mcatanachMember
Hi
I have Agency Pro theme and I would love to be able to set a different stretch background image to different pages.
Anyone know if this is possible??
Thanks for your help!!
Michelle
February 24, 2015 at 2:07 pm #142047KaryMemberI know how to do it using CSS, but not using the functions file with a conditional statement. It works using CSS but it doesn't produce that nice "fade in" effect that you get when using it the way its setup in the theme.
To make it work, you don't need to touch the functions file.
(1) You'll need to go to the Customize > Backstretch image in your admin area and remove any backstretch image you've already placed there.
(2) Open the pages you want to add different backstretch images to and get the page ID numbers.
(3) Include this script in your CSS file./*--------------BACKGROUND STRETCH IMAGES-----------------*/ body { background-image: url('/your/image/url/bg1.jpg'); background-position: center top; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } body.page-id-200, body.page-id-222 { background-image: url('/your/image/url/bg2.jpg'); } body.page-id-300 { background-image: url('/your/image/url/bg3.jpg'); }
(4) Change the URLs to your image filepath
(5) Change the page numbers to the page numbers of your pages.The way this works, by default, if a page isn't assigned a specific image, the default "body" image will display. Any page you've assigned an image to in the CSS will load the specific image instead of the default. Just make certain the "body" tag is at the top of your CSS list and the "body.page-id-##" tags are underneath.
February 24, 2015 at 3:57 pm #142079mcatanachMemberthat is amazing, thank you so much Kary! It works beautifully!! I can't thank you enough 🙂
February 27, 2015 at 4:26 am #142511mcatanachMemberoooh...I've stumbled across another problem...
This works perfectly on my PC, however, on my ipad the background image scrolls and doesnt remain static.
Any suggestions please????
Thank you 🙂
February 27, 2015 at 1:17 pm #142559KaryMemberThe Agency Pro theme uses Javascript to control the parallax scrolling / backstretch image. However, if you look at many of the other themes that use parallax scrolling / backstretch image in the showcase or even the Studiopress default themes, the background image is not stationary/fixed on an iOS device; the image scrolls ups with the rest of the content. I'm fairly certain this actually considered "normal" on mobile devices, and can only be forced to work using Javascript.
When I look at my demo site on my iPad, the backstretch image doesn't stay fixed, but it looks fine. If you want to continue using this method and forego the fixed backstretch image (going back to the default way the theme does it), you can try a few things to at least get the image looking its best on various mobile devices.
You can use different images for the smaller screens. Perhaps resize / crop your backstretch image in different ways for mobile viewing, or you can change the position of the image in the various mobile sizes. Look at the bottom of your CSS, and change these under the
@media
CSS styles. I have no idea what would work best for your image so play around with it. You might have to change it for the various mobile device sizes. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.