How to apply background image for an templates in django

html css django django-templates

44,864

Solution 1

Try like below... It will help you...

It no repeats the image background and it also Stretch the image to Table Cell..

CSS:

<style>
.tdStyle
{
background-image:url('{{ STATIC_URL }}images/sample.JPG');
background-repeat:no-repeat;
background-size:100%;
}
</style>

To Support Old Browsers you can add the below lines to CSS :

-moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100%; /* Opera 9.5 */
-webkit-background-size: 100%; /* Safari 3.0 */
-khtml-background-size: 100%; /* Konqueror 3.5.4 */
-moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */

HTML:

<td class="tdStyle">

Solution 2

Look how I did it: In the template I put the following line:

<body id="bg" style="background-image: url('{% static "images/33.jpg"%}')";>

And in the css:

#bg{
    background-size: 1800px 900px;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
}

As a result I obtained a fixed background and with the proportions of the screen.

Solution 3

'no-repeat' is not a valid html attribute. Why aren't you using the style attribute OR a proper css included file?

<td style="background: url('{{ STATIC_URL }}images/sample.JPG') no-repeat;">

44,864

Author by

user2086641

Updated on July 09, 2022

Comments

user2086641 almost 2 years
In my site, in a table of particular I have to insert a image as background. I did that but the image looks like double image as the image is smaller than cell width and height it is getting overlap.

In background image cell I used no-repeat to end the repeat display of same image, but it is not working. I am designing web page using html in django framework.

template is
```
<td background="{{ STATIC_URL }}images/sample.JPG" no-repeat;> 
```
May I know how to cancel the repeat display of same background image in a table cell.

Thanks