CODEWITHSUNDEEP
htmlcss
lf80
lf80

Reputation: 483

Organize images horizontally/vertically according screen size in center over background image

In <body> <section> I have background image:

<img src="img/background.png" class="back-img">

css:

.back-img {
  width: 100%;
  height: auto;
  overflow:hidden;
}

like this:

<section> 
    <div id="topLine">
        <img src="img/background.png" class="back-img">                                      
    </div> 
</section>

I'm trying to align different separate square images of same size horizontally in the center over background image in browser window with position: fixed; to keep it in the center of screen with scrolling and organize vertically on mobile screen:

   <img src="img/square1.png" class="image">
   <img src="img/square2.png" class="image">
   <img src="img/square3.png" class="image">

.css:

.image {
  position: fixed;
  width: 69px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

to archive something like this:

enter image description here

Background color implies background picture and white squares is a same size images.

I've tried this example:

<div class="row">
  <div class="column">
    <img src="img/square1.png">
  </div>
  <div class="column">
    <img src="img/square1.png">
  </div>
  <div class="column">
    <img src="img/square1.png">
  </div>
</div>

with:

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

which not organizes images as required in my case and should align pictures in one line, but with position: fixed; I have only one image on screen.

I'm trying to find some correct way to get result, maybe with using of <table>, <tr>, <td> to organize different images according screen size from horizontal to vertical group line automatically with browser window manual narrowing.

First of all, I have to repeat same image in horizontal line in center over background image in fixed position:

enter image description here

Any guide or example would be helpful

Upvotes: 2

Views: 937

Answers (2)

Lynden Noye
Lynden Noye

Reputation: 1011

CSS grid or flex would be ideal for this (assuming modern-ish browsers).

It's not clear to me why you require an img element for your background image, but I've had plenty of reasons in the past so this would need a little extra to use an img element .

Here is the most basic example of my interpretation of what you're looking for: https://codepen.io/Ilkai/pen/abNdZQK

Basically:

  1. Set up your section with a background-image, and also use it as your source of the container size (full screen with 100 vw/vh)
<section class="bg">
  ...
</section>

.bg {
  background-image: url('...');
  background-size: cover;
  width: 100vw;
  height: 100vh;
}
  1. Create a div that will be dedicated to being your layout parent, with using display: flex/grid (Flexbox is slightly older than Grid, so it has a bit better support). Center children with align-items and justify-content.
<section class="bg">
  <div class="layout">
    ...
  </div>
</section>

.bg { ... }

.layout {
  width: inherit;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
  1. You'll also apply your media query to the layout div.
.bg {...}

.layout {...}

@media (min-width: 720px) {
  .layout {
    flex-direction: row;
  }
}
  1. Add your img elements as children of the layout div, size accordingly.
<section class="bg">
  <div class="layout">
    <img src="..." />
    <img src="..." />
    <img src="..." />
    <img src="..." />
  </div>
</section>

.bg {...}

.layout {...}

@media (...) {}

.layout img {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  margin: 1rem;
}

If I have misunderstood what you're after let me know in the comments

Upvotes: 1

GBDev
GBDev

Reputation: 42

With position: fixed the images are likely overlapping.

Try wrapping them in a fixed element, and letting them be children in that element, you could then either use display: inline block; text-align: center; or display: flex; justify-content: center; to achieve your goal.

I recommend using flex as you can very easily change this for your mobile CSS.

Upvotes: 1

Related Questions