Background Pictures Edge Reflow

How can I adjust the position of a background picture in different breakpoints?

yup. sounds like you got it. here's a little GIF showing it in action too. You just need to adjust it at each MQ to be at the placement you want

Similar Messages

Set body background image in reflow

Hi, I've been lookoing up and down to find where I can set a background image for a page in reflow. Cant find it anywhere. If I manually edit the html or css in the files edge generates to add a background image, of course it works, but next time I reopen the project in reflow, my changes get deleted, and I am back where I was before.
So, where in reflow can I set the background image?
thanks and best regards,
c

Something like this? Background Pictures Edge Reflow

Can Edge Reflow handle type on top of background image within a box?

What I mean is, from code point of view, it's not <img src="">, but <style="background: url()">, then put type on top of the background image. Can Edge Reflow handle that? Really appreciate your help.

This forum is actually about the Cloud, not about using individual programs
Once your program downloads and installs with no errors, you need the program forum
If you start at the Forums Index http://forums.adobe.com/index.jspa
You will be able to select a forum for the specific Adobe product(s) you use
Click the "down arrow" symbol on the right (where it says ALL FORUMS) to open the drop down list and scroll
http://forums.adobe.com/community/edge_reflow_preview

New Update to Edge Reflow CC Available!

Today, we are pleased to announce that an update to Edge Reflow is now available. Included in this release are the following new features:
Multi-page design: On the right side of Reflow’s design surface (below the recently added ‘Assets Panel’ and above the canvas resize handle), you’ll notice a brand new ‘Pages Panel.’ Here, you can easily duplicate, rename and navigate between all of the pages in your project. Once your design is created, a new navigation bar at the top of the browser preview will allow you to switch between all the pages within your project.
In-app preview mode: There is now a simpler and more immediate way to see your design. Try the new in-app preview mode by hitting the TAB key. The app’s UI, including on canvas guides, will disappear, leaving you with just your design.
Right-click support: Also included in this release is the support for right-click. Now, with a simple right click, you will be able to copy and paste styles, duplicate elements and turn an asset into a background image.
Cmd/Ctrl: One of the most commonly used actions in Photoshop and Illustrator is the Cmd/Ctrl key, which allows you to toggle between placement and selection mode. You can now use the same shortcut in Edge Reflow. You can also pull up the ‘short cut sheet’ in Reflow by hitting Cmd/Ctrl +/.
Improvements to “Undo”: Drastic improvements have been made to the reliability of the undo function. We are aware of some odd behaviors in the past, and they have been addressed in this release.
Save to generate HTML/CSS: In this release, we’ve made the HTML and CSS more accessible. Previously they were only created when the project was previewed in Chrome or on devices using Edge Inspect. Now, however, every time you save your work, the HTML/CSS for each page will be generated and made available in the ‘assets’ directory of your project.

Hi all,
If you are unable to see the update in your Creative Cloud application, uninstall the Creative Cloud application and reinstall it.
Thanks,
Preran

Fireworks to Edge Reflow?

I know Adobe don't like Fireworks but I'm hoping that they will have a workflow from FW6 to Edge Reflow. Is there any info on this?
Photoshop is great for image editing but it sucks real hard for web and mobile design, I just can't use it for that sort of work. I still find it mid-boggling how many people have FW installed and yet use PS for all their web and mobile design work. Unbelievable.

The output is bad, but it doesn't have to be, so I'm wondering which steps in building the FW layout in a particular way are most onerous. If you had to put all the elements you want to appear in a div together in their own sublayer, would that be too bad? What about naming elements in a particular way to specify how they get output? What if you had to use a special div auto shape instead of a rectangle to draw backgrounds and things?
I tried this process with great excitement when FW became able to export CSS-based layouts but the results were terrible so I abandoned it and just went back to producing the layouts as they were required visually. Your ideas are on the right track in terms of setting up the FW page and getting good output (with a better engine). Personally, I don't like to use lots of layers and never use sub-layers (selecting objects on the canvas in FW is so easy), so the sub-layers approach is less appealing but I do like the idea of a DIV auto shape. It would have to act as a container and be able to 'hold' the elements inside it, including other DIVs and possibly tables. I think shapes and text (content) should be styled using FW styles which would be converted into CSS styles (does it already do this? I haven't checked).
I think to really test the integrity of this process would require some more thinking and scenario-based documentation, which I would gladly do if you were interested in doing something in this space. I love FW and use it every single day.
That would require rebuilding it from the ground up, but I also believe that a graphics app built on an HTML renderer is the future, since you get layout reflows and rich styling for free. Reflow is nowhere to having sufficient tools for even a very basic drawing app (not that that's what it's trying to be right now).
I totally agree re the graphics app on HTML renderer which is why I'm so interested in moving the design and layout process onto a real HTML layer right from the start. This includes interactivity as well eg. rollovers, content flips, sliders etc. etc. ER immediately made me think like this but as you say, it's miles away from it and I don't expect Adobe to go to that place.
John, if you're interested in pursuing any of these ideas, I would be delighted to provide input and research into any effort. I am a UI designer/strategist for a web-based CRM/CMS company.
Cheers
Paul

