Welcome to TalkGraphics.com
Results 1 to 10 of 10

Hybrid View

  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
    19,265

    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 + 16GB Ram + 232 GB SSD + 250 GB SSD portable drive
    Xara Designer Pro X 16

  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
    19,265

    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 + 16GB Ram + 232 GB SSD + 250 GB SSD portable drive
    Xara Designer Pro X 16

  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!

 

 

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
  •