Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
In my CE4 website I use a background image that stretches when scrolling to cover the entire page, not just the view port. In Backlight, with the same CSS code, this doesn't seem to work. The image just covers the view port and moves up when scrolling, displaying the background color below it.
Has anything changed with Backlight CSS and should I use different coding?
This is what I have in my custom CSS file:
body {
background-attachment: scroll;
background-image: url(/backlight/backlight/custom/images/achtergrond_licht3.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
}
That was question number one.
A more complex, second question is: can I use two background images to cover the page, with one staying in proper proportions on the bottom and the other on top, stretching to fill the rest of the page? Like a landscape and sky, where the sky should be able to stretch, but the below landscape keeps its proportions.
Thanks for any help!
Offline
To quickly answer your second question, the answer is yes. Take a look at Graceson's test site:
http://release.gracesonaufderheide.com/
and take a look at his custom css file.
For your first question, a link to a site always helps. And the URL to the image should be wrapped in quote marks.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Thanks Rod! Here is a link to my site with a long page: http://ariaanblok.nl/backlight/gallerie … otografie/
The image is wide enough, 2600px. I'll see what it does with quote marks around the URL.
Offline
To quickly answer your second question, the answer is yes. Take a look at Graceson's test site:
http://release.gracesonaufderheide.com/ and take a look at his custom css file.
Apparently I am way way behind. How do we look at theCSS file on the aufderheide site?
Last edited by gwlco (2016-05-18 23:02:30)
Offline
Right click on the page and select Show Page Source (in Safari) and then click on custom-sample.css in the left pane.
But on that page a different background setup is being used. What I would like, is two images on top of each other, where the top one (sky) stretches to fill any gap left by the bottom one (landscape). Perhaps this is not possible with just CSS.
Offline
right click on the page and choose "view page source"
Click on the link to the custom css file. It looks like this:
<link rel="stylesheet" href="http://release.gracesonaufderheide.com/backlight/custom/css/custom-sample.css" />
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
What I would like, is two images on top of each other, where the top one (sky) stretches to fill any gap left by the bottom one (landscape). Perhaps this is not possible with just CSS.
You should be able to position each independently. The sky: top left, the landscape: bottom left
background-image: url("url to sky image"),url("url to landscape image");
background-position: top left, bottom left; /*positioning for each image*/I don't think you'll be able to use background-size: cover; if you plan on using two images.
I don't think you can set one image to fill available left over space
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I wonder if the fact that an album is being inserted into the Home page has anything to do with the background image not covering the entire background.
Something for Matt to look in to.
I'll have to test a background image on a page that has a lot of content that's not an inserted album, just to see if it covers and scrolls as expected. Then insert an album into the page and see what happens.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Thanks Rod. I've removed the album from the home page and inserted a lot of text:
http://ariaanblok.nl/backlight/home/
Makes no difference at this time.
Offline
it looks to me that the background image is covering the size of the browser window. If the browser window is shorter, the background fills the area but when you scroll you see the white background.
Changing scroll to fixed fixes the image in place, but then as you scroll, the area of the page that was not initially visible scrolls up and it's white, covering the image.
Even setting the body background-color to transparent doesn't affect things.
Yep, something for Matt to look at.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Yes, that's the problem. I could use the 'fixed' property as a temporary workaround, but it's not as nice.
Something I just realised: the 'cover' attribute doesn't actually stretch the background image, does it? So I would actually need an image that is at least as high as the scrollable area?
Say, if my background image is 1433px high and the scrollable area covers 1600px, I would need to make my image 1600px high?
Offline
I thought that the cover stretched the image to cover the entire background area. Maybe it covers the browser dimensions?
http://www.w3schools.com/cssref/css3_pr … d-size.asp
Of course, if it's meant to streatch the entire background then it would look really weird. But still, if the background is fixed, you should still be able to scroll down the page and see the image at all times. But it's being covered by that white background.
I don't get it.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
As I understand it, it isn't meant to just cover the browser dimensions. At my regular site it covers the scrollable area, as you can see here:
http://ariaanblok.nl/galleries/02_buitenfotografie/
And you're right, stretching the entire background might end up looking weird, that's why I was hoping to be able to use two images, where I would stretch just the sky image. Or I might fix the single image to the page bottom and make a transparency gradation to have the top blend into the background color. Might be an elegant solution.
Thanks for your help so far!
Offline
Rather than body, try setting the background-image to .page__body.
For multiple background images, you can try this:
https://developer.mozilla.org/en/docs/W … ackgrounds
I'm not quite sure whether CSS allows you to do exactly what you describe with two images above, though.
Offline
Thank you Matt, this solves it. The image stays nicely at the bottom of the page now and stretches with 'cover'.
Instead of using two images I've added a gradient to the top half of the image to make it blend into the background color. Now I don't even have to use 'cover' anymore to have it stretched.
Thanks both for your help!
Offline