An older browser that doesn’t support vh units will ignore the vh unit and use the 600 pixel value. A modern browser will use the vh unit because it’s last in order. The 600 pixel value is being left for fallback reasons. Go ahead and add this additional height property and value after the original one - height: 90vh. So please take the time to find the right balance between image quality and image size for your projects.īack in your project, you can see how the images now cover the entire span of the div to the degree possible.
#CSS PARALLAX FULL SIZE#
On the flip side, if you use a high resolution image, it’s going to look great at full size but your user pays a performance penalty by being forced to download unnecessarily large images. If you take a small postage stamp image like this one and scale it up to full page, it’s going to look like garbage. If you’re using this technique, here’s some things to be careful of. The background-size property with the value of cover scales the image as large as possible without stretching the width or height. Next, add the background-size property and give it a value of cover. You’ll be revisiting that height in a second, but first, center the images in the bg style by typing: background-position: center center. Increase it to 600 pixels, and you’ll see the entire image, as well as an extra 50 pixels of space. Increase the height of the divs to 300 pixels to reveal more image. I wanted to show you that it’s not obvious that the heights of all background images are actually 550 pixels. Now, I set the div height to 200 pixels on purpose. And then last, notice that each ID points to a background image. The bg class has this background-repeat value set to no-repeat, which means the images only show up once. In the CSS, the div style has a thin black border to help you visualize the divs, and the height is set to 200 pixels. And there’s also a fourth div with the class of content. In your HTML, you’ll see three divs, each has the class of bg and an individual ID name - bg-1, bg-2, and bg-3. Here’s the project on CodePen you’ll be working with, and here’s the URL which you can also find linked within the Resources section for this video.
Your version will be using the CSS background-size: cover and background-attachment: fixed features, as well as a sprinkling of viewport height, or vh units. This effect is similar to the parallax effect that can be found on many places across the web, such as this one.
In today’s Take 5, you’re going to make a scrolling background image effect as seen here.
0 kommentar(er)