How to add links and rollovers from an exported Edge Reflow HTML in Dreamweaver?

Hi,
Thanks to the very helpful community I have found the way to get my HTML file from Edge Reflow.
Upon opening the HTML file in Dreamweaver, the CSS, Java scripts are wonderfully linked. However, I am not experienced enought to manipulate the divs to get a rollover or add links to the layout.
Eg. Sticky Navigation bar on the top, how do you add rollovers and links?
All help is very much appreciated.
Thank you for your help in advance!

Hi Chris,
your plan for Reflow sounds good. Versioning is probably the most adaptable way to integrate it with the rest of the workflow.
What I think is still missing, on the simple side, is link creation and management inside Reflow.
Of course, considering you have just introduced multiple pages, this feature shouldn't be far...
About Dreamweaver, I've been a faithful user for years but now it's definitely old for some uses.
Just to say, if I open the responsive page I just created in Reflow with DWCC in Live View, something basic as background gradients are completely missing. Well, I'm not going to use it for this kind of work.
Do you know for what DW is still a great tool? Email Newsletters, since they still have to respect old standards that no one else uses anymore.
For all the rest I definitely prefer the editor/IDE way: SublimeText and other tools.
They're faster, more apt to the task and, similarly to the Adobe Edge line of products, made with the same technologies they help to work with.
In the future, who knows... Maybe, you should put in development a "Dreamweaver Edge" version and drop the old one, a little clunky even if recently revarnished ;-)

How do I set a background picture for my homepage, not just the edges but the entire screen?

When I use other web browsers I have the ability to set a background picture on my homepage. How do I do that on Firefox?

Is this picture to be used in a drop zone or used as the total background of a theme? If the former it's not possible to do that as that's the nature of the drop zone .
For a general background for the menu the image should have a 4:3 size ratio in the landscape orientatikon. For a portrait oriented photo that would mean either cropping to a 4:3 landscape ratio or creating a 4:3 landscape canvas and putting the portrait image in the center, edgo or wherever and using the composite image. There will be some white space but that can be filled with a color that goes with the image.
Of course you will need to use 3rd party image editor that an handle layers or Pages.
Some Image Editors That Support layers:
Photoshop Elements 11 for Mac - $79
Rainbow Painter - $30
Imagerie - $38
Acorn - $50
Pixelmator - $60
Seashore - Free
GIMP for Mac - Free
Xee 2.1 - free
You will get something like this:
One could move the image to the right or left edge for better esthetics and have the buttons in the "white" area.
OT

Lost my Edge Reflow file when exporting for code editor

Hello,
I just finished my project and exported the code. The code look nice, but I wanted to change something back in the Edge Reflow file and when I opened the file all I could see was a blank screen, no pages, no information, no nothing. The only thing I saw was that on the Asset Library all of the pictures I used were there, and an error on the 'talk to the team' button: Failed to load URL file:///C:/Program%20Files%20(x86)/Adobe/Adobe%20Edge%20Reflow%20CC%20Preview/www/reflow/ src/modules/extensionbar/view/templates/olark.html with error (-3)
Could somebody tell me what to do at this point?
Thanks in advance!
Marcela

