Php 动态设置背景图像_Php_Html_Css

Php 动态设置背景图像

php html css

Php 动态设置背景图像,php,html,css,Php,Html,Css,我需要将背景图像应用于动态设置的div。因此，编辑器将特定页面上的图像上传到特定属性，然后我捕获该图像并显示它们因此我会这样做： <div class="foo" style="background:url(<?php echo $attribute; ?>) no-repeat top right; background-size: 140px;"> 你的方法是正确的，但我会改变一些在css中，我会这样做： .foo { background-repeat

我需要将背景图像应用于动态设置的div。因此，编辑器将特定页面上的图像上传到特定属性，然后我捕获该图像并显示它们

因此我会这样做：

<div class="foo" style="background:url(<?php echo $attribute; ?>) no-repeat top right; background-size: 140px;">

你的方法是正确的，但我会改变一些

在

css

中，我会这样做：

.foo {
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 140px;
}

在

HTML

中，我只保留url

<div class="foo" style="background:url(<?php echo $attribute; ?>);">

您可以在php端定义css，使其看起来像：
<?php
    $backgroundCss = '<style>#uniqueback{
            background:url('.$attribute.') no-repeat top right; background-size: 140px;
            };</style>';
?>

<html>
    <head>
        <?php echo $backgroundCss;?>

    </head>
        <body>
            <div id="uniqueback" class="foo" ></div>
        </body>
</html>


对于所有用户，您都可以指向background.jpg，但可以将该请求重定向到后端（PHP？）函数（对于apache，您可以使用.htaccess重定向）。在这个函数中，你可以检查图像的位置，如果用户上传了一个图像，这个图像就会存在，然后以JPEG格式返回这个二进制字符串。然后您可以在外部CSS中实际链接到background.jpg。
如果您根本不想使用样式html属性，您可以创建许多带有背景图像属性描述的CSS类
html生成将如下所示：
<div class="foo my-background my-background-<?= $attribute ?>">

您可以使用以下html和php代码：
HTML:
班纳尔先生{
宽度：100%；
身高：361px；
背景：无重复中心；
}
PHP:
Javascript是一个选项吗？对于这个特定的项目和任务，js并不真正合适；但也许确实是一个一般性的提示？如果你可以使用js，你可以添加一个语句来设置背景图像。以jQuery为例：var-imageUrl=$（'myObject'）.css（'background-image'，imageUrl）这应该能让代码更干净。事实上，你可以做得更好，我会改进答案的。我的想法和我用mediaqueries写的那些行完全一样。
<div class="foo my-background my-background-<?= $attribute ?>">

you can use this  html & php code:

HTML:
<style type="text/css">
.bannar {    
    width: 100%;
    height: 361px;
    background: no-repeat center;   
}
</style>

PHP:

<div class="bannar" 
style="background-image: url('<?php echo $this->webroot . 'companyImages/bannar' . '/' . $company_page[0]['companypages']['bannar']; ?>')">
</div>