How to center a picture in html frame?

Hello everybody,

I recently (yesterday) started learning html since I want to create my own webpage.

Well, all I did so far is re-writing an already existing test website. Also I got ~100 commands for html with an explanation what it does from my teacher. Since I'm rather familiar with coding languages, I was able to understand how frames work based on the code of other websites.

So I tried it out a little bit and stumbled upon a problem when using pictures inside frames.

The design in general is to be like the docs. A header on top, a menu on the left side and the big body on the right side.

For the header I want to use a picture. My problem: The picture is rather big and I want the website to crop it while centering it vertically in order for it to behave like the header of the docs of median when increasing/reducing the size with alt+ mousewheel.

My code looks like that:

home:

► Show Spoiler

Header:

► Show Spoiler

What I already tried:
- align /valign with <img>
-<center>
-css as seen above and the 2 other possiblites to enter css (also different ways with css like center or align)
-div in multiple ways
-block in css
-all the above with the picture being inserted as a background
-about 5 other possibilites I found across the internet that I can't quite remember.

But the problem remains: I only see the top of the image and not the center in the frame.

tl/dr: pls help me to vertically align an oversized picture in a frame as a header.

btw: Stonewolf gave me a hint on how it should work:

oh, then if you just give a background-image to your frame's main div, then manually set your frame's height, then it will only display as much as it can

But i don't quite get how that is meant. (Don't worry, I'll PM him in a min so he can help me as well

)

Thanks everybody for helping me understand a bit more of html!

if HTML5 is supported you should prolly use style att with the "text-align:center" value in a block level string, like <p> </p> tags for instance. try this:

► Show Spoiler

Even simpler, you can implement the centerImage thingie to a <img> tag without having any block level strings. Such as this example (height and width are the example as well ofc):

► Show Spoiler

Prime_Evil wrote:if HTML5 is supported you should prolly use style att with the "text-align:center" value in a block level string, like <p> </p> tags for instance. try this:

► Show Spoiler
<p style="text-align:center;"><img src="your_picture.jpg"></p>

Even simpler, you can implement the centerImage thingie to a <img> tag without having any block level strings. Such as this example (height and width are the example as well ofc):

► Show Spoiler
<img src="your_picture.jpg" class="centerImage" alt="whatever the image is showing" height="120" width="350">

The first one does nothing as it only centers the text, not the picture itself.

The second one stretches the picture, making it impossible for the user to see what it shows.

If I were you I would ask a dota forum not some programmer/webdesigner forum.

Nitz wrote:If I were you I would ask a dota forum not some programmer/webdesigner forum.

fyi I only created this thread because someone in the chat gave me a hint on how it is possible to solve my problem. Else I wouldn't have opened it here and asked somewhere else. But since I wanted to show him my code, I had to make a thread here.

Alright sorry for the kind of late reply, after playing with your code a bit I think I got what you're looking for:

Header (I removed the parts I didn't need, this is just an example but you can of course add your code back to it):

► Show Spoiler

Main HTML file was not changed, so I'm not posting it again. You should have a look at the background-position-y property to center your image the way you want.

StoneWolf wrote:Alright sorry for the kind of late reply, after playing with your code a bit I think I got what you're looking for:

Header (I removed the parts I didn't need, this is just an example but you can of course add your code back to it):
► Show Spoiler
<!DOCTYPE html>
<html style="height:100%">
<head>
</head>
<body style="margin: 0;height: 100%;">
<div style="height: 100%;background-image: url(images/header.jpg);background-position-y: center;background-size: cover;">
</div>
</body>
</html>

Main HTML file was not changed, so I'm not posting it again. You should have a look at the background-position-y property to center your image the way you want.

Thx man! It works perfectly fine! Awesome!

Thanks a lot!

And don't worry about the late reply. I'm just happy you got the solution because I've searched way too long for the proper code. Again thank you very much!

Edit: You'll get a cookie tomorrow (used mine today already)