Skip navigation
DiggerK
DiggerK
Currently Being Moderated

Double Body Background in Muse?

May 1, 2012 1:41 PM

Tags: #background #code #repeating #double

Hi,

 

Looking forward to the "semi-official" release of Muse with the Adobe Creative Cloud in a week or so! I haven't downloaded the beta version, but have read quite a bit of the early tutorials and videos.

 

Just FYI, I'm NOT code-averse, and can look at html and CSS, play around with it a bit. Would say I'm an intermediate coder, and use Dreamweaver a bit and can hand-code some elemenrs if needed. Two Muse questions:

 

1) I'm about to build a pretty massive pop-culture history site -- though, targeted at a certain niche audience -- that will have probably 100 to 200 total pages. There'll be a lot of fun design elements to the site (and a ton of pages to design) and that's why I'm strongly considering Muse to build it with...so I can just design, design, design, and not get too hung up with coding. That being said, will there be absolutely no way to go to a "code view" in Muse, if I need to achieve some functionality that Muse doesn't have (yet)? Or would I need to bring the Muse generated html into Dreamweaver to manipulate the code, and then someow bring the code back into Muse?

 

2) Which brings me to my next question, of a design element I'm looking to achieve on this new site: a Double Body Background. Meaning, the're a certain background image at the top of each page, and then right below it will start a repeating background. A great (and better) explanation of this, and how it can be achieved with coding is at:

 

http://jorenrapini.com/blog/css/double-body-background-css-trick

 

Would love for this functionality to already be built into Muse, would be very helpful!

 

Thanks, best,

 

Digger

1214 Views   9 Replies   Latest reply: DiggerK, Jul 11, 2012 11:56 AM
 
