I created a website and i’ve launched it. this is the website :https://isow.pythonanywhere.com/. One problem that I face is that I want the header image to scale down on mobile phones. Right now, it remains the same and thus doesn’t look right on mobile. Also, any improvements or feedback are welcome. Thank you!
Maybe just give it a min-width (like 100px or whatnot).
I Belive you need to add a 100% backg size to your code… If I understood your question corretly it should be like this:
header{
background: url("/static/home/bg5.jpg") center no-repeat;
background-position: top;
background-size: 100%;
}
Besides that you might need to add a media querry or something else to make space for the menu. Another idea would be to give your menu more transparency so image top side is displayed behind it.
when I add background-size: 100% to the code, a gap will emerge between the about section and the image. That is the image no longer fills the whole space. I also did not understand what you meant by adding a transparency to the menu. Do you mean the navbar?
I see your problem there…
I think you will need some @media queries to deal with that too.
There is a whole section on them within the css courses on freeCodeCamp.
You can check here for a quick intro, but I think you already know something about it. https://www.w3schools.com/css/css3_mediaqueries_ex.asp
I suggested that 100% size cause your website is breaking on large monitors as well…
Take a look the image below:
But as you mentioned my solution will cause the problem between section on small screens. Although your site already have that space on my monitor at least… Look at this other image:
About the menu, I said that cause your image is starting on the top of the screen. And the nav is hiding a little bit of it, so Adding transparency to it may help. (if the background image is smaller).
So, to sum up, if I were you, I would remove that background image from the header and put it inside a CSS file combining it with some use of @media queries for responsiveness.
Another not so good workaround would be playing with the background size I’ve mentioned… but with the 2 axis… X and Y
Like this:
background-size: 140% 100%;
But this will stretch your image. It is better used in texture background images.
Before I forget, you can try to use cover too:
background-size: cover;
Thank you for replying: The reason I’m loading the image in the html file instead of the css file is that i’m using django and it won’t recognize the static image in a css file. So i have to load it in a html file.
I tried enlarging the image using a website online but all it does is zoom into the image on the header. I am already using the background-size:cover. So I guess i have to just do a trial and error with the background sizes on small screens?
I see, don’t know much about django.
That was everything I had. hehehe
Maybe someone else can help you here. Let’s wait a bit. Wish you luck.
Apart from this little problem the site is neat and really well done. keep it up. 
1 Like