Copy link to clipboard
Copied
hello everyone. I am used to the older dreamweaver where one had the layer properties and could arrange layers to be front or back. I have recently upgraded to CC and it no longer has that function. I have an image that is in a fixed position on the top of my site, with the intent to have part of it visible when other images ar scrolled over it (in the areas where it is transparent). Any help would be highly appreciated.
Copy link to clipboard
Copied
Can you post a link to a sample of your code in question? That would give us much of the information needed to help you plan the best course of action to acheive the desired effects.
Copy link to clipboard
Copied
Thanks for responding Ben. Can I send an XD preview link? I am a designer, not much of a developer, Though I found the dreamweaver CS6 to be more designer friendly.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
So based on that, you are much better not having that old DW functionality. I believe what you were referring to was the AP div functionality which are absolutely positioned layers and would be the same regardless of the resolution which could cause your design to potentially look ok on desktops, but not scale properly on mobile.
As you are a designer and not a developer, I would recommend following a tutorial like this one ( https://css-tricks.com/perfect-full-page-background-image/ ) that you can do in DW or consider looking into a CMS with page building capabilities to accomplish this for modern browsers.
Also it's worth noting that like Dreamweaver, XD is on life support here at Adobe and is no longer receiving any active updates, and to be honest I am not certain you can still download XD if you don't already have it installed. So you may want to use this an an opportunity to reconsider your workflows for building out these projects in the future.
Copy link to clipboard
Copied
Thanks so much. I have XD installed, and are quite good working in it, but the plugins to convert to web does not work so well if you have anything out of the ordinary in your designs. I have done some basic tutorials on bootstrap and responsive setup in Dreamweaver. So slowly starting to get back on the ropes. Looking into the background image as a solution definitely sounds feasible.
Thanks for the advise
Copy link to clipboard
Copied
Working with XD, or even with Figma, it's not like slicing and save for web from photoshop way back in the day. With responsive designs its about handing off functionality and CSS styles along with images to conver that into code. Also with regards to Bootstrap, I would not recommend using DW's built-in version as it is out of date. The latest version in DW was 4.4 (2019) and the latest is up to 5.3. My recommendation would be to stop focusing on learning tutorials in DW and start looking into more generic web/html/css/js/etc tutorials that you can carry to any application. And as far as XD, the same could be said that it would be worth investigating an alternative like Figma/Sketch to eventually replace XD in your workflows before you invest too much time in an application that is not being maintained.
Copy link to clipboard
Copied
To add to what @Ben M has suggested, have a look at this video (lengthy, but worth the watch for non-coders)
Copy link to clipboard
Copied
Put your primary image in the <body> background with CSS like this:
body {
background-image: url("your_image.jpg"); /* Path to the image you wish to use */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
RESULTS:
https://www.w3schools.com/cssref/tryit.php?filename=trycss3_background_hero
To build modern websites, you must be able to work with HTML & CSS code. If that's not in your wheelhouse, think about using an online site builder instead of a code editor.
Good luck!
Copy link to clipboard
Copied
Thanks so much for everyones input and time. It is highly appreciated. I have ended up using Webflow. This turned out to be working very well for me. And putting the image as a background also worked like magic. The responsiveness also turned out great where i were able to tweek different screens individualy.