CSS Image Background - Same Scale Across Different Devices

I'm trying to create a website with possible multiple fluid background sections that are consistent in scale between mobile, tablet and desktop (including different resolutions). The background is to stay in the centre to cover the whole area and appears in the same scale across all device types.

Things I tried are: background-position: cover Does stretch but scales with the monitor width resulting in the image moving.

And created a background wrapper with a inner part with a fixed width of say around 1920 pixels across. The height will be fixed.

The one that works best at this time is the background inside a wrapper with a specified width.

https://jsfiddle.net/dy6ab36y/

HTML:

<div class="background-wrapper"> <div class="background-inner"></div> </div>

CSS:

.background-wrapper { left: 0px; top: 0px; width: 100%; height: 250px; display: block; overflow: hidden; } .background-inner { width: 1920px; left: 50%; margin-left: -960px; position: absolute; height: 250px; display: block; background-position: 50% 50%; background-size: cover; }

Is there more efficient way of working around this?

-------------Problems Reply------------

Background-size cover is only useful if you want to stretch your background-image. If you are going to put it in a fixed-size container anyway, there no point to doing what you are doing anyhow. The best solution might simple be to define a background-size in a non-relative unit, like px.

So the solution is to fix the width in a manner like this:

.background-wrapper {
left: 0px;
top: 0px;
width: 100%;
height: 250px;
display: block;
overflow: hidden;
background-color:#ccc;
background-image: url(https://psuk.s3.amazonaws.com/asset/p4/image/c3c59e5f8b3e9753913f4d435b53c308/Shaun/3040ce690fce2054c2011cf6d2f8b537.jpg);
background-position: 50% 50%;
/* By defining this, your image _will_ be cut off when the screen is
* wider than 1920px, but since you don't want to stretch this would
* happen anyway. */
background-size: 1920px auto;
}

<div class="background-wrapper">
</div>

HTML:

<div class="background-inner">
</div>

CSS:

.background-inner {
height: 250px;
width:100%;
display: table;
background-position: 50%;
background-image: url(https://psuk.s3.amazonaws.com/asset/p4/image/c3c59e5f8b3e9753913f4d435b53c308/Shaun/3040ce690fce2054c2011cf6d2f8b537.jpg);
background-repeat: no-repeat;
}

https://jsfiddle.net/dy6ab36y/8/

Do you want a fixed image height or some percentage of the total window height? Do you want to stretch the background image or not?

if not you could use

background-size: auto 100%;

Category:html Views:4 Time:2019-02-10
Tags: html css css3

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.163 (s). 11 q(s)