CODEWITHSUNDEEP
htmlcss
Thomas Fiala
Thomas Fiala

Reputation: 11

Same class, multiple sections, multiple backgrounds

I'm working on an image gallery that uses multiple section tags under the same class as links to each respective album I'm hoping to host. I'm having a problem where I'm unable to define the size of the images to fit inside of the respective sections. I'm hoping to be able to expand the page in the future and as such wouldn't like to add unnecessary lines of code where possible.

This is part of the HTML

   <section class="album" style="background: url(https://images.pexels.com/photos/776390/pexels-photo-776390.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb)">
      <h2 class="name">Title</h2>
      <ul class="details">
        <li>Shot With: </li>
        <li>Location:</li>
        <li>Date:</li>
      </ul>
    </section>

    <section class="album" style="background: url(https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg?w=1260&h=750&auto=compress&cs=tinysrgb)">
      <h2 class="name">Title</h2>
      <ul class="details">
        <li>Shot With: </li>
        <li>Location:</li>
        <li>Date:</li>
      </ul>
    </section>

And the CSS

.album {
   display: flex;
   flex-direction: column;
   flex: 1 0 10em;
   box-shadow: 0 0 30px #424242;
   border-radius: 15px;
   overflow: hidden;
   padding: .9em;
   color: DarkSlateGrey;
   transition: flex-basis 350ms ease-in-out;
 }
 .album:hover {
   flex-basis: 25em;
 }

 .album:hover .details {
   opacity: 1;
 }

 .name {
   font-size: 1.3em;
 }

 .details {
   list-style: none;
   opacity: 0;
   transition: opacity 500ms ease-in-out;
 }

 .details li {
   font-size: 1em;
   line-height: 2em;
 }

   .album {
     flex-shrink: 1;
   }

I have it set for 8 sections but I made a small pen with two just to make it easier; currently the images in the pen do not fit within the bounds of their respective containers and I was hoping to both center the images and resize them to fit as such. Any help would be greatly appreciated.

Upvotes: 1

Views: 47

Answers (2)

Twoch
Twoch

Reputation: 168

If I understand correctly, you want to control the way the background-image is scaled/fitted.

Try this, note the two last lines I added:

.album {
   display: flex;
   flex-direction: column;
   flex: 1 0 10em;
   box-shadow: 0 0 30px #424242;
   border-radius: 15px;
   overflow: hidden;
   padding: .9em;
   color: DarkSlateGrey;
   transition: flex-basis 350ms ease-in-out;
   background-size: cover;
   background-position: center;
}

There are more options for the background-size property though, you might want to check them out here.

The cover option will resize the image to cover the entire container, but it will also upscale the image if it's too small (so make sure to use images large enough) and it will also cut out some of the edges if the ratio between the image and the container is different. But in most cases it won't matter.

Upvotes: 1

Mahua Sarkar
Mahua Sarkar

Reputation: 35

Here is a simple solution for this:

.album {
display: flex;
flex-direction: column;
flex: 1 0 10em;
box-shadow: 0 0 30px #424242;
border-radius: 15px;
overflow: hidden;
padding: .9em;
color: DarkSlateGrey;
transition: flex-basis 350ms ease-in-out;
 }
 .album:hover {
flex-basis: 25em;
}
.album:hover .details {
opacity: 1;
 }
 .name {
font-size: 1.3em;
 }
 .details {
list-style: none;
opacity: 0;
transition: opacity 500ms ease-in-out;
 }
.details li {
font-size: 1em;
line-height: 2em;
}
.album {
flex-shrink: 1;
}
<section class="album" style="background: url(https://images.pexels.com/photos/776390/pexels-photo-776390.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);background-repeat: no-repeat;background-size: 100% 100%;background-position: center; ">
<h2 class="name">Title</h2>
<ul class="details">
<li>Shot With: </li>
<li>Location:</li>
<li>Date:</li>
</ul>
</section>

<section class="album" style="background: url(https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg?w=1260&h=750&auto=compress&cs=tinysrgb);background-repeat: no-repeat;background-size: 100% 100%;background-position: center; ">
<h2 class="name">Title</h2>
<ul class="details">
<li>Shot With: </li>
<li>Location:</li>
<li>Date:</li>
</ul>
</section>

Upvotes: 0

Related Questions