I managed to figure this out through laborious guess and check. Just thought I would share the bug in case anyone else ever runs into it.
A third party library I was using wrote try catch statements wrong:
try{
catch(Error:*){
No idea why the original author did it like this, probably meant to write "error:*" and didn't release shift fast enough after the "(" but as you might suspect "Error" is a reserved object name to cannot be declared as a paramenter variable
when replaced with:
try{
catch(error:Error){
the memory access bug went away. What is strange is that the incorrect try/catch statement works just fine when published to swf, air, or android and is only an issue with the iOS converter, and obviously produces a very cryptic error.
I was using CS5.5 so maybe this has been fixed (if not I would suggest making this a compile time error) but just thought I would post my findings.

How do you use edge web font in Edge Reflow?

By default, I don't have a lot of fonts. It's just viewing a few of them.
How can you get the web font for Edge Reflow? Can you use font from fontbook?
Is there a way to download Edge Web Font?

Above: using Brandon Grotesque (web use font) does not display the correct font.
I'm using Typekit and have an internet connection. If I switch to a "desktop use" font, it shows up, so I'm guessing the "web use" only fonts won't show in Reflow. A little frustrating when you're trying to get an accurate preview/determine best font styling because of the back-and-forth workflow.
Above: using Source Sans Pro (desktop use font) does display the correct font.

How do i buy Edge Reflow

I already have Photoshop, through my CC account, and now looking into buying Edge Reflow.
I just can't figure out how much it costs, or even how to purchase.
All the links i follow, to purchase, take me to a plan overview, with products that i don't need, and no price for Edge Reflow.
Any advice?

Hi there,
Edge Reflow is currently a preview release,The Edge Reflow (Preview) is available for download by anyone with a free or complete Creative Cloud membership.
See FAQ here - Edge Reflow FAQ
^Ani

How do I uninstall Edge Reflow CC?

I recently downloaded the app because I was curious about using it. Now I'm having issues on my print files (end of file) and the stability of Photoshop CC when I do things like adding layer masks and vector masks. When I look at the dump for output it's indicating that I'm using an unsupported layer type due to Reflow.
How can I uninstall Edge Reflow CC? I have an uninstaller for Edge Animate CC, but not one for Edge Reflow CC.
Applications > Utilities > Adobe Installers
Mac OS X 10.8.5
Thanks for any (helpful) responses in advance.

I said dump, I meant log. I didn't get a screenshot of the message. It said something to the effect of Generator had and error and close Photoshop. When I tried to save my files I received unexpected end of file encountered upon reopening the files upon restarting Photoshop. The first time I received a message was on creation of a layer mask from a vector path. The second time was in a different file, I was converting the vector path to a vector mask. Luckily I saved the original file. It's just a jpg. I was eventually able to edit the file (3 attempts).
[1;31mUnknown layer type, something is wrong with the document
[0mHandling an unknown change by deleting all generated files and resetting the state
Getting document info with these params: {"documentId":78,"flags":{"compInfo":true,"imageInfo":true,"layerInfo":true,"expandSmartO bjects":false,"getTextStyles":true,"selectedLayers":false,"getCompSettings":true}}
Photoshop message: {"id":16,"body":{"version":"1.0.0","timeStamp":1383789844.116,"id":78,"file":"/Volumes/cl ients/client/Images/industrial/hpu/G-18-T.jpg","bounds":{"top":0,"left":0,"bottom":1015,"r ight":2035},"selection":[0],"resolution":300,"globalLight":{"angle":120,"altitude":30},"ge neratorSettings":false,"layers":[{"id":4,"index":0,"type":"layer","name":"Layer 0","bounds":{"top":58,"left":54,"bottom":942,"right":1988},"visible":true,"clipped":false ,"mask":{"bounds":{"top":58,"left":54,"bottom":942,"right":1988}},"pixels":true,"generator Settings":false}]}}
Received complete document: {
    "version": "1.0.0",
    "timeStamp": 1383789844.116,
    "id": 78,
    "file": "/Volumes/clients/client/Images/industrial/hpu/G-18-T.jpg",
Also
Resetting state for document 78
Document path changed from "/Volumes/clients/client/Images/industrial/hpu/G-18-T.jpg" to "/Volumes/clients/client/Images/industrial/hpu/G-18-T.jpg"
Scheduling change to layer 4 of 78
Creating layer context for layer 4
Photoshop message: {"id":16,"body":"[ActionDescriptor]"}
[1;31mUncaught exception on Wed Nov 06 2013 21:04:04 GMT-0500 (EST):
Error trace: TypeError: Cannot read property 'name' of undefined
    at startLayerUpdate (/Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:1001:70)
    at /Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:980:21
    at runPendingUpdates (/Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:956:38)
    at null._onTimeout (/Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:982:17)
    at Timer.listOnTimeout [as ontimeout] (timers.js:110:15)

Background pictures do not show up on Singsnap when I open a song to listen to.

When I click on a song to listen to on the site "Singsnap" some of the users have put pretty background pictures on their site but all I see is plain white, the background does not show up....It also does not show up on IE but it shows up beautifully on Google Chrome......Is there some setting I have disabled or what......The HTML is enabled...

See:
* [[Website colors are wrong]]
* [[Websites look wrong]]
* [[Images or animations do not show]]
Start Firefox in [[Safe Mode]] to check if one of the add-ons is causing the problem (switch to the DEFAULT theme: Tools > Add-ons > Themes).
* Don't make any changes on the Safe mode start window.
See:
* [[Troubleshooting extensions and themes]]
* [[Troubleshooting plugins]]

New Release of Edge Reflow CC (Preview 7)

We're excited to share Edge Reflow CC (Preview 7)! This new update helps you get up to speed with Reflow quickly, so you can create awesome responsive designs without a huge learning curve.
Thanks to your feedback, we've added the following new features:
New Welcome project that's available when you first launch Reflow. It's an interactive introduction to Reflow that is also an actual responsive Reflow project!
Add forms to your design with the new Form Elements, including buttons, select drop-downs, text inputs, check-boxes and radio buttons
Demonstrate interactivity in your design using the hover, focus and active states
Create links across multiple pages to show navigation
Move objects intuitively in the layout with the new insertion caret
Working with groups (command/ctrl G) and elements within groups is now much easier and more intuitive
Search and filter your assets using the new search field in the Asset panel
With the help of Paul Trani, we’ve created 11 short tutorial videos walk you through each step in creating a responsive design in Reflow. Choose which step you’re most interested in learning or watch them all to get a better understanding of Reflow and designing for the web.
For more info, read our blog post and visit our site!

Please can you include the play.psd used in the features video. I would like to understand the correct layer ordering and naming order so that when the psd is imported into edge that the DOM is set up correctly. Alternativly please make a video or tutorial regarding layer organisation with the DOM in mind.
Thanks

I am trying to connect my mac book pro to the tv via a mini display port and a hdmi cable, the only picture that is on the tv screen is the background picture on my computer, any suggestions?

I am trying to connect my mac book pro to the tv via a mini displayport to a hdmi cable, the only picture on the tv screen is the background picture of my mbp, does anyone know what I need to connect to my samsung tv ?

Hi there. I also bought an iWires mini Display port to HDMI cable and have an LG LED/LCD TV. I plugged it in to my MB Pro and followed the very small writing that came in the package and got both audio and video going. You need to change the audio settings from within System Preferences on your Mac to select your TV as the audio output.
My concern is the data latency - do you experience a delay between moving your mouse on the MBPro and the TV displaying the movement? It is only a fraction of a second, but certainly enough to be annoying, especially in a cable as expensive as the iWire.

SVG with PNG fallback, Responsive, EDGE Reflow & Animate integration

I mentioned this on the Muse Facebook, and they said I should post it here... I think Muse is an awesome program. But I really, really would love to see these features. Any of them good enough to make it to the sketching table?
1. SVG with PNG fallback support (for Retina displays)
The problem with Hi-Res displays on Tablets, phones and laptops is that the web is becoming awfully ugly. You need to zoom to fit webpages, and when they fit, the JPG's and PNG's become blurry. Since displays are increasing resolution year after year and pixel density is becoming a real issue, on phones (like the HTC One) or laptops (Macbook Retina or Chromebook Pixel).
Wouldn't it be great if we could use vector SVG for new devices for sharp a crisply logo's on every screen. And with that instantly use an automatic PNG-fallback option for older browsers. This would signifantly upgrade any website made with Adobe Muse and the Web in general if you ask me! I've done some research and I found this website very useful considering this issue: http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
2. Responsiveness (Adobe EDGE reflow integration)
Adobe Reflow is amazingly promising. What if (instead of making different websites for every device) you can export a website to Adobe Reflow to make the design instantly responsive.
3. Beter Adobe EDGE Animate integration
EDGE Animate is a great program, especially with the codes and actions which you cna integrate. The only problem is sometimes I want an animation to start playing when I'm at that part of the page, not after when it's done loading. Overall the integration is so-so, and it's doable to add an animation to Muse, but these tweaks could upgrade it from great, so turbo-awesome!
Which brings me to my next point:
4. Dynamic Content Loading (Load on view)
Isn't Muse a great tool for making one-pages?! I love it for that, and I do love one-pages. The problem is that it can take a while to load when it's becoming more complex. Is there a possibility to add a feature when thing are loaded when you scroll? Which is fairly often used on blogs and stuff.
5. Horizontal Parralax Scrolling
Since the latest update I've been pretty hooked on the functions of parralax scrolling and what it could do in a usefull way. The problem is that it doensn't work for horizontal scrolling. The objects can move horizontal (when scrolling vertical). But there's no option to add an effect when scrolling in a horizontal direction.
What do you think? Any of these interesting enough to develop?

I would love all of the features in this post. But you must post it in the Idea section of the forum so people can vote for your ideas.

Background Pictures Edge Reflow

Similar Messages

Maybe you are looking for