Scalable/Responsive Browser Fill Images

Hi,
I am wondering if it is possible to make a browser fill image responsive or scalable so that I don't end up with a tiled or blown up effect when people have their browsers magnified. Is this possible with the recent svg update? Any help or advice?
Thanks,
Jake

What you want to do is make the browser fill image pretty big. I usually make them atleast 2500x2000. 960x600 is just the content area of your website. The size of your actual website is whatever aspect ratio the user is viewing it on.
An important note: If you use images of that size you have to make sure you optimize them properly for the web or there load times will be really slow.
Hope that helps.

Similar Messages

Sizing browser-fill images in Muse

I'm new to Muse, so I have a question that probably has a simple solution. How do you know how to properly size a browser-fill background image? I want the image to be elastic and fill the entire screen, so I sized the image to the exact size of my designed homepage ( 960 x 600 ). But here's my problem, when I select the tiling option to "stretch to fill" the browser, the image naturally gets a bit blurry because the whole screen is larger than the presets for my site. Should I use only vector background images rather than photographs? Or should I size my images much larger than the presets of my website so they fill larger screens and remain crisp? How do I determine what that size is?
Thanks!

What you want to do is make the browser fill image pretty big. I usually make them atleast 2500x2000. 960x600 is just the content area of your website. The size of your actual website is whatever aspect ratio the user is viewing it on.
An important note: If you use images of that size you have to make sure you optimize them properly for the web or there load times will be really slow.
Hope that helps.

How to create a hot spot for a browser filled image?

I have a background image created in Photoshop in the browser fill, scale to fill.
This is my landing page and would like to create a hot spot or "invisible" rectangle to link to another page in my site when clicked.
I have this done and working, however, my problem is that when my browser size is enlarged or reduced, the spot where I want the hot spot to be changes in size and location.
I want to create a hot spot that will keep its form around my logo no matter the screen size.
I have tried this with a no fill box and white stroke to see how it reacts with each fill property but cannot figure out how to create a box to be in a fixed position that will always match up
with the browser fill image location and size.
Thanks for your help.

Hi
Have you tried to pin the box on page so that it should be in fixed position ?
Also if want the box to be on some specific position with page scroll, then you can try applying scroll effects which would scroll the box on page but within defined positions.
Thanks,
Sanjit

Multiple browser-filled images?

I'm stumped. Can Muse create a site such as this one? http://grindspaces.com/
I'm trying to create something similar with a bkg. image on each anchored section within a single page website like the above. How do they get multiple, separate images to browser fill like that? So far I've been playing with Muse to attempt such an effect but to no avail.
Thanks!

Thanks for the help.
So if I understand correctly, you're saying create one large image in Photoshop by vertically attaching all of those images to each other and save it in one single document? I considered that would possibly be one way, but wouldn't that make for an extremely large file to load? Even when optimized as such?
Also, If that is what you are instructing to do, I'm not seeing how the TomokEnergy site was built that way. The site doesn't seem to have been built with one large PS image, but rather several sitting on top of each other such as the GrindSpace.com site I referenced above. I'm seeing http://www.tomokenergy.com/images/image1.jpg and http://www.tomokenergy.com/images/image2.jpg for example as single elements.
What am I not getting?

Browser fill image cuts off at bottom when published from Muse to BC...?

The site previews fine in the browser but when I publish it to BC it cuts off the bottom of the image and just shows the browser fill color (which is dark grey). I'm pretty sure this is a BC issue because everything looks fine in Muse. I have done all I can think of to fix this but havn't figured anything out. Here is some information if it helps. Weird thing is only the img. I used for the header is listed in the css, the img. for the browser fill is not listed.
http://grasslandoregon01.businesscatalyst.com/index.html
Master Page css:
#u7524
          border-style: none;
          border-color: transparent;
          position: relative;
          background: transparent url("/images/header_swoosh.png") no-repeat center center;
          background-size: cover !important;
#u7524_align_to_page,#u7579
          position: relative;
#u32679
          border-style: none;
          border-color: transparent;
          background-color: transparent;
          color: #FFFFFF;
          position: relative;

