CSS <Img> Relative Positioning VS. Background-Image + Background-Position

CSS img relative positioning vs. background-image + background-position

The CSS clip property comes to mind but I don't think it's possible to achieve a centered square with it without knowing the image's dimensions. The cleanest way would probably be finding out the thumbnail's dimensions on server side, and then apply a clip with absolute pixel values on it so it becomes square.

Assuming getting the image sizes isn't an option (I gather you wouldn't be asking if it were), one workaround idea comes to mind. I can't build a test case right now, but something in this direction might work:

Inside the square li, place a div with a fixed width that will never be reached by your image (e.g. 1000 pixels) and give it a position: relative; left: -{x}px, x being ("the fixed width of the div element" / 2) - "width of the square li element"
Give the div text-align: center (You might also need align="center" to cater for IE6)
Place the img inside the div
It should be positioned centered.

not pretty, but not overly horrible, either.

Image position equivalent to background position

I would do something like this to position the image centered.

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 300px;
  overflow: hidden;
}

.img-container img {
  max-height: 100%;
  max-width: 100%;
}

Positioning image relative to the background

Add this 2 lines to the style:

header img{
     position: relative;
     height: 100px;
     top:50%;
     margin-top:-50px;
 }

This should help.

Position body background image relative to child div

You can fix your approach by using overflow-x:hidden; on the overflowed element or
try position absolute with display inline

CSS Position Relative to background-img for inner div

If you want to scale the image with viewport without distorting it you can use aspect-ratio property:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: rgb(78, 3, 78);
  overflow: hidden;
}

#outer {
  position: relative;
  background-color: rgb(78, 3, 78);
  background-image: url(https://i.stack.imgur.com/QhkFU.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: auto;
  width: calc(min(100vw, 120vmin - 10px));
  /* aspect ratio calculates the height */
  aspect-ratio: 1.2/1;
}

#inner {
  position: absolute;
  top: 21%;
  left: 22%;
  width: 42%;
  height: 40%;
  background-color: black;
  font: 2vmin monospace;
  color: limegreen;
}

<div id="outer">
  <div id="inner">
    <br>
  <p> Testing Terminal</p> > <span>ping www.google.com -t </span></div>
</div>

Relative position of picture as background in flex box

It seems to work fine when you set position: relative to .container and position: absolute to .container img.

body{ background-color: black; color: white; font-size: 30px; text-align: center; justify-content: center;}.container{ border-color: white; border-style: solid; border-width: 2px;    display: flex; width: 300px; min-height: 300px; justify-content: center; flex-direction: column;   position: relative;}.box{ opacity: 0.2; border-color: white; border-style: solid; border-width: 2px; flex: 1;}.box1{background-color: yellow;}.box2{background-color: green;}.box3{background-color: blue;}.box4{background-color: red;}.box5{background-color: orange;}
.container img{  position: absolute;  width: 100%;  opacity: 0.3;}

<body><div class="container"> <img src="http://www.tapeciarnia.pl/tapety/normalne/191848_swiecace_kule_grafika_3d.jpg" alt="Sample Image">  <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3">Box 3</div> <div class="box box4">Box 4</div> <div class="box box5">Box 5</div></div> </body>

CSS background-image - What is the correct usage?

The path can either be full or relative (of course if the image is from another domain it must be full).

You don't need to use quotes in the URI; the syntax can either be:

background-image: url(image.jpg);

background-image: url("image.jpg");

However, from W3:

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.

So in instances such as these it is either necessary to use quotes or double quotes, or escape the characters.

Background image position (from bottom and right)

change background position

background-position: right 50px bottom 60px;

CSS <Img> Relative Positioning VS. Background-Image + Background-Position