WD10 Fill Browser Width for Photo

**Megg81** · 25 August 2014, 06:48 PM

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?

**jamesd** · 25 August 2014, 07:59 PM

Hi Megg, you could try this
board.xara-users.info/viewtopic.php?f=8&t=2992#p20158
The jQuery version seems to work best

**Megg81** · 25 August 2014, 08:57 PM

Thanks James. Im gonna give this a try tomorrow + hopefully get it working for the mobile site.

**Megg81** · 27 August 2014, 11:57 AM

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

**jamesd** · 27 August 2014, 01:44 PM

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>

**Megg81** · 03 September 2014, 01:38 PM

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?

**jamesd** · 03 September 2014, 03:11 PM

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.

**Megg81** · 06 September 2014, 12:57 PM

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

**jamesd** · 06 September 2014, 01:15 PM

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"

**Megg81** · 07 September 2014, 11:41 AM

Hi James, it's still not working, The image disappears when the code is inserted

Thread: WD10 Fill Browser Width for Photo

Thread Tools

Display

WD10 Fill Browser Width for Photo

Re: WD10 Fill Browser Width for Photo

Re: WD10 Fill Browser Width for Photo

Re: WD10 Fill Browser Width for Photo

Re: WD10 Fill Browser Width for Photo

Re: WD10 Fill Browser Width for Photo

Re: WD10 Fill Browser Width for Photo

Re: WD10 Fill Browser Width for Photo

Re: WD10 Fill Browser Width for Photo

Re: WD10 Fill Browser Width for Photo

Bookmarks

Bookmarks

Posting Permissions