Shop Mobile More Submit  Join Login
×




Details

Submitted on
December 20, 2008
Image Size
773 KB
Resolution
900×3000
Link
Thumb
Embed

Stats

Views
7,520
Favourites
210 (who?)
Comments
34
×
dA CSS - image height+width by kuschelirmel-stock dA CSS - image height+width by kuschelirmel-stock
I get asked a lot how big images need to be for dA journals - as the answer is complex, I wrote this little guide/tutorial/whatever in the hopes of answering the question in a concise way.

If you've got any questions, please FIRST take a look at my other tutorials --> Journal CSS templates & tutorials collection. While I am someone who likes to help (I wouldn't be spending my time creating tutorials if I weren't), I expect you to put some effort in and not just use me as a means to get around actually reading up on the subject. If I get that vibe from you, don't expect me to answer in a respectful fashion either.

:bulletred: No redistribution without my explicit written permission -- that includes translations!


:bulletblue: More CSS related stuff --> [link]


Thank yous:
A big thank you goes out to everyone who sent me screenshots so that I was able to compile the list within this guide - you guys rock my socks! :heart:
Namely: `shelldevil, =Prolific-Imp, ~Gabiton, *ginkgografix, `Elandria, ~vibrant-colors, =bluem00n & ~paperslayer
Add a Comment:
 
:iconblackheart6004:
Blackheart6004 Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
OMG! I was looking for this and finally found it!

This is a awesome tutorial because I had two images that were repeating beyond the journal even with the "background-repeat: no repeat" code and this tutorial absolutely fixed it.

Thank you so much.
Reply
:iconkuschelirmel-stock:
kuschelirmel-stock Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
glad to hear I could help :heart:
Reply
:iconblackheart6004:
Blackheart6004 Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
I have a question, can I use the same .journaltop background code for the journal's main background as well?
Reply
:iconkuschelirmel-stock:
kuschelirmel-stock Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
I'm not quite sure what you mean. the .journaltop div is only for the top, but if you mean what you put inside the {} then you can, question is if it'll look good. Please refer to this tutorial: [link] for more specific info on what each div does.
Reply
:iconblackheart6004:
Blackheart6004 Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
If you take a look at my CSS Journal test with all the white text, I'm trying to position the image to bottom of my header, but however, you can see it kind of repeats itself.

My main goal for the image background is to have stick under the header and have just the background color do the rest of the bottom of the journal.
Reply
:iconkuschelirmel-stock:
kuschelirmel-stock Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
you'll need the following code (exactly! if you leave something out it won't work!):
background: #ffffff url(...) no-repeat bottom center;
where #ffffff stands for the background colour's hex code and within the url() you put the direct link to the background image. bottom can also be top or center, it's the horizontal alignment of the background; while what I have as center can also be right or left, this is the vertical alignment. And then you have to make sure that in the code underneath this line, in other divs that could influence your original dic, there is no specification that will override your no-repeat attribute.


For example, if you have this as html:
<div class="one"><div class="two">text here</div></div>
and you specify background no-repeat in div "two", but underneath you specify it to repeat in div "one" it'll repeat. You need to always go from outside inwards and in the css code that means first specify the outer divs and then the inner ones underneath, or you'll end up with overridden attributes and chasing your tail...
Reply
:iconblackheart6004:
Blackheart6004 Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
That is exactly what I'm looking for!

Thanks!
Reply
:iconsharpbhoy:
Sharpbhoy Featured By Owner Sep 2, 2011  Hobbyist Writer
Wrong place, I know, but can I ask you how I could define an image to be as wide as the element in the Custom Box?
I want an image to be as wide as the box, on all monitors, and no matter what experimenting I do, nothing works.
I'm a complete novice as this, so I would love your help.
Thanks.
Reply
:iconkuschelirmel-stock:
kuschelirmel-stock Featured By Owner Sep 7, 2011  Hobbyist Digital Artist
there is no way to do that in html + css.
Reply
:iconsharpbhoy:
Sharpbhoy Featured By Owner Sep 8, 2011  Hobbyist Writer
Damn, that's a pity.
I thought it was possible since the Favourite Deviation box with the 'large' thumbnail option increases it to be as wide as the column.

Thanks anyway.
Reply
Add a Comment: