Issues with maintaining consistent scale for background images and responsive design have been plaguing me.
In my setup, there is a simple header image background that is supposed to seamlessly blend into the content image background. Both backgrounds feature fine-grain textures, necessitating them to stay at the same scale consistently.
The header background resides within an <img> tag while the content background requires the use of background-image to leverage the repeat-y functionality due to uncertain content length...
However, a clear distinction in grain texture can be observed between the scaled inline image and the background:
I am familiar with the background-size attribute, but concerns about its compatibility limitations and responsiveness persist.
CSS Snippet:
#header{
max-width:700px;
width:100%;
margin:0 auto;
}
#header img{
max-width:700px;
width:100%;
}
#content{
max-width:700px;
width:100%;
height:600px; // <-- for testing with no content
margin:0 auto;
background-image:url('../imgs/bg-main.jpg');
background-repeat:repeat-y;
}
Relevant HTML Code:
<section id="header">
<img src="lib/imgs/bg-top.jpg"/>
</section>
<section id="content">
<!-- content goes here !-->
</section>
I would greatly appreciate any assistance in finding a solution or exploring alternative options.