Hi I need to code 3 images that are the with of the webpage, and are responsive to the device the user using. I would also like to know how to make a header png image in the top left corner of the webpage, that sticks near the top and scrolls with the page. What would be the easiest way to do that? thanks in advance!
What have you tried? The forums are to help, not to provide you with the code you require. I hope you can understand that from my point of view, if you provide code samples, i would be more then happy to help
1 Like
You could use the media query’s (mdn page on @media) to detect device width, and use different sizes for the images. the header image is easy, you simple use position: fixed.
Hey Jake,
Like @stetim94 says, you can use position: fixed and @media queries to do what you want. There is another option for the images, though. You could use relative units:
img {
width: 50%; /* half the width of it's parent element */
width: 50vw; /* half the width of the page */
}
1 Like
Thanks! That worked!