10/20/2017 card styling: height 100% on .

card : Anki

MY SUBREDDITS POPULAR - ALL - RANDOM - USERS | ASKREDDIT - FUNNY - WORLDNEWS MORE

- PICS
-T

A comments Want to join? Log in or sign up in seconds. | English

card styling: height 100% on .card search

1
(self.Anki)
submitted 3 days ago by troy_civ this post was submitted on 17 Oct
2017
I'm trying to put a background to
1 point (100% upvoted)
my card. This is my css:
shortlink: https://redd.it/76w
.card {
background-attachment: fixed; username password

background: url("_Blur-3.jpg"
remember me reset password
background-size: 100% 100%;
login
background-repeat: no-repeat;
color: black;
Submit a new link
font-family: Noto Sans CJK JP
font-size: 50px; Submit a new text post
height: 100%; Anki
text-align: center;
subscribe 4,213 readers
}
107 users here now

Unfortunately, the background does Welcome to /r/anki!

not cover all the available space This community is for people who
use the Anki "friendly, intelligent
I think this because the .card flashcard" program. Anki is
container isn't big enough. I've set it available for these platforms:
to height:100% but without Windows, Mac, Linux, FreeBSD,
iPhone, and Android. There is also a
success. Any idea? web-based version of Anki.
note: I do not want to remove the You are welcome to ask your
background-size since it causes questions about Anki here, and
please help answer other people's
the background to only show an questions when you can. If you find
excerpt of the image (because of a good resource for Anki users,
higher resolution) please share it with us.

6 comments share report Anki Tips & Info

all 6 comments New to Anki? Our Anki wiki has
sorted by: best some resources you'll want to see.

[] vanlinh136 1 point 3 days ago

When creating cards, consider the
tips in this article: Twenty rules of
Try this: background-size: cover formulating knowledge.
permalink embed report
Please support Anki
[] troy_civ [S] 1 point 3 days ago
Anki is free. But if you use it,
I tried cover and contain, consider supporting Anki by one of
unfortunately didn't make any the ways listed here. That will help
difference. the developer to continue
improving the software.
permalink embed parent report

[] vanlinh136 1 point 3 days ago /r/anki participation

Read this post and give it a try: guidelines
https://www.reddit.com/r/Anki/commen Keep your posts on-topic.
https://www.reddit.com/r/Anki/comments/76w4bd/card_styling_height_100_on_card/ 1/4
10/20/2017 card styling: height 100% on .card : Anki

ts/42ajmg/how_to_get_a_fixed_backgro Be polite and kind.

und_on_anki_20/ Posts that are off-topic will be
removed. Rude or snarky
permalink embed report comments will be removed.
[] troy_civ [S] 1 point 3 days ago*
message the moderators
unfortunately it made it worse MODERATORS
I also don't see the advantage of glasspenguin
using the :after pseudo element Gear5th
Jae_t
edit: the :after element is only Glutanimate
important for the transparency effect about moderation team
permalink embed parent report
< > discussions in r/Anki X
[] vanlinh136 1 point 2 days ago*
2 3 comments
Try this one: Basic plus cloze. Is it possible?
html, body {width: 100%; height:
100%; margin: 0px; padding:
0px; }
Here is my full solution:
Create one field named
Background and add your
image background to this field
(of one card).
At the end of Front and Back,
add this:
<div id="fieldImg"
style="display:none;">
{{Background}}</div> <div
id="imgBg"></div> <script>var
d=document;d.getElementById('i
mgBg').style.backgroundImage=
'url("'+d.getElementById('fieldImg'
).getElementsByTagName('img')
[0].src+'")'; </script>
At Styling section, add this:
#imgBg { background-repeat:
no-repeat; position: fixed;
top: 0px; bottom: 0px; left:
0px; right: 0px; z-index:-9;
background-position: center
center; background-size:
cover; opacity: 0.8}
html, body, #imgBg { width:
100%; height: 100%; margin:
0px; padding: 0px; }

https://www.reddit.com/r/Anki/comments/76w4bd/card_styling_height_100_on_card/ 2/4
10/20/2017 card styling: height 100% on .card : Anki

If you would like to add image

background to a large number
of cards, you should use Batch
Note Editing add-on
(https://ankiweb.net/shared/in
fo/291119185). Firstly, in the
Background field of the card
which have image background
already, press Ctrl + Shift + X
to open HTML editor (you will
see something like this: <img
src="image-name.jpg">),
press Ctrl + A to select all,
press Ctrl + C to copy. Then
close HTML editor, in the
Browser window, select all
cards you would like to add
background to and then press
Ctrl + Alt + B to open Batch
Edit window, press Ctrl + V to
paste content you have copied
before; remember to select
Background for In this field
menu and then click Replace.
permalink embed parent report

[] troy_civ [S] 1 point 2 days ago

I appreciate your help, thank you. What you are describing is
somehow overkill for my needs since I only want to one fixed
background for all cards. I have no need to use a dedicated
field for background images.
Also, a question: I always thought there is no body element
used in Anki. Am I mistaken?
However, I solved part of the issue for now. This code does
what I want on desktop Anki:
.card {
height: 100%;
margin: 0px;
padding: 50px;
background: url("_Blur-3.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
color: black;
font-family: Noto Sans CJK JP Regular;
font-size: 50px;

https://www.reddit.com/r/Anki/comments/76w4bd/card_styling_height_100_on_card/ 3/4
10/20/2017 card styling: height 100% on .card : Anki

text-align: center;
}

I don't know why I couldn't make it work in the first place. It

seems to me the order of the commands are crucial.
It still doesnt work for Ankidroid though. This will be the next
task
permalink embed parent report

about help apps & tools <3

blog site rules Reddit for reddit gold
about FAQ iPhone redditgifts
source code wiki Reddit for
advertise reddiquette Android
careers mod mobile
guidelines website
contact us buttons

Use of this site constitutes acceptance of our User Agreement and Privacy Policy. 2017 reddit
inc. All rights reserved.
REDDIT and the ALIEN Logo are registered trademarks of reddit inc.

https://www.reddit.com/r/Anki/comments/76w4bd/card_styling_height_100_on_card/ 4/4