Hi Chloe, welcome to the Umbraco forum.

Take a look at the Dynamic Body Tag macro, you can apply CSS rules (for background-images) accordingly.

http://our.umbraco.org/projects/dynamic-body-tag

There are many other ways of doing what you want, but this is a good starting point.

Let us know how you get on.

Cheers, Lee.

i have done this on a few project... basically, use a media picker on the node.. for background image... and in your template, insert a macro that renders the div according... or you could use some inline xslt too... :)

on this site... http://test.mtturl.com i use some jquery to scale the backgound image...

here is my xslt macro...

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- start writing XSLT -->
<xsl:if test="$currentPage/data[@alias='bgIMG'] != ''">
  <xsl:variable name="imageNode" select="$currentPage/data[@alias='bgIMG']"/>
  
  <xsl:variable name="imageData" select="umbraco.library:GetMedia($imageNode,'false')/data[@alias='umbracoFile']"/>
  <img src="{$imageData}" />
</xsl:if>
</xsl:template>

and my template has this div and macro...

<div id="supersize">  
        <umbraco:Macro Alias="RenderBGimg" runat="server"></umbraco:Macro>
    </div>

and using this jquery to do the supersizing :)

/* <![CDATA[ */
(function($){
  //center things
  $.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

  //Resize image on ready or resize
  $.fn.supersize = function() {  
    //Invoke the resizenow() function on document ready
    $(document).ready(function() {
      $('#supersize').resizenow();
    });
    //Invoke the resizenow() function on browser resize
    $(window).bind("resize", function() {
        $('#supersize').resizenow();
        $("#container").center();
    });
  };
  //Adjust image size
  $.fn.resizenow = function() {
    //Define starting width and height values for the original image
    var startwidth = 1440;  
    var startheight = 956;
    //Define image ratio
    var ratio = startheight/startwidth;
    //Gather browser dimensions
    var browserwidth = $(window).width();
    var browserheight = $(window).height();
    //Resize image to proper ratio
    if ((browserheight/browserwidth) > ratio) {
        $(this).height(browserheight);
        $(this).width(browserheight / ratio);
        $(this).children().height(browserheight);
        $(this).children().width(browserheight / ratio);
    } else {
        $(this).width(browserwidth);
        $(this).height(browserwidth * ratio);
        $(this).children().width(browserwidth);
        $(this).children().height(browserwidth * ratio);
    }
    //Make sure the image stays center in the window
    $(this).children().css('left', (browserwidth - $(this).width())/2);
    $(this).children().css('top', (browserheight - $(this).height())/2);
  };
})(jQuery);


  
$(document).ready(function(){
  $("div#supersize").supersize();
  
});
/* ]]> */

is working on a reply...