Hi,
My graphic designers want to use a different background image on each page of a site (see attachments)
Other than the background image, the page layouts, menus etc are identical across all pages.
It seems like overkill to create a separate skin for each page.  I am thinking there must be a way of using CSS to achieve this.
i.e. all the pages use the same skin and I just have to assign different CSS files to each page.

No, I wouldn't do it with skins, but I'd make that part of the page content. Just as you have different content on each page, you will have different images.

You could target each unique Text / HTML module with CSS and specify a background image for those elements, for instance:

Each module has a unique ID assigned to it.

For instance, go to: http://www.dnncreative.com/tabid/75...fault.aspx

Using the web developers toolbar go to the Information menu / Display ID & Class Details

From here you can see the main Text / HTML module has a unique ID of #dnn_ctr380

There are various variations of this ID, you will be able to view:

#dnn_ctr380_contentpane .dnnC_content_transparent DNNAlignleft
#dnn_ctr380_ModuleContent
#dnn_ctr380_HtmlModule_lblContent .Normal

We can target the main content area of the Text / HTML module with:

#dnn_ctr380_contentpane
{
border: 10px solid orange;
}

For further info on the web Developers Toolbar view:http://www.dnncreative.com/Troubles...fault.aspx">Troubleshooting DotNetNuke Skins

I know this is an old thread but I recently ran into the same problem and found this when looking for an answer.

I eventually solved this issue by simply overriding my default image in Page Settings>Advanced Settings>Page Header Tags using a < style > block.

In an ideal world we'd assign a class name to the body tag so that this kind of thing can remain contained within the stylesheet but this is as good a workaround as is available.< / body >< /html >< / style >

Hi

I just want to add a different background image for every page of my dnn website. In page settings there is only option to upload icons. If i put the background image in the skin.css file then for every page i cannot afford to use a different skin(as new skin folders will take space) since my web hosting space is limited.

Can anyone tell me what code should i change to dispay a different backround image in every page of my website?
Please explain in detail ..

Awaiting your suggestion asap.

Thanks,
Alisha

Web Application Engineer,

John Mitchell's blog has a solution for this question.  Take a look here.  IMHO, it's a clever solution!

Thanks for the reply

With the refernce John Mitchell's blog, I changed little bit and its also wroking gr8.

There is something oddly satisfying about Googling for the answer to a design issue that I'm having and finding that I found the answer slightly over a year ago!

I am facing the same problem and this particular blog site which you have recomended is not available anymore.. can anyone please help me in this regard???

Here is one approach.

For the element that you want to hold the background image, add a CSS class like this:



Then in your CSS file, you can add classes for each page



Create one class for each page name.

Since the background images are part of the portal and not part of the skin, it would make sense to put those special classes in the portal.css file.

Thank you Mr. Joseph,

I have tried the same code but it is not displaying the image.
I am pasting here the full code:
this is he code I have used in my skinname.ascx file

div class="Page<%=PortalSettings.ActiveTab.TabID %>" >

The URL should be /Portals/)/... (Relative to the installation root. Without the /, it's looking elsewhere for the image)

This is a good place to recommend learning to use your favorite browser's developer tools. You can look at the actual CSS and HTML that is generated, and you can look at the actual URLs, so you can see much more easily what might be going wrong.

Hi ,

i am new into dotnetnuke ,I have build a website and i want to change the header background image dynamically , is there any way it will change from admin end .
I have done this with Css, but i want to do this with front end i mean admin panel ,

i want to select header background image for each page .

kindly guide me, this is really really important for me .