I have a feature on my site where a user can upload a background

Question

0

Asked: May 26, 20262026-05-26T12:07:05+00:00 2026-05-26T12:07:05+00:00

I have a feature on my site where a user can upload a background

0

I have a feature on my site where a user can upload a background image for their specific “channel.” The problem that I’m having is that some users upload pictures at resolutions of 3000+px x 2000+px while others upload at 1280 x 720, and so on.

What is the best way to go about this situation? Should I keep letting them upload huge resolutions like that? Or restrict the upload to a certain pixel amount? How would I go about doing this?

Here is where the user can upload a background image:

<?
$images = glob(base_root().'uploads/channels/'. $Channels->id .'/background/{*.jpg,*.Jpg,*.JPG,*.jpeg,*.Jpeg,*.JPEG,*.gif,*.Gif,*.GIF,*.png,*.Png,*.PNG}', GLOB_BRACE);
if(is_array($images) AND count($images) >= 1) {
     $imagePaths = pathinfo($images[0]);
$channelBackgroundSrc = base_url() .'uploads/channels/'. $Channels->id .'/background/'.    $imagePaths['basename'] .'?rand='.  mt_rand(0, 9999);
?>

Here is the code that is on the top of each user’s “channel” where it gets the background image for that specific channel.

$(document).ready(function() {
    <?
    $images = glob(base_root().'uploads/channels/'. $channel['id'] .'/background/{*.jpg,*.Jpg,*.JPG,*.jpeg,*.Jpeg,*.JPEG,*.gif,*.Gif,*.GIF,*.png,*.Png,*.PNG}', GLOB_BRACE);
    if(is_array($images) AND count($images) >= 1) {
        $imagePaths = pathinfo($images[0]);
        $channelBackgroundSrc = base_url() .'uploads/channels/'. $channel['id'] .'/background/'. $imagePaths['basename'] .'?rand='.  mt_rand(0, 9999);
    ?>
        document.getElementById('userBackground');
        $("#userBackground").css("background", "url('<?=$channelBackgroundSrc?>') repeat-x scroll 0px 0px transparent");
        $("#userBackground").css("background-attachment", "fixed");
    <?
    }
    ?>

});