WD10 Fill Browser Width for Photo
I've noticed the function of Full Browser Width in WD10 Premium.... which is working great for solid colour rectangles etc used in header + footer.
But I also have an image which I want to be full browser width. In older versions of WD I've had to rearrange the image in photoshop, making in 1500 px wide then chopping off 250px from one side and paste it on the other so when it's filled the browser as a background it's been full width and centralised.
In desktop mode full width is looking fine, but in the mobile version of the site is doing what older versions used to do and tiling the image so its repeating part chopped off.
What's the best solution to prevent the image tiling in mobile versions for phones with bigger screens? Is it to do something akin to the old solution? - or just make the image say 1000 px wide with fade out transparency and use that?
Re: WD10 Fill Browser Width for Photo
Hi Megg, you could try this
board.xara-users.info/viewtopic.php?f=8&t=2992#p20158
The jQuery version seems to work best :)
Re: WD10 Fill Browser Width for Photo
Thanks James. Im gonna give this a try tomorrow + hopefully get it working for the mobile site.
Re: WD10 Fill Browser Width for Photo
Is there a way to get this to work for full browser width but not full browser height?
The image needs to be the full width of the browser but only 487px in height
Re: WD10 Fill Browser Width for Photo
Hi Megg, is the background image to stay at 487px at all screen sizes?
If so use the css version changing the code to
HTML Code:
<style type="text/css">
html {
background: url(index_htm_files/image-namejpg) no-repeat center center fixed;
background-size: 100% 487px;
background-color:#0C0E0D;}
</style>
<style>
#xr_xr {
margin-top: 30px;}
</style>
Re: WD10 Fill Browser Width for Photo
How would one go about finding the image name of the image on the mobile site?
In WD its termed as bitmap 104 ... but on the server I dont have a file named 104.png
On a desktop site you can right click to identify the file name, but how do I find this name for an image in a mobile site?
Re: WD10 Fill Browser Width for Photo
Hi Megg, using the name tag give your image the name filename="image-name" changing image-name to whatever you want. Make sure you leave out the file extension.
:)
Re: WD10 Fill Browser Width for Photo
Thanks James for your information. But when I implement this the image is disappearing altogether.
I have tried to insert the code under <body> on the image and also under <body> as another placeholder object placed on the pasteboard, but both ways the image is not visible. I have inserted .jpg into the code you provided as the . was missing but tried it without also
Re: WD10 Fill Browser Width for Photo
Hi Megg, the code should go in the <head> section. Yes there should have been a dot there :)
You may want to change the second "center" in the code to "top"
Re: WD10 Fill Browser Width for Photo
Hi James, it's still not working, The image disappears when the code is inserted
Re: WD10 Fill Browser Width for Photo
Re: WD10 Fill Browser Width for Photo
In the code
<style type="text/css">
html {
background: url(index_htm_files/photo1.jpg) no-repeat center center fixed;
background-size: 100% 195px;
background-color:#0C0E0D;}
</style>
<style>
#xr_xr {
margin-top: 30px;}
</style>
Do I need to replace the text in red with the relative path? Or with the full url? or just use the code as it is?
Re: WD10 Fill Browser Width for Photo
just a thought - but this is for the mobile version of the site. I noticed on steve's example he says it will work in chrome, safari etc... but im using on andriod / iphone will this code work on these devices or is that why its proving unsuccessful?