Replies
  • symbolized_bar_code
    Currently Being Moderated
    1. symbolized_bar_code,
    May 1, 2012 2:40 PM   in reply to DiggerK
    Report

    Unfortunatley, there is no way to get a code view in Muse. I know quite a few people requested it in the previous forum, but not really sure where that ended up. Also, you may not want to bring the html into DW unless you only have 1 or 2 small changes 2 make. Two reasons. First, it isnt backwards compatible, so if you are planning on updating that site in Muse, you will need to make those changes in DW everytime you update. Second, by all accounts the HTML that Muse puts out is not pretty or easy to work with. Unlike you, I am code averse, but there was a lenghty discussion on the previous forum on this topic. I know they were striving to make it better with every release, just not sure where it is at this point.

     

    Dont think I am reading that second question right, but there was a ton of info on that old site. You may want to take a look there, people posted a ton of great unique solutions, so it worth a look.

     

    Here is the link to the old forums- http://support.muse.adobe.com/muse

     
    |
    Mark as:
  • Zak Williamson
    Currently Being Moderated
    2. Zak Williamson,
    May 1, 2012 10:18 PM   in reply to DiggerK
    Report

    For #1 it would be easier to answer if you provided some examples of the types of things you may feel you need to resort to hand coding to achieve. As symbolized_bar_code explained editing Muse generated code is really not a viable workflow. However, many things can be achieved by embedding snippets of HTML within Muse via the Insert HTML feature and the ability to add code to the head section (which is not in Beta 7, but will be in the official release due out in about a week).

     

    #2 is easily achived in Muse using the combination of a browser background image set to be aligned to top center and vertically tiled, and a 100% width rectangle (created by simply drawing a rectangle that snaps to the left and right edges of the browser area in Muse Design view) on your master page(s) and then set the Fill background image of the rectangle (also set aligned to top center).

     
    |
    Mark as:
  • DiggerK
    Currently Being Moderated
    3. DiggerK,
    May 2, 2012 6:39 AM   in reply to Zak Williamson
    Report

    Thanks for the replies! Once I actually download Muse, we'll see if all the solutions (or pseudo-workarounds) are there...at least for my needs. From what I've read for example, installing my analytics tracking code should easy.

     

    Zak, re: #2, sounds like your solution is to have the repeating background actually start from the very top of the page, and then "stacked" on top of it in the master page would be the main background, aliged top. Rather than the repeating background starting just below where the main background stops (make sense?) That seems okay, and hopefully will neglibly effect load time...wow, there must be a lot of z-index craziness built into Muse!

     

    Thanks again,

     

    D

     
    |
    Mark as:
  • DiggerK
    Currently Being Moderated
    4. DiggerK,
    Jun 22, 2012 1:59 PM   in reply to DiggerK
    Report

    Hi - Just to follow-up on this, Zak, can you confirm the technique you specified (your answer to #2), can achieve the background we see on:

     

    http://geek-news.mtv.com/

     

    Where the top-aligned background is that big image (non repeat), then a repeating texture is going on below it.

     

    I just want to avoid the top-aligned background being mistaken by Muse as part of the main page content, and forcing the browser width to be extended, thusly forcing horizontal scrolling!

     

    Thanks again for your advisement,

     

    D

     
    |
    Mark as:
  • Zak Williamson (Adobe)
    Currently Being Moderated
    5. Zak Williamson (Adobe),
    Jun 22, 2012 2:38 PM   in reply to DiggerK
    Report

    Yes, that can be achieve with #2, the combination of a background browser image and a 100% width rectangle with a background image in it.

     

    100% width objects don't contribute to the page content width, so they won't cause horizontal scrolling.

     
    |
    Mark as:
  • DiggerK
    Currently Being Moderated
    6. DiggerK,
    Jun 22, 2012 6:03 PM   in reply to Zak Williamson (Adobe)
    Report

    Thanks again!

     

    One more detail -- apologies I forgot to mention in my previous post -- will the jpeg background I put in the 100% width rectangle scale up and down with browser resizing, or will it stay the same size? For what I'm currenlty building, I do NOT want it to scale, as I'm very carefully aligning it with what is going on with the repeating background below it. Want the size of it to stay static, in this case.

     

    Best,

     

    D

     
    |
    Mark as:
  • Zak Williamson (Adobe)
    Currently Being Moderated
    7. Zak Williamson (Adobe),
    Jun 22, 2012 6:09 PM   in reply to DiggerK
    Report

    Choose "Original Size" for the behavior you want.

     

    Screen shot 2012-06-22 at 6.08.10 PM.png

     
    |
    Mark as:
  • DiggerK
    Currently Being Moderated
    8. DiggerK,
    Jun 23, 2012 8:41 AM   in reply to Zak Williamson (Adobe)
    Report

    Thanks again, then just a follow-up:

     

    The width of the Muse "stage" (for lack of a better term) looks to be about 1175 pixels wide; at least that's what it is on the site I'm currently working on. If the background image I'm putting into the 100% width rectangle exceeds that -- say it's 1500 pixels, set to be kept at original size -- the image won't be truncated when viewed actually on widescreen monitors that can accomodate it, correct? It'd only be cut-off on either side in Muse (or when a browser window is sized under the 1500, which is fine).

     

    Thanks yet again!

     

    D

     
    |
    Mark as:
  • DiggerK
    Currently Being Moderated
    9. DiggerK,
    Jul 11, 2012 11:56 AM   in reply to DiggerK
    Report

    Hi - Just following-up on my most recent from 6/23, thanks in advance if you can provide an asnwer:

     

    The width of the Muse "stage" (for lack of a better term) looks to be about 1175 pixels wide; at least that's what it is on the site I'm currently working on. If the background image I'm putting into the 100% width rectangle exceeds that -- say it's 1500 pixels, set to be kept at original size -- the image won't be truncated when viewed actually on widescreen monitors that can accomodate it, correct? It'd only be cut-off on either side in Muse (or when a browser window is sized under the 1500, which is fine).

     

    Please advise, thanks again!

     

    D

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points