Highlighted

(CSS) Can I make background-size 'contain' or 'cover' do this?

Contributor ,
Sep 24, 2018

Copy link to clipboard

Copied

I've been toying with full-size background images, alternating between background-size: cover and contain. After some testing, I'm wondering if the behavior I'm looking for is even doable. Thought I'd ask here.

The image is of a standing silhouette.

The behavior I'm looking for is :

  • PROPORTIONALLY:
    Must retain original proportions at all times.
  • VERTICALLY:
    Must stretch to fill 100% viewport height at all times.
  • HORIZONTALLY:
    - If width is larger than image, left-justify.
    - If width is narrower, right-justify.
    (In other words, crop left side out of the viewport so the right side of the image remains in view.)

What is the simplest and most code-efficient way to obtain this result?

Thanks!

Found it! Or close enough behavior that my original plans for the layout don't need to be trashed.

Here it is, in case anyone wants to try anything similar :

div#bg {

    background-image: url(/images/bg-main.png);

    height: 100%;

    width: 50%;

    background-size: cover;

    background-position: right;

    background-repeat: no-repeat;

}

(with the appropriate adjustments to html+body to remove margins and stuff)

Sorry for wasting everyone's time with this one. For whatever reason, I kept trying to trick my way around left-justifying the image when it should've been right-justified the whole time.

Views

148

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

(CSS) Can I make background-size 'contain' or 'cover' do this?

Contributor ,
Sep 24, 2018

Copy link to clipboard

Copied

I've been toying with full-size background images, alternating between background-size: cover and contain. After some testing, I'm wondering if the behavior I'm looking for is even doable. Thought I'd ask here.

The image is of a standing silhouette.

The behavior I'm looking for is :

  • PROPORTIONALLY:
    Must retain original proportions at all times.
  • VERTICALLY:
    Must stretch to fill 100% viewport height at all times.
  • HORIZONTALLY:
    - If width is larger than image, left-justify.
    - If width is narrower, right-justify.
    (In other words, crop left side out of the viewport so the right side of the image remains in view.)

What is the simplest and most code-efficient way to obtain this result?

Thanks!

Found it! Or close enough behavior that my original plans for the layout don't need to be trashed.

Here it is, in case anyone wants to try anything similar :

div#bg {

    background-image: url(/images/bg-main.png);

    height: 100%;

    width: 50%;

    background-size: cover;

    background-position: right;

    background-repeat: no-repeat;

}

(with the appropriate adjustments to html+body to remove margins and stuff)

Sorry for wasting everyone's time with this one. For whatever reason, I kept trying to trick my way around left-justifying the image when it should've been right-justified the whole time.

Views

149

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 24, 2018 0
Adobe Community Professional ,
Sep 24, 2018

Copy link to clipboard

Copied

Probably best done with two separate images and different media queries for when things begin to fall apart

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Mentor ,
Sep 24, 2018

Copy link to clipboard

Copied

Post the actual image and let's have a play with it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Contributor ,
Sep 24, 2018

Copy link to clipboard

Copied

Found it! Or close enough behavior that my original plans for the layout don't need to be trashed.

Here it is, in case anyone wants to try anything similar :

div#bg {

    background-image: url(/images/bg-main.png);

    height: 100%;

    width: 50%;

    background-size: cover;

    background-position: right;

    background-repeat: no-repeat;

}

(with the appropriate adjustments to html+body to remove margins and stuff)

Sorry for wasting everyone's time with this one. For whatever reason, I kept trying to trick my way around left-justifying the image when it should've been right-justified the whole time.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0