| 153 | Share |
The HTML <picture> element allows you to define different images for different browser window sizes.
Resize the browser window to see how the image below changes depending on the width:
Resize the browser width and the image will change at 600px and 1500px.
| Live Demo & Try it yourself! | Read More » » |
Responsive images are images that scale nicely to fit any browser size.
If the CSS width property is set to 100%, the image will be responsive and scale up and down:
When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.
<img src="/images/cat.jpg" style="width:100%;">
Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.
| Live Demo & Try it yourself! | Read More » » |
<img src="/images/cat.jpg">
Use the border-radius property to add rounded corners to an image. 50% will make the image circular:
img {
border-radius: 50%;
}
<img src="/images/cat.jpg" alt="cat" style="border-radius:50%;width:200px;">
| Live Demo & Try it yourself! | Read More » » |
The HTML <picture> element gives web developers more flexibility in specifying image resources.
The <picture> element contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.
Each <source> element has a media attribute that defines when the image is the most suitable.
Show different images for different screen sizes:
<picture>
<source media="(min-width: 650px)" srcset="/images/cat.jpg">
<source media="(min-width: 465px)" srcset="/images/computer_lab.jpg">
<img src="/images/computer_lab.jpg" style="width:auto;">
</picture>
| Live Demo & Try it yourself! | Read More » » |
If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%:
Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.
<style>
body {
background-image: url('cat.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
| Live Demo & Try it yourself! | Read More » » |
If you want the background image to cover the entire element, you can set the background-size property to cover.
Also, to make sure the entire element is always covered, set the background-attachment property to fixed:
This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):
<style>
body {
background-image: url('cat.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
| Live Demo & Try it yourself! | Read More » » |
To avoid the background image from repeating itself, set the background-repeat property to no-repeat.
<style>
body {
background-image: url('cat.jpg');
background-repeat: no-repeat;
}
</style>
| Live Demo & Try it yourself! | Read More » » |
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:
| Live Demo & Try it yourself! | Read More » » |
If you want the entire page to have a background image, you must specify the background image on the <body> element:
Add a background image for the entire page:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
| Live Demo & Try it yourself! | Read More » » |
