Nic727 Posted May 28, 2018 Share Posted May 28, 2018 (edited) Hi, I currently have that: Here is my code for the images part: <!-- ALBUMS LIST --> <div class="page-container"> <div class="album-container"> <div class="album-background" style="background-image:url(images/image1.jpg)"> <div class="album-name"> <h2>Photographie</h2> <a href="albums.html" class="btn btn-light">Voir l'album</a> </div> </div> </div> <div class="album-container"> <div class="album-background" style="background-image:url(images/image2.jpg)"> <div class="album-name"> <h2>Photographie</h2> <a href="albums.html" class="btn btn-light">Voir l'album</a> </div> </div> </div> <div class="album-container"> <div class="album-background" style="background-image:url(images/image3.jpg)"> <div class="album-name"> <h2>Photographie</h2> <a href="albums.html" class="btn btn-light">Voir l'album</a> </div> </div> </div> <div class="album-container"> <div class="album-background" style="background-image:url(images/image4.jpg)"> <div class="album-name"> <h2>Photographie</h2> <a href="albums.html" class="btn btn-light">Voir l'album</a> </div> </div> </div> </div> .page-container{ width:90%; margin:20px auto; overflow:auto; } .album-container{ width:50%; float:left; position:relative; display:block; } .album-background{ background-size:cover; background-position:center; padding:20%; display:flex; align-items: center; justify-content: center; text-align:center; color:white; } For my image, I use background-image with padding, because height doesn't work with my floating element. If you have a solution to make this work, I would like to hear it! Well, my current problem is not here. I tried to add a padding to my album-container to have white border around the images (like padding:13px), but for some reasons, it's acting a bit like a margin by pushing all my elements. After I tried to adjust album-container width to center my images… I found 48.1% to be good, but seems like it just works for my current screen size. Do you have a solution to add space between my albums images? Would like to be able to do that for different size. Thank you Edited May 28, 2018 by Nic727 Link to comment Share on other sites More sharing options...
Nic727 Posted May 28, 2018 Author Share Posted May 28, 2018 Nevermind, I found the problem. Just have to add another div between my container and background. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now