CODEWITHSUNDEEP
htmlcssdjangodjango-templates
user2086641
user2086641

Reputation: 4371

How to apply background image for an templates in django

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

Upvotes: 5

Views: 60489

Answers (6)

Nawodya Jayalath
Nawodya Jayalath

Reputation: 51

This works for me. if we use inline styles with background-image:url we have to make path manually.

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

Upvotes: 1

Rucha Murugkar
Rucha Murugkar

Reputation: 21

.bgded{
      background-image: url( "{% static 'images/ur.jpg' %}");
  }

Remember to load static page by adding

{% load static %}

at the top of your html page.

Upvotes: 0

Mahmoud Emad
Mahmoud Emad

Reputation: 71

in CSS you will do:

#.bg-image {
      
      background-size: 100%;
  
      background-position: center center;
  
      background-repeat: no-repeat; 
}

Upvotes: 0

Ferney Bermeo Ruiz
Ferney Bermeo Ruiz

Reputation: 331

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.

Upvotes: 17

Pandian
Pandian

Reputation: 9136

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">

Upvotes: 4

Hedde van der Heide
Hedde van der Heide

Reputation: 22469

'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;">

Upvotes: 6

Related Questions