Header Background Image Container Size Scale

Question

Hello,

I want to use a background Image in my header. and it should scale depending on the size of the browser window.
I got that working BUT it scales within the container. Meaning the container does not scale.
So i need the container scale along with the image.
If i use padding: 0px the image won´t even be seen.
If i use padding: 130px There is a big white area when the window is small and no white area vene a loss of the image of what is being seen when the browser windows is big.
Therefor the imgage is not recognized as existing.
Am refering to the very first code of the HTML Fundamentals Course for "MyBlog"
The code is even public on my profile.

Anyone an idea?

Thanks a lot for helping

Helmut-Leonardo

Answer 1

Hello,
I'm not sure you're thinking of this, but try to replace your #header:

#header {
background-image: url(http://helmut-stremmel.de/Header.jpg);
background-color: #cccccc;
height: 225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

See more: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_hero

Or you can change image size with Media Queries, but it is more complicated.

See more: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

OK, I see. And what do you think about this?
https://code.sololearn.com/WquxNfV94Hgv/?ref=app

Answer 3

Hi there,
you're welcome. Yes, I do. I speak a little german too. But neither my English nor my German is perfect. :-)

The point is how it appears in the browser, not in the SL playground. ;-) Somehow the display in the playground is not good. (The result what we see is not the same. I mean the different if you use the browser or the playground.)

I think your code is good without the property height="100%".

I don't understand what ratio do you think is good. If the width and height are the same, the image itself - because it is originally a rectangle - will be disproportionate. Do you need a square? I don't think so. This is why I think, that width="100%" and height="100%" - use at the same time - is not a good idea.

If you only set the width and the height is automatic, then the ratio will not change with the resize of the browser. Is that right? I don't need to scroll if I resize the browser and I always see the whole picture. It seems to me perfect in my browser.

You wrote "AND the container should always be the exact same size as the image". I see, but this is why the padding of 130px is a bad idea - no matter how big is the picture, the padding after that stays 130px and you see an empty white area in a smaller size of the window. Why do you need, why should be there a container?

So I'm not sure I understand the problem yet, but I'm really curious about it. ;-)

Answer 4

You wrote earlier "Could it be that an image doesn´t really exist for a container? Only Text?"
The reason is that you used it as a background image not a simple image (<img> tag). Those are two different things. If you want to see the background (the backgound image itself), you need to have some content in front of it (or above of it) - no matter whether it is a picture (like an avatar) or a text. But as a header image you shouldn't use it as background image if there is nothing in front of it (or above of it).

"width="auto" doesn´t work." - It doesn't work by itself. This is not a surprise. "auto" means automatic. If the height is fixed, the width can be automatic. These two are related, e.g. height="100px" or height="100%" AND width="auto".

I'm from Budapest, Hungary. My mother tongue is Hungarian. :-)

Keep on coding. Viel Glück! ;-)

Answer 5

You're welcome. :-)

Answer 6

That ¡s not really it.

I would like to see the complete Image, no matter what size the Browser Window has AND i don´t want to have get "white bottom".
The Code i just uploaded here on "My Codes".
Name is "Pizzeria Code".
It´s that image. I made black borders to see the "container".
I use a padding of 130px in .section so in my browser full open it looks perfect but when i size my browser down, the image sizes down, which is perfect, BUT the container doesn´t. I have a big white bar bottom, probably because of the padding but i don´t know what to do right now, because i don´t want that white bottom respectivly the distance to the next container.

I just tried your solution but it sqeezes the image, which i already had as well.
And i thought maybe it´s good to know for you that the image am using is actually a lot wider than height. (The problem with the header from my Blog code is the same yet not so obvious, i guess).

I tried three hours in a row today and couldn´t find an answer. Maybe i don´t have enough knowledge. I was thinking about floating or stuff. But yeah. Here i am.

Thanks for having a look at it.

I will have a further look at your links tomorrow, maybe that´ll help ;-)

Answer 7

Doesn´t work either.

I had that before. The height stays exactly the same. and the width. It´s scrollable.
I like it to be completly seen no matter which dimensions the display / window size of the browser has.
AND the container should always be the exact same size as the image.

If i have no padding in ".section" the image is not even shown.
Could it be that an image doesn´t really exist for a container? Only Text?
I use a padding of 130px because in my browser fully open it looks perfect.
If i shrink the window, i still see the complete image BUT because of the padding of 130px i get this big white border bottom to the next container.

Thanks for all your understanding and going through this with me ;-)

Besides, do you speak german?

Answer 8

What i did rigght now.
I just had a look at HTML Fundamentals again and image and i came up with this.

https://code.sololearn.com/Wzlf31nycF8F

and it works perfect in Safari/Chrome/Firefox/Opera.

It just looks totally weired in the preview of the playground ;-)

BUT that´s the way i want it ;-)

And for the moment it is HTML with a tiny bit CSS (just for pre-wrap) ;-)
I don´t know why i don´t get it working that way with CSS, YET ;-)

I fuddled a bit more, i put the black borders around so you can better see what i meant:

https://code.sololearn.com/W04J98Ufx8Op

Do you see what i mean?

Answer 9

height="100%" or height="auto" works fine.
width="100%" works fine.
width="auto" doesn´t work.

I came up with the padding because i used originally the coding from the Sololearn-HTML-Fundamentals "MyBlog" in which the header is classified as Header in the CSS-Sheet.

Even now when i try to move the image and it´s properties on to the CSS side, it won´t work anymore.

The CSS was the reason why i had those containers. I thought it is supposed to be.
However as it is working right now and because i don´t need a pic or something within the image like an "Avatar" in a circle, i just keep it like that.

Next thing am working on is keep it fixed on top and let the rest of the page scroll underneath it ;-)
I will try and error and if i don´t get it, i might ask here again ;-)

Where are you actually local? What´s your mother tongue?

Answer 10

Aaaahhhhhh.
Now i see ;-)

Thanks a lot ;-)