Hello,
You probably did not find this article at the right time but there is one KB article explaining how to insert the Edge content into a Muse website.
Basically what you have to do is, after you publish the Edge project, to take the exported folder, or just the files, (but I'm totally into taking taking the whole folder) and upload them to your FTP where the Muse site is published. After that just use the "Object > Insert HTML..." option from Muse and paste the <iframe> code from the KB and customize the path to the folder where the files are located and the width & height for the iframe.
KB can be accessed here: http://www.adobekb.com/inserting_edge_content.html
An example can be found here.
- Edge project uploaded to FTP.
- Content of the project folder.
- HTML code
I hope this will answer your question.
Cheers,
Cristian

Browser fill image doesn't scroll

... although I have ticked off "scroll" in the browser fill panel. But the tick-mark doesn't stick for some reason and disappears when I close the panel. I have used the scroll feature on other sites without problems. See here: http://mindtrainer.businesscatalyst.com/index.html

Thank you for posting.
Please try the steps of "solution 2" in this article : http://helpx.adobe.com/muse/kb/unexpected-error-occurred-i-200.html. This should fix the issue.
Regards,
Aish

Browser Fill Doesn't Fill Browser

My browser fill image isn't actually filling my whole browser, which makes my page look silly and childish rather than adaptable and proffessional. Notice the grey gaps on either side. Can someone please help me figure out how to get rid of these gaps and actually fill my browser? Thanks!

If you want to truely fill the whole browser background, you'll need to pick either 'tile' or 'scale to fill' for your fill option when you select the image.

Browser Fill does not work at all...

Hello all,
I am veryfrustrated at the moment, and maybe I am missing something, but I cannot get the browser fill to apply any type of image at all. I am working on MAC OSX Mountain Lion, I have started numerous new sites with the same result. I am designing a site for a tablet. When I select Browser Fill and navigate to a file I would like as a background, select it and nothing happens. I have tried all different types of files, .jpg's, .gif's, .png's, .bmp's and tried changing the setting in the browser fill menu such as fill, fit and original size, and also the alighnment. I get nothing. It also does nothing on phone layout, but supprisingly it will place and fill on Desktop Layout.
Is there something I'm missing? I am so confused.
Thanks in advance for any help.

As with the Desktop layout, there is a page on top of the browser fill. Depending on your design, you may want to use a page fill instead (since the browser fill seldom shows on tablets/phones if the page fill is opaque) or set the page fill to none so the browser fill shows through.

Problem with browser fill

Hi guys,
When adding a browser fill, the image covers the whole page, am I doing something wrong?
Thanks!

Also , please check if you have fill set to transparent as that could be the reason why it seems like image covers the whole page..
Please note that when you add the image to browser fill it will cover the white portion as shown in below image. This means the actual page area (in brown) is always by default above the browser fill.
take a look :
For more details you may want to refer to : Adobe Muse Help | Using Fill and Browser Fill options
Regards

Open a File Dialog Box to browse through image files

Hi all
I need to develop a code to open a File Dialog Box to browse through Image Files in Oracle 10g.
Once the Image File is selected i need to save the file in a Table Column in the Backend Table.
Please help me.
Thanks
Nakul Venkatraman

Hi
Thanks for your prompt response on this.
I came across a Sample Form File which would allow the User to browse through files from local PC.
Following is the code :
declare
dirname varchar2(255);
v_filename varchar2(255);
begin
message('1');
tool_env.getvar('E:\', dirname);
message('2');
dirname := dirname || '\project';
message('3');
v_filename := get_file_name(dirname,NULL,
'All Files (*.*)|*.*|' ||
'JPEG Files (*.jpg)|*.jpg|' ||
'Bitmap Files (*.bmp)|*.bmp|' ||
'TIFF Files (*.tif)|*.tif|' ||
'CompuServe Files (*.gif)|*.gif|' ||
'PC Paintbrush Files (*.pcx)|*.pcx|' );
message('4');
if v_filename is not null then
read_image_file(v_filename,'ANY','pp_foto.foto');
end if;
end;
The code is written inside WHEN-BUTTON-PRESSED Trigger.
When i run the form it is not opening the dialog box.
Please help.
Regards
Nakul

Fill Image not visible with iOS (ipad/iphone)

Hi
I created a website with Adobe Muse and I have an issue when surfing with ipad or iphone.
When you have a coloured rectangle and add a fill image to it, it's perfectly visible with any type of browser on a desktop pc.
Yet, when using iOS7 the image is not shown, I only see the coloured rectangle.
This issue only concurs when I use parallax layers. The moment I add a movement to the image, it's not visible on ipad.
What I exactly do:
image fill: adapt to fill (in dutch: aanpassen aan vulling) and centered
movement: start movement up and right both on 0. after movement: up and right both on 0. This way I can create a parallax effect.
You can look at the example: http://balratmort.businesscatalyst.com
There are 4 image's not shown.
Strange thing: the first image with the brazilian flag has the same settings as the others, and the image is visible!
Could someone please help me in this?

I found the solution/error!
my main position in the movement tab was set to 0px.
So the movement starts when i'm at the top of the page.
when i reach the image it's already scrolled out of focus.
I need to set this to the pixel where my rectangle starts, not 0px.
and that's why the first image with the brazil flag, worked correctly!
I hope it's clear, since my muse is dutch, not english.

Is 2030 pixel too with for a browser fill??

I need a painting as browser fill.
I've tried 1400x1738 and hakked for "tile" and "position" to the left and for "scrolling" in the fill optinon in Muse
But when I publisher the site, it comes a line about 30 cm on the right side, where the image begins again .... (so you see a litte part of the image again in right side)
It doesn't look good.
Then I have tried 1700 px in width, but this doesn't help either.
Then I tried 2030x1738 pixels and now it looks pretty good. But is the with with 2030 pixel too with for the browser??
I have a phone issue of the homepage, so I have not to think about the phone browser.

If you don't want to use scale to fit or scale to fill for some reason, and you want the image to be wide enough to fill every possible browser background, then you'll need a very large image.
Since you don't control how big a user sizes their browser window, some users with very large monitors, or users who stretch their browser window across 2 monitors might have a browser window 4000 pixels wide. Usually 'scale to fill' or 'scale to fit' is the option you want to use to fill the browser background with a single non-tiled image.

I changed my browser fill and the update does not show in the preview mode

I changed my browser fill and the update does not show in the preview mode. I saved and restarted muse but the problem is still there. Any thing else I can do? Could it be something that changed in the file?

Hello,
What did you put in the "browser fill" area, an image or a color? WIth gradient or with solid color? Also, does it show fine if you "Preview in Browser"?
Screenshots showing the Browser fill section (like this: http://screencast.com/t/RHqdVPP4) and the display in Preview mode would also be helpful.
Cheers
Parikshit

Full browser width image with tiled pattern not previewing or publishing.

Using the rectangle tool to create a full browser width image, I filled it with a tiled pattern and added a drop shadow. This 80px tall rectangle serves as the background bar of my top menu navigation. Everything looks great when building in Muse CC, but when I go to preview or publish, it's missing altogether.
Any ideas?
http://moonstonebistro.businesscatalyst.com/index.html
~ Kacee

Looks like you have deleted the site now. If you were experiencing any errors during publish, most likely it happened due to the recent outage with BC with loading of assets to sites hosted on US DC - http://status.businesscatalyst.com/.
Thanks,
Vinayak

Attach Site Elements to Background (browser fill)

Hi everyone.
I am designing a site in Muse. The layout of the home page looks about like this:
I added fill to rectangles to make things a bit more clear. The bachground filled with small grey-striked rectangles is actually this browser fill set to tile.
So you see that the browser fill tiles go well in line with the coilored rectangles.
However, when I resize the page in browser preview the skew off,м obviously. The scale of the site elements does not change in line with the scale of browser fill.
Same thing happens when I resize the browser window.
I do realize that this is the natural bahaviour of Muse (dynamic site layout etc.).
So in this context the questions are:
Is there any way to turn off this dynamic resizing or dynamic site layout?
OR
Is it posstible to attach the site elements to browser fill so that they rescale and move inline with the fill?
(pinning didn't really helped or mybe I just did it wrong).
Or perhaps there is some other solutions that I don't know of...
Thank you very much in advance!!

Hi Sasha!
Did you choose Position "Middle" in image filling tool? If not, so it can cause this problem.
Best Regards
TaikaJim

Scalable/Responsive Browser Fill Images

Similar Messages

Maybe you are looking for