How to set background image to take up entire page?

PowerShell Universal Universal Dashboard
1 
Product: PowerShell Universal
Version: 2.0.2

Hey everyone,

I’ve created a multipage dashboard, and a home page for it. The home page has some text centered on the page, and an organizational chart below it; also centered on the page. I’m using New-UDStyle to load a background image, but can’t seem to get it to fit the entire page. It surrounds everything in the -Content script block, but not the entire page. Anyone know how to accomplish setting the background image to fit the entire page?


New-UDStyle -Style '
    background-image: url("/Assets/circuit-board-background.jpg");
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
' -Content {

filter Get-DirectReportsRecurse
        {
        # We first pass in the DNs of the $parent.DirectReports in a foreach loop.  We will look these up, then pipe back into the filter.  Results are returned to the $resutls array
        if ($_ -like "CN=*")
            {
            $_
            Get-ADUser $_ -Properties DisplayName,DistinguishedName,DirectReports,Manager,Enabled,Title | Select-Object DisplayName,DistinguishedName,DirectReports,@{n='Manager';e={($_.Manager -split ",")[0] -replace "CN=",""}},Enabled,Title | Get-DirectReportsRecurse
            }# if ($_ -like "CN=*")

        # If the user piped into the filter has DirectReports, will dive into each of them, then pipe back into the filter.  Results are returned to the $resutls array
        elseif ($_.DirectReports)
            {
            $_
            foreach ($_ in $_.DirectReports)
                {
                Get-ADUser $_ -Properties DisplayName,DistinguishedName,DirectReports,Manager,Enabled,Title | Select-Object DisplayName,DistinguishedName,DirectReports,@{n='Manager';e={($_.Manager -split ",")[0] -replace "CN=",""}},Enabled,Title | Get-DirectReportsRecurse
                }
            }# elseif ($_.DirectReports)

        # Handle users piped into the filter that are not one of the original DNs, nor do they have DirectReports.  Results are returned to the $resutls array
        else {$_}
        }# filter Get-DirectReportsRecurse 

$results = @()
$parent = Get-ADUser <manager's samAccountName> -Properties DisplayName,DistinguishedName,DirectReports,Manager,Enabled,Title | Select-Object DisplayName,DistinguishedName,DirectReports,@{n='Manager';e={($_.Manager -split ",")[0] -replace "CN=",""}},Enabled,Title
$results += $parent

# Loop through all the direct reports, from the $parent user's list of direct reports
foreach ($dirReport in $parent.DirectReports)
    {$results += $dirReport | Get-DirectReportsRecurse}

# Get rid of disabled accounts, so they don't show up and take up lots of realestate on the screen
$users = $results | Where-Object {$_.Enabled -eq "True"}

# Create empty array, which will be our 3 level array
$multiArray = @()

# MAKE SURE YOU GIVE THE ARRAY A HEADING THE THIRD HEADING IS A TOOLTIP
$multiArray += , @('DisplayName', 'Manager', 'Title' )

# Add each $user to the array
foreach ($u in $users)
        {$multiArray += , @($u.DisplayName, $u.Manager, $u.Title)}

# Write Html title for the homepage
New-UDHtml -Markup "<p style=`"font-family:Cursive; text-align:center; font-size:80px`">IT Homepage&nbsp&nbsp&nbsp&nbsp</p>"

# Display the Organization Chart
New-UDRow -Columns {
        New-UDColumn -LargeSize 1 -MediumSize 1 -SmallSize 1 -Content {}
        New-UDColumn -LargeSize 1 -MediumSize 1 -SmallSize 1 -Content {New-UDOrgChart -Id "ORGCHART" -data @($multiArray)}
    }# New-UDRow
}# New-UDStyle

Thanks,
Rob

2

If you create a CSS file and set the main element to your background image, you should be able to replace the background.

main {
    background-image: url("/images/image.png") !important;
    background-repeat: no-repeat  !important;
}
1 Like
3

Thank you much, my good sir! I totally missed the Style documentation page when I was looking … LOL. Worked great, except it applies it to all pages. Not a bad thing, but would be nice if New-UDPage could have a -Stylesheets parameter in the future so different pages could have different styles, or the home page could have an applied style and no style applied on other pages.

Thanks again and have a good one!
Rob