Welcome to TalkGraphics.com
Results 1 to 10 of 10
  1. #1

    Default 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?

  2. #2

    Default 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>

  3. #3
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default 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

  4. #4

    Default 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>

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default 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 12:40 PM.
    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

  6. #6

    Default 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:

    Code:
    <style>
    html{width:100%; height:100%; background:#ffffff url("http://www.URL-OF-IMAGE") no-repeat bottom right fixed;background-size:contain}
    </style>
    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!

  7. #7

    Default Re: Background resizing

    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!

  8. #8

    Default Re: Background resizing

    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>

  9. #9
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Background resizing

    That's looking better but to me the image is right aligned to the pasteboard, not the page. ???
    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

  10. #10

    Default Re: Background resizing

    Quote Originally Posted by Egg Bramhill View Post
    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.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •