HOME | DD
kuschelirmel-stock — dA CSS - image height+width
Published: 2008-12-20 21:06:41 +0000 UTC; Views: 10250; Favourites: 203; Downloads: 0
Redirect to original
Description
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.
No redistribution without my explicit written permission -- that includes translations!
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!
Namely: `shelldevil , =Prolific-Imp , ~Gabiton , *ginkgografix , `Elandria , ~vibrant-colors , =bluem00n & ~paperslayer
Related content
Comments: 34
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.
👍: 0 ⏩: 1
glad to hear I could help
👍: 0 ⏩: 1
I have a question, can I use the same .journaltop background code for the journal's main background as well?
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
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:
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...
👍: 0 ⏩: 1
That is exactly what I'm looking for!
Thanks!
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 1
there is no way to do that in html + css.
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
it's probably a script that does that
👍: 0 ⏩: 1
Ah, I see.
It's a great pity that it isn't available.
Thanks anyway.
👍: 0 ⏩: 0
This is exactly the information I was looking for. Thank you
👍: 0 ⏩: 0
This is helpful. I always wondered what the widths were.
👍: 0 ⏩: 0
Wow! I came across your great tutorial for CSS and it helped me greatly!!
👍: 0 ⏩: 0
Aww, you're such a sweetheart for this. 
Great design and layout, and as always, fantastic content!
👍: 0 ⏩: 1
The padding vs width problem can be solved by simple maths. Let's say whole div with zeroed margins and paddings needs to be 100px high - and then you want padding-top to be 10px, simply subtract it from height.
So now height: 90px and padding-top: 10px.
Sum of all paddings plus new height must be equal to total normal height.
It works in IE6 and 7, Firefoxes and Opera. I don't really understand why, but it does
👍: 0 ⏩: 1
in IE it doesn't, that's the whole point here.
IE doesn't add the padding to the height or width, hence you need a workaround.
👍: 0 ⏩: 1
Strange, it always worked for me, both here on dA and for normal layouts. For some reason IE accepts both methods, but the second only if padding + height equals to exact amount of pixels needed. One less or more and it crashes.
👍: 0 ⏩: 1
Still, I dunno how it works. o.o But it works also for several people whom I suggested this method. o.o
👍: 0 ⏩: 0
