Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Image behind text in containerImage behind text in container
Previous
 
Next
New Post
6/25/2009 6:54 AM
 

I've just been handed a design for a website by a client that requires an image to be positioned in the bottom right corner of the container with the text/content of that container then displaying over it. I'm not even sure if this is possible.

Can some one show me the css I would need ot use to have an image position at the bottom right corner of a containing div? I figure z-index:0 will keep it behind the text but it's the positioning that's got me beat.

TIA

MartyNZ

 
New Post
6/25/2009 11:08 AM
 

Hey Martyn,

I think what you'll want to do is set the background for the content area of the container to your image. As far as positioning in the lower-right, I *think* you can pull that off with the position attribute.

.MyContainerContentClass {
    background-image: url(background.jpg);
    position: relative;  /* not sure about this part, untested and probably wrong but should be along the right direction*/
    top: 10px;
    right: 10px;
}

Wells Doty Jr
Online Content Development
 
New Post
6/25/2009 3:48 PM
 

Your code is positioning the image in relation to the top left corner of the module. I need to place it at the bottom right corner, without ever knowing where that corner is, and knowing that it will be different sizes on different pages.

 
New Post
6/26/2009 11:59 AM
 

This is very basic css.  You just use "background: #ffffff url('background.jpg') no-repeat scroll right bottom;" and that will place the image in the lower right corner of the containing div.  You also need to assign a class to the div, and assign the background setting to that class in the skin.css or container.css.  But, are you sure you should be the designer on this project?  Not intending to be rude, but this is really, really basic beginner level css stuff here.  You are likely to have a lot of problems putting together a dnn skin without basic css knowledge that is required to convert a design to a dnn skin.  You may want to sub-contract a more experienced designer for this particular project, especially when working on the menu which can be tricky with the css class settings.


JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke  

Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Image behind text in containerImage behind text in container


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out