Printable View
I want a browser background image that resizes to always be 100% of the browser height and always aligned to the right of the window.
I've tried adding it as a pasteboard background, but it doesn't resize height and I can't pin it at the right.
Any ideas?
I've experimented more with this, and since I can't find a WYSIWYG way to achieve what I want, I've tried adding the following code to the website head. It works on desktop devices, but the image doesn't show on my phone (and if I use developer tools in Chrome to view it as a Galaxy S5, it doesn't work there, either). Any ideas why?
Code:<style>
html{background:#FFFFFF url("URL OF IMAGE FILE") no-repeat right bottom fixed;background-size:contain;}
</style>
Not a solution Gary but open up w3schools site on any page of a TryIt page and delete it's content & paste the following. It defaults to the right but I can't get it to auto-resize to page length. Perhaps you could mess about a bit further:
Quote:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('http://parkeston.com/images/background-image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
background-size: 60% 100%;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
</body>
</html>
Thank you, Egg.
I've got your code working in the W3Schools try it window, by modifying it as follows. The question now is: how do I implement this within Xara WD?
Code:<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('http://parkeston.com/images/background-image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
background-size: contain;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
</body>
</html>
A good question Gary! No, I can't find a way to make it work in Xara either. I'll keep at it. ;)
I think it's down to the code Xara generates for the body section of the page. I don't know how you address this code. I suspect Acorn or Siran may know.
It works nicely in w3scholl try it as you state. LINK
Thanks, Egg! I've just managed to solve it. The solution was to use my original code, but, to make it work on Android, I had to add background width and height:
Thanks for your help with this. Now I just need to find a solution to making my site display at the left, rather than centre, of the browser window -- which I've asked about in a separate thread -- and then I'll be all set!Code:<style>
html{width:100%; height:100%; background:#ffffff url("http://www.URL-OF-IMAGE") no-repeat bottom right fixed;background-size:contain}
</style>
I've now it another problem. The code I've posted above works when you only have one variant. But as soon as you add multiple variants to the site, then a full-width white background appears, the same height as the page, and it obscures the image in the background!
Finally, I think I've fixed it! The answer was to use your code with some modifications, Egg:
Code:<style>
html {
width: 100% !important;
height: 100% !important;
}
body {
background-image: url('http://www.URL OF IMAGE') !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-position: right bottom !important;
background-size: contain !important;
}
</style>
That's looking better but to me the image is right aligned to the pasteboard, not the page. ???
Thanks, Egg. Yes, I wanted the image aligned to the right of the pasteboard (i.e. browser window). I think it should be possible to apply it to the page, though, if that's what you need.Quote:
Originally Posted by Egg Bramhill