Skip to main content
D
default8e6qmlaguykt
Participant
October 19, 2021
Question

How make an image fit the whole page

  • October 19, 2021
  • 2 replies
  • 455 views

Hi!

 

I'm trying to do a site similar to umusic.com but I have an issue. I don't know which size my image should be to fit the whole page and without losing quality of the picture. 

 

Do you know how big it should be? In pixels...

A start page like this... how big is the picture of Nirvana?

 

This topic has been closed for replies.

2 replies

O
osgood_
Legend
October 19, 2021

They are background images using the 'background-size: cover' property

 

background-size: cover;

 

https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover 

 

 

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 19, 2021

    Universal Music Group uses background images that are 1920px w x 1080px h.

     

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 19, 2021

    How long is a piece of string -- who knows?  It all depends on the size of the device it's being viewed on.

     

    CSS:

    img {width: 100%}

     

    HTML:

    <img alt="Nirvana" src="your_image_file.jpg">

     

    Suffice it to say that a small image will look very distorted & blurry on an extra large display.  So you must decide what size devices you're targeting and size the image appropriately.

     

    Read more about responsive images with the <picture> tag below.

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

     

     

     

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices