Forums

Home / Developer Network / Forums / Sitefinity Older Versions (3.x): Designing with Sitefinity > Background images in Generic Control

• olav Intermediate

  Posted on Jan 4, 2010 (permalink)

  Hi all,
  
  I will be using a number of different background images in a project and would like to see if anyone has come up with a more convenient way..
  
  I would rather not have a solution with a large number of masterpages, which otherwise would just be complicating things. Further, I have consequently avoided any absolute and web server root references, and would like to keep it that way.
  
  I understand there's no way to make CSS constructs work with the runat=server parameter, so styling with something like
  

  background-image: url('~/img/a.jpg')

  is useless. Right?
  
  Instead I try to insert:

  <img width="400" height="300" sfref="~/img/2623_900x600.jpg" src="/Pub/img/a.jpg" runat="server" id="bkgImg1" style="top: 0pt; left: 0pt; width: 900px; height: 600px; z-index: -1;" alt="Product background" />

  
  Actually, I inserted with src="~/img/a.jpg" but that was altered by Sitefinity, so I guess I'll have a problem when going to production with a different app folder. (can be handled if I change our ways of dealing with app folders)
  
  It looks like I would have to deal with absolute positioning for any text and similar that I want to display on top of the image, which in turn would be relative to the page (as opposed to the image), meaning that I could not use site templates that center the content on the page. (ok, I'll have a look at the CSS reference in the meantime)
  
  I used to deal with these situations in regular ASP.NET projects, using CSS backgrounds and relative image urls. (which I understand is harder to do with Sitefinity pages)
  
  Better ideas? Am I missing something basic here?
  Thanks!
  

  Reply

• Georgi Georgi

  Posted on Jan 4, 2010 (permalink)

  Hi Olav,

  The Generic Content text is html. The Editor though which you input the text has several modes - text mode, in which you enter rich text (transformed to html on the fly) or html mode, in which you can use regular html. That said, it should be a problem to create your content  html mode. You can use CSS in that mode as well. 

  Please check the screenshot attached. 

  Best wishes,
  Georgi
  the Telerik team

  
  Instantly find answers to your questions on the new Telerik Support Portal.
  Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

  Attached files

  • html.png

  Reply

• olav Intermediate

  Posted on Jan 5, 2010 (permalink)

  Thanks Georgi,
  Ok, I'm familiar with the Generic Control and probably also it's limitations, just wanted to see if somebody knew a trick for a situation like this, something very simple that I had missed.
  
  I guess I'll restructure the use of templates and choose that that direction some time later. Before I start, is it correct that I cannot use inherited master pages in Sitefinity templates? (ref thread Nested Master Pages Madness)
  I guess I'll have to make copies all the way, and manually keep track of all changes in case of basic changes later on.
  
  By the way, I did find a tweak that was almost perfect for single instances not following my page template pattern:
  1. Add a Sitefinity Image Control to the page.
  2. Add a Generic Control just below.
  3. User CSS relative positioning for html elements like paragraphs and divs, then set top to a negative value to offset elements on top of the image.
  This is ok in cases when you can accept an empty rectangle below the image. (I guess there's no way to stop the Generic Control from expanding vertically when actually adding elements with height..)
  
  -olav
  

  Reply

• olav Intermediate

  Posted on Jan 6, 2010 (permalink)

  Had a few spare moments and figured out my approach using master pages for pages with various background images. (ok, Sitefinity definitely make use of nested master pages, I missed your KB article at first)
  
  In case it would help somebody in need of block-area backgrounds:
  
  I had to override the root master's placeholder

  <asp:ContentPlaceHolder ID="Content" runat="server" />

  by adding a formatting div and a new content placeholder to the corresponding child masterpage:
  

  <asp:Content ID="cntContent" ContentPlaceHolderID="Content" runat="Server">

  <div class="content-bg">

  <asp:ContentPlaceHolder ID="ContentInner" runat="server" />

  </div>

  </asp:Content>

  
  I added a style
  

  div.content-bg

  {

  width: 740px;

  height: 555px;

  background: url(../../img/a.JPG) no-repeat;

  }

  
  For testing I created a page based on the template from the child masterpage, adding a Generic Content control to the container ContentInner, having this html:
  

  <p style="border: 1px solid black; padding: 10px 13px; position: relative; top: 30px; left: 100px; width: 100px; height: 20px; background-color: #ffffff; opacity: 0.6; font-weight: bold; color: #000000;">Text is here..</p>

  
  Ok, so I found a way to deal with background images using templates and nested master pages. That is, provided there's not too many pages to be set with individual images. I mean, even cloning templates is some job for me, as I usually have a number of controls added, and I would have to add them for every new template. (since I'm not sure if it would be convenient to keep all controls in the master page)
  
  But here's the trick I should have thought of from the beginning. (struck me finally!)
  - Put all styles for using individual background images in a CSS file in the theme folder. That's not messy at all in my opinion. And there's no problems using relative image file references as my images folder and theme folder are the same all time. Then use some html in a Generic Content control:
  

  <div class="background-prod1">

  <p style="border: 1px solid black; padding: 10px 13px; position: relative; top: 30px; left: 100px; width: 100px; height: 20px; background-color: #ffffff; opacity: 0.6; font-weight: bold; color: #000000;">Text is here..</p>

  </div>

  
  Once more I can move the page around in the hierarchy without worrying about broken references.
  
  I guess I'll use the latter most of the time, and the nested master page approach in cases with some re-use.
  Hope this could be useful to someone.
  
  -olav
  

  Reply

• AirWeb

  Posted on Jul 5, 2011 (permalink)

  Ran into the same problems trying to figure out to insert a background image into a Generic Control.  After researching and a bit of trial and error, I came up with this approach.  The good thing about it, is that this now allows -- the user -- to input an image into a generic control and then set it so that it is a background image.
  
  Adding a class style for the background image to our .css file...
  
  In our .css file, our Controls are in a div tag called "Main" with the control itself is called "Body":  Although you may find the redundancy of the styling not necessary, we decided to keep it.
  
  

  #Main .backgroundImage {

      position:absolute;

      vertical-align:top !important;

      filter:alpha(opacity=20); //sets the translucency of the image

      width: 82% !important;  //if we go higher on our site, the image spills out of the page

  }

    

  #Main p {

      z-index:100;  //keeps the text on top

  }

    

  #Body .backgroundImage {

      position:absolute;

      vertical-align:top !important;

      filter:alpha(opacity=20); //sets the translucency of the image

      width: 82% !important;  //if we go higher on our site, the image spills out of the page

  }

    

  #Body p {

      z-index:1;  //keeps the image in the background and allows the text to float on top

  }

  
  
  With the Generic Content opened for editing, 
      --> I inserted an image using the icon in the upper tool bar (insert an image)...
      --> I Right Clicked the image for properties and "deleted" the height/width dimensions (setting the dimensions to zero hides the image)
      --> I set the image's CSS Class properties to "backgroundImage" (add to the .css in the previous step)
              --> alternately, I edited the HTML generic control and inserted -- class="backgroundImage" --
  
  Upon clicking the preview, the image shows up as a background image with the text floating on top.
  
  Now the user can adjust their web page so that it fits around the various image contents as desired.
  
  Hope this helps others or at lest gives them something to think about.  ;o)
  

  Reply

Home / Developer Network / Forums / Sitefinity Older Versions (3.x): Designing with Sitefinity > Background images in Generic Control