How to get the path to work so it shows the background image through css?
If it could be done with a relative path then how?
right now with this code, the background image is not being displayed.
Thanks for any help.
/*mobile view*/
.index-banner {
background: url('static/mysite/images/home.svg') no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 380px;
}
{% block content %}
<section class="index-banner">
<h2>Test<br>Condiitons</h2>
<h1>lorel ipsum</h1>
<h1>sdfjls upueh ndsfoi bbownl</h1>
<img src="{% static 'mysite/images/home.svg' %}" class="mysite-img" style="display: none;">
</section>
{% endblock %}
figured out the way,
so if you have your settings.py set to STATIC_URL = '/static/'
then background: url('/static/movies/images/home.svg') no-repeat;
should work,
what I was missing was a pre'/' before the static
Related
I have implemented a css only back to top button, but on shorter pages it shows when it is not needed.
.top {
position: sticky;
bottom: 9px;
padding: 9px;
place-self: end;
margin-top: 109vh;
font-weight:700;
border-radius: 9px;
color: var(--a1);
background: var(--c2);
}
.top:hover {
color: var(--c2);
background: var(--a1);
text-decoration: none;
}
You can see it in the bottom left corner here: https://abridge.netlify.app/overview-abridge/ (don't need to see it when the page is this short)
It works fine so long as its a longer page: https://abridge.netlify.app/overview-code-blocks/
I have thought of artificially increasing the size of short pages, but that just seems kinda hacky, also I know I can easily resolve this with javascript, but I am trying to find a solution that does not rely on javascript. I tried playing around with media queries but could not find any that actually query how much content is in a viewport.
If you are familiar with zola, the repo is here: https://github.com/Jieiku/abridge
If you have zola installed you can clone the repository and run zola serve from the directory, to test changes locally.
Here is the file with the back to top: https://github.com/Jieiku/abridge/blob/master/sass/include/_top.scss
EDIT: for the moment I have discovered a creative way of resolving this, because its a SSG and zola has readtime value I did this:
{%- block gotop %}
{%- if page.reading_time %}
{%- if page.reading_time > 1 %}
⋏
{%- endif %}
{%- endif %}
{%- endblock gotop %}
The only thing to resolve now is to somehow get it over on the right side of the page instead of the left side.
This is the solution I used:
.topout {
position: sticky;
bottom: 1px;
padding: 20px;
place-self: end;
margin-top: 110vh;
pointer-events: none;
}
.topleft {
margin-left: calc(100% - 80px);
}
.top {
pointer-events: all;
padding: 9px;
border-radius: 9px;
font-weight:700;
color: #FF9900;
background: #222222;
}
.top:hover {
text-decoration: none;
color: #222222;
background: #FF9900;
}
Then in Zola Template page:
{%- block gotop %}
{%- if page.reading_time %}
{%- if page.reading_time > 1 %}
<span class="topout">
<span class="topleft"> </span>⋏
</span>
{%- endif %}
{%- endif %}
{%- endblock gotop %}
You can see it here: https://abridge.netlify.app/overview-code-blocks/
I would have liked to avoid using calc() however this does work without issue in: Firefox, Chrome, Android Chrome
I think the cleanest solution would be to utilize #media screen and (max-height: 110vh)
Here is my suggestion:
#media screen and (max-height: 110vh){
.top{
display:none;
}
}
The idea here is that if the page's viewport is currently within that max-height of 110vh then we want to set .top to no longer display on the page.
I encountered a problem while I tried to add an image to my blog. I was trying to put my image as a background and it did not work. How do I solve this.I also want it to cover the entirety of my blog's body.
{% extends 'base.html' %}
{% block content %}
<style>
body {
background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg" alt="A blog" class="main-img');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
<h1>Posts</h1>
<ul>
{% for post in object_list %}
<li>{{post.title}} - {{post.author.first_name}} {{post.author.last_name}} -
{{ post.post_date }} <small>
{% if user.is_authenticated %}
- (Edit)
(Delete)
{% endif %}
</small><br/>
{{post.body|slice:":200" }}</li>
{% endfor %}
</ul>
{% endblock %}
In your background image url you mistakenly pasted the img tag url alongside the class and alt attribute just replace
background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg" alt="A blog" class="main-img');
with this
background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg');
You can use these styles
body {
background-image: url('https://media.vanguardcommunications.net/bloge1505840253663.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
width: 100%;
}
I´m trying to add a kind of animation to some images in my Django app, what I want to do is that when the user moves the mouse around the image it gets bigger.
I tried adding some code in my CSS but the image won't change
Thank you for your help.
My index.html
{%block contenido %}
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 1 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 2 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 3 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
{% endblock %}
The Images SRCs are urls that I take from the internet, I guess it does not really matter whether they are taken from the internet or stored in your proyect.
my CSS
#container{
width: 290px;
overflow: hidden;
margin: 5px 4px 0 auto;
padding: 0;
background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
border: 3px solid #8E1600;
float: left;
}
I added this new lines to my CSS but the image won't change.
.foto_pelicula > img:hover {
transform: scale(1.1);
}
Maybe I'm not using the proper lines in the CSS as I'm a junior programmer.
Help is much appreciated
This question has no connection to Django. In future try to create working html template for your purposes and then add it to django template.
You setup .foto_pelicula > img:hover to transform image. But > selector finds only direct child. See documentation on selectors.
And in your code direct child is a, but not img. Therefore you don't see result. You can change your css rule to .foto_pelicula > a > img:hover
See demo:
#container{
width: 290px;
overflow: hidden;
margin: 5px 4px 0 auto;
padding: 0;
background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
border: 3px solid #8E1600;
float: left;
}
.foto_pelicula > a > img:hover {
transform: scale(1.1);
}
<div id="container" class="foto_pelicula">
<img src="https://via.placeholder.com/289" width="289" height="289"/>
</div>
IMPORTANT
In your html code I see several divs with id="container". You can setup only one id with certain name to each page. That's why it called identifier.
So change your ids to classes or give different id names for this divs.
I have an overlay containing a django form and the background image doesn't show up. I have a silhouette image in the background and that fills the page, and ideally moves with the page size. Then a table on top in the centre of it containing my form which I have tried to make transparent.
I was blindly fiddling with the css yesterday and it has disappeared!
{% extends 'prodman/basenew.html' %}
{% load staticfiles %}
{% block pagetitle %}Time and Expenses{% endblock %}
{% block content %}
<iframe name="hiddenFrame" class="hide"></iframe>
<div id="overlay">
<form id= "person-form" target='hiddenFrame' method = 'POST' action="" class="overlay-form" enctype="multipart/form-data">{% csrf_token %}
<table id="add-person-form" class="overlay-table">
<tr></br></br>{{ personform.first_name }}</tr>
<tr></br></br>{{ personform.surname }}</tr>
<tr></br></br>{{ personform.email }}</tr>
<tr></br></br>{{ personform.position }}</tr>
<tr></br></br>{{ personform.contract_type }}</tr>
<tr></br></br>{{ personform.mentor }}</tr>
<tr></br></br><font color="white">Assign as a coach? </font>{{ personform.make_person_coach }}</tr>
</table>
</br>
<input type = "submit" id = "save" value = "Add person">
</br>
</br>
<strong>Click here to [<a href='#' onclick='overlay()'>close</a>]</strong>
</form>
</div>
<a href='#' class='class1' onclick='overlay()'>Add person</a>
<p>Some more html here....</p>
{% endblock %}
In my basenew.html I have
{% load staticfiles %}
<head>
<link rel='stylesheet' href="{% static 'tande/newtimesheets.css' %}" type='text/css' media='all'/>
</head>
...
Here is my stylesheet
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-image:url('{% static 'tande/images/silhouette.png' %}');
background-repeat: no-repeat;
background-size: 90%;
background-position: center;
}
#overlay div {
width:800px;
margin: 100px auto;
background: #cccccc;
border: 1px solid #000;
padding:15px;
text-align:center;
}
form.overlay-form {
width:800px;
margin: 350px auto;
}
table.overlay-table tr td {
background: rgb(54, 25, 25);
background: rgba(54, 25, 25, 0);
border-style: none;
margin-right: 40%;
margin-bottom: 30%;
position: relative;
text-align: center;
width: 800px;
}
add-person {
text-align: right;
margin-right: 10px;
width: 10px;
}
body {
height:100%;
margin:0;
padding:0;
}
Just in case it's helpful here is how the overlay is triggered:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
Thanks!
So, for the past hour I've being trying to move this image using the css property position. My problem is every time I move it using top or bottom it doesn't work correctly. Here's a screenshot of it before using said properties and after. Below you can find my html & css. Lastly, this position has to be absolute or the image completely disappears.
HTML
<section class="row posts">
<div class="col-md-6 col-md-offset-3">
<header><h3>What others have to say...</h3></header>
#foreach($posts as $post)
<article class="post" data-postid="{{ $post->id }}">
<p>{{ $post->body }}</p>
<div class="info">
Posted by {{ $post->user->user_name }} on {{ $post->created_at }}
</div>
<div class="interaction">
|
Dislike
#if(Auth::user() == $post->user)
|
Edit |
Delete
#endif
</div>
</article>
#endforeach
</div>
</section>
CSS
.heart{
background: url('http://localhost:8079/uncaughterror/public/src/img/web_heart_animation.png');
background-position: left;
background-repeat: no-repeat;
height: 50px; width: 50px;
cursor: pointer;
position: absolute;
left: 12px;
bottom: 5px; //This or 'top' is what causes my entire problem
background-size:1450px;
}
.heart:hover {
background-position: right;
}
How about adding this :
.interaction {
position: relative;
}
I think you should put the no-repeat at the same line as the background
It just work for me,i don't know why
https://jsfiddle.net/moongod101/2wh6b9rq/