Hello i have tried every different combination of code i know and i just cant figure out why my code is wrong. My problem is simple. My headers image is fully responsive but when i resize the browsers width, the spacing between the headers image and the content below it gets larger and larger. I would like everything to stay in scale and not create the huge gap. I hope i’ve explained this clearly enough for you all!
Thanks in advance `
G
You can change the background size to cover but you need to consider putting that as an <img> tag. That will allow it to scale better.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Play with all those examples (cover, contain, etc) and pick your poison.
Or put it as a <img>.
Thanks for the CodePen.
Your code is borked, illogical. There are flaws in the HTML structure and CSS.
This file removes the causes that prevent the image box from scaling down… fixed heights, etc.
It does NOT fix the fact that the menu at the top of the page will not adapt below about 1192px; therefore, a horizontal scrollbar is triggered at that width. In other words, the page is still borked but in a different area.
See comments within the CSS and note the restructured HTML.
top-img-box=Giles_Hughes.html|attachment (16.9 KB)
As @RyanReese mentioned, putting the image in a foreground <img> tag would be easier to manage and the image would resize properly.
Many thanks for replying. Some of the illogical code was born out of me trying various declarations over a number of hours. I am relatively new to this so i appreciate all your help. I wanted to get the paragraph resizing first before tackling the menu bar. That was more just to show you an idea of the lay out i am trying to achieve. I will study the code and see what i can learn.
Your did a fine job of presenting the issue. We appreciate that. Thank you.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.