https://johnranger.ca/My%20Past.html
The background image is stable but all pictures and sript move up and down. Can I do this with my version of Xara?
If so how please
Printable View
https://johnranger.ca/My%20Past.html
The background image is stable but all pictures and sript move up and down. Can I do this with my version of Xara?
If so how please
Yes.
Import the image you want to use as the static background
Delete it. (It still remains in the bitmap gallery)
Open the Bitmap Gallery and select this image.
On the top menu of the Gallery select 'Background'
Choose 'Page'
In the P & L gallery open the page background
Right click the image, select Web Sticky/Stretchy
Set up as per attachment.
EDIT: That should be Stick to top NOT Sticky!
Preview
:)
Fantastic Thank you very much
I can't find................. Right click the image, select Web Sticky/Stretchy
Are you sure I can do this with version 7.1??
for earlier Xara applications, I think you can add this CSS to the Website HTML Code (head) for Vertical Supersites:Quote:
Originally Posted by ablafontain
for any image you have set as the Pasteboard background.Quote:
<style>
.xr_bgb0 { /* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
}
</style>
You probably need it in each Page HTML code (head) for Conventional sites.
You also might need to check in index_htm_files\ xr_main.css to check .xr_bgb0 is the right class.
Acorn
P.S. I am sure i did all this a better way years ago and put it in TG, so if anyone finds it, help us out.
will try thanks
Sorry to say that did not work :( Also tried
body {
background-position: center;
background-image: url(../ranger\index_htm_files\0.png);
background-attachment: fixed;
}
================================================== =
body { background:url(ranger\index_htm_files\0.png) top right no-repeat; background-attachment:fixed; }
Was this the one you're referring too Acorn?
Ack. I responded to this thread and my post did not get posted. (Would not be surprised if I had already left the page). You can get a copy of WD 11 on eBay for under $20 US and then this will be an easy process, plus you get web animation and sticky objects that remain on the same place on the page.
@egg, thanks for looking but not that.
Here is a XDPX15 conventional page that should work in WD7: Attachment 120240
The CSS is in he Page code (head).
If you example the index page source, you will find <body class="xr_bgb0"> or similar, which needs to line up with the CSS code
(<style>
.xr_bgb0 {
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
}
</style>).
Acorn
Acorn than you for all the help but I need you to walk me through what comes first here. I tried using this but nothing yet.
This my source in preview mode
<head>
<meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
<meta name="Generator" content="Xara HTML filter v.4.1.1.671"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
<script language="JavaScript" type="text/javascript">
<!--
function xr_rx(){var ww=document.documentElement.clientWidth;
xr_dx=(ww-parseInt(xr_xr.style.width))/2;var i=-parseInt(xr_xr.style.width)/2;
if(xr_dx<0){i-=xr_dx;xr_dx=0;};xr_xr.style.marginLeft=i+"px";
document.body.style.backgroundPosition=xr_dx+"px 0px";};
function xr_nn() {return(true);};
window.onresize=xr_rx; window.onload=xr_rx;
-->
</script>
(<style>
.xr_bgb0 {
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
}
</style>)
</head>
Did the example file work?Quote:
Originally Posted by ablafontain
If so, can you create a design in your product that has an image repeated on the Pasetboard. by importing then removing from the page and then going to the Bitmap gallery and adding the image back with right-click Set pasteboard background?
At this point you will have a scrolling background.
Open Utilities > Web Properties > Page > HTML code (head).
Add the <script>...</script> styling, click OK and then the Apply.
When you Preview, the background is fixed.; reduce the height of your browser so the vertical scrollbars appears to see this in action.
The last wrinkle is to unlock the Page background, remove any shadow and set the page to 99% transparency.
Acorn
There shouldn't be any curved brackets around the <script>..</script>.Quote:
Originally Posted by ablafontain
You picked it up from my last Post and not the original - I was using the brackets to be tidy!
Acorn
Just tried this and still nothing. I think I will give up on this effect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
<title>past</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
<meta name="Generator" content="Xara HTML filter v.4.1.1.671"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/highslide.css" />
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="index_htm_files/highslide-ie6.css" /><![endif]-->
<script type="text/javascript" src="index_htm_files/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
<script type="text/javascript" src="index_htm_files/roe.js"></script>
<style>
.xr_bgb0 {
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
}
</style>
</head>
Just tried this and still nothing. I think I will give up on this effect.
NEVER GIVE UP!
Upload your design file.
Acorn
design file?? Where is that?
Well, I uploaded mine: CSS3 - Fixed Background.xar; it is what Xara allows you to save to allow a design to be published, shared or printed.Quote:
Originally Posted by ablafontain
Acorn