Member
Background resizing
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?
Member
Re: Background resizing
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>
Member
Re: Background resizing
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:
<!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>
Egg
Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Member
Re: Background resizing
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>
Member
Re: Background resizing
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
Last edited by Egg Bramhill; 14 April 2019 at 11:40 AM.
Egg
Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Member
Re: Background resizing
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>
Posting Permissions
Reply With Quote
Bookmarks