CODEWITHSUNDEEP
htmlcssdjango-templates
deadlock
deadlock

Reputation: 7310

How can one set a background image in a Django Template?

How can one set a background image in a Django Template? Let's say the url of my background image is at www.randomlink.com/static/backgroundimagesplash.jpg

I took a look at the Pinterest homepage. As many of you know, Pinterest was built using Django. I inspected a few of their elements on their home page.

One of the graphics they used was this splash image here: PinterestSplashImage.jpg

The splash image is set at the bottom center. One thing I noticed is that the splash image resizes relative to the resizing of the browser that it is viewed in.

This is my current home page template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<link href="www.randomlink.com/static/favicon.ico" rel="icon" type="image/x-icon">
<head>
<title>Homepage</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style>
body{
    font-family:Arial,Helvetica,sans-serif;
    font-size: 12px;
}
</style>
</head>
<body>
    {{ state }}
    <form action="/login/" method="post">
        {% if next %}
        <input type="hidden" name="next" value="{{ next }}" />
        {% endif %}
        username:
        <input type="text" name="username" value="{{ username}}" /><br />
        password:
        <input type="password" name="password" value="" /><br />

        <input type="submit" value="Log In" />
    </form>
</body>
</html>

How can one set the www.randomlink.com/static/backgroundimagesplash.jpg at the bottom centre and make it re sizable just like Pinterest did with their home page? (For the sake of argument, the splash image will be the same dimensions as the Pinterest splash image)

Upvotes: 4

Views: 11643

Answers (3)

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: 6

Abbasov Alexander
Abbasov Alexander

Reputation: 1938

It question not relate to Django. It pure html with CSS.

To scale image while resize window you should use the property background-size: contain of the CSS3.

To place to the bottom and to center you can use the properties position: absolute; background-position: 50% 100%; of CSS.

Finally example:

<style type="text/css">
.splash {
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('https://s-passets-ec.pinimg.com/webapp/app/desktop/images/logged_out_splash.77aa6339.jpg?1373235165');
    background-size: contain;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    bottom: 0;
    height: 100%;
    margin: auto;
    max-height: 461px;
    max-width: 1034px;
    position: absolute;
    width: 100%;
}
</style>

<div class="splash"></div>

see demo on the jsfiddle

Upvotes: 0

Pinto
Pinto

Reputation: 11

Try this to set backgroung image in your template: 

 <div class="inner" style="background-image: url({% static "frontend/img/parallax-image.jpg" %}");>

Upvotes: 0

Related Questions