Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael Morris
675 PointsResponsive website
This whole responsive website is really confusing. I have 3 shades of solid red that I wanted layered to use as my website background. I was able to get it to work using the background-image tag with background-size. Problem is the background-size for my wiidth and height were not responsive when I made the browser smaller. I'll post a few snippits of code. The code below looks great on a full computer screen but as soon as I resize the image the watermark in the middle moves as well as all my other elements.
html{ background-image: url("Images/Top Banner.jpg"), url("Images/Middle Banner.jpg"), url("Images/Bottom Banner.png"); background-size: 2000px 150px, 2000px 200px, 2000px 1000px; background-repeat: no-repeat;
}
1 Answer
Steven Parker
229,732 PointsIt's a bit of a guess without seeing the actual images, but what about using screen units for the dimensions?
background-size: 100vw 15vh, 100vw 20vh, 100vw 100vh;
Would that fix it?
Steven Parker
229,732 PointsSteven Parker
229,732 PointsIt's hard to tell without the associated HTML and images. Could you create a workspace for this and then make a snapshot and provide the link? Or else maybe a codepen or jsfiddle?