I've been working hard to make sure that both my company logo image and the background image resize accordingly based on the screen size. However, I'm facing an issue where if the background image resizes correctly, the logo image remains unchanged in size. On the other hand, if I manage to get both images to resize, the logo ends up being too large and covers the entire width of the screen. Then, when I try to reduce the width of the logo image, the background image shrinks to less than the screen's width.
Check out the landing page where I'm encountering these problems:
I want the header image and logo to create the desired effect while being responsive to different screen sizes, similar to what you can see in this image: Hopeful Header and Logo Appearance
If anyone could help me with this issue, I would greatly appreciate it. I've spent hours trying to figure it out to no avail. Let me know if you need any additional information.
Below is all the code related to the Header section...
/*---------[HEADER]---------*/
#header-holder {
width:100%;
height:auto;
float:left;
color:#fff;
background-image:url(https://lh3.googleusercontent.com/-dYSRZJJhqiM/VibgbmiBMeI/AAAAAAAADIU/OfLCyLyozy4/s1440-Ic42/DD%252520Landis%252520Large.png);background-repeat:no-repeat;background-size: contain;}
#logo-container img {
width: 100%;
height: auto;
background-size: contain;
}
.Page_title{
font-family:'Droid Sans';font-weight:bold;font-size:27px;text-shadow:0px 2px 0px #000;width:800px;text-align:center;padding:10px;margin:17px auto 30px auto;}
.Page_content{
font-family:'Droid Sans';font-size:13px;width:560px;text-align:center;margin:0 auto;padding:0 0 56px 0;line-height:22px;color:#ffbda4;text-shadow:0px 1px 0px #000}