What is the best way to arrange multiple images on top of a single image?

I have a collection of six adorable kitten images in my portfolio. How can I arrange these images on top of a beautiful lake wallpaper without any white space? I want the word "Portfolio" and the six kittens displayed over the lake background, followed by the grey section of the website.

Portfolio - Displaying six kitten photos over lake image

About - Grey background with white font and profile picture (Already completed)

Contact - Contact form (Already completed)

I've tried using z-index and experimented with background-size: cover and contain, but haven't been successful. Can someone help me understand how to achieve this?

HTML

<header id="portfolio" class="container-fluid">
    <div class="container">
        <h1 class="font-italic">Portfolio</h1>

        <div class="row">
            <div class="col-md-4"> 
                <img src="http://placekitten.com/350/300" alt="Porfolio1" class="img-thumbnail">
            </div>

            <div class="col-md-4"> 
                <img src="http://placekitten.com/350/300" alt="Porfolio2" class="img-thumbnail>
            </div>

            <div class="col-md-4"> 
                <img src="http://placekitten.com/350/300" alt="Porfolio3" class="img-thumbnail">
            </div>
        </div>

        <div class="row portfolio-buffer">
            <div class="col-md-4"> 
                <img src="http://placekitten.com/350/300" alt="Porfolio4" class="img-thumbnail">
            </div>

            <div class="col-md-4"> 
                <img src="http://placekitten.com/350/300" alt="Porfolio5" class="img-thumbnail">
            </div>

            <div class="col-md-4">
                <img src="http://placekitten.com/350/300" alt="Porfolio6" class="img-thumbnail">
            </div>
        </div>

    </div>
</header>

CSS

.portfolio-buffer {
   margin-top: 30px; 
}

section {
   padding: 85px 0;
}

footer {
   padding: 40px 0;
}

#portfolio > img {
   margin-left: -15px; /* Compensate for the container */
   width: calc(100% + 30px); /* Compensate for the container */
}

https://codepen.io/jenlky/pen/GMENBL/

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Your fiddle has a variety of issues that need to be addressed:

  1. The selector for your .wallpaper does not correspond with any existing element in your code.
  2. You're using Boostrap's container-fluid without implementing a column-based layout, resulting in elements outside Bootstrap rows needing -15px margin adjustments for alignment.
  3. Your row configurations do not always add up to 12 columns as required by Bootstrap.
  4. Several elements are overflowing their containers.

The background issue related to background-size can be resolved by applying a CSS property like background: url(background.jpg) instead of an <img> tag.

To ensure the image stays within bounds, set a max-width of 100% and consider using position: fixed.

I've provided a new selector based on your structure with necessary properties added:

#portfolio > img {
  margin-left: -15px;
  margin-right: -15px;
  max-width: 100%;
  position: fixed;
}

Check it working here.

Remember to include max-width: 100%; and max-height: 100%; for all images to prevent overflow.

Update

To limit the background to the portfolio section, adjust the CSS to remove position: fixed and make the width calculation responsive to container padding:

#portfolio> img {
  margin-left: -15px;
  width: calc(100% + 30px);
}

View the updated pen here.

Additionally, apply max-width: 100% to all images and define margin-left for elements under Bootstrap columns:

.col-md-4 > img.img-absolute {
    margin-left: -15px;
    margin-right: -15px;
    max-width: 100%;
}

Hope these suggestions prove helpful! :)

Answer №2

Huge shoutout to Obsidian Age for the fantastic suggestion of using background-image instead of the traditional img src="...". I took their advice, removed the img src, and implemented this code:

header {
    background-image: url("https://wallpaperscraft.com/image/forest_lake_reflection_island_mist_97668_1920x1080.jpg");
    padding: 85px 0;
    background-repeat: no-repeat;
}

This change completely resolved my issue. You can see the updated version on my codepen (https://codepen.io/jenlky/pen/GMENBL/). Cheers!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing the IE CSS fix to fail in Internet Explorer 8? The IE statement does not seem to end properly

Greetings! I recently attempted to implement an IE fix on my website, however, it seems that it is not effective for IE8. Should I provide more specific instructions? <!--[if IE]> <link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12 ...

cssinternet-explorer-8if-statement

using localStorage to store multiple keys

My code attempts to generate multiple keys (user_0,user_1,user_3...) for the record(username,password,email). Even though I'm getting an alert saying "The data was saved," nothing is actually being stored in the local storage. Can someone help me figu ...

javascripthtmllocal-storage

Execute the JavaScript `execCommand("ForeColor")` command to remove the highlighting

Is there a way in JavaScript to dynamically remove text highlights that were applied using the execCommand("HiliteColor") method? I want to check if the selected text is within a highlighted span and then remove the highlight. Additionally, how can I handl ...

javascriptjqueryhtmlcsshighlight

Struggling to align your website content properly?

Currently, I am attempting to center all of the products on my Wordpress page so that everything is aligned centrally. I attempted wrapping it all in a div with specific CSS properties, but unfortunately, the content moved to the middle while the products ...

cssalignmentcenteringcenter-align

What is the best way to place a p-growl element in the bottom right corner of the page?

I've been struggling to fix the positioning of my growl message at the bottom right corner by overriding the CSS classes of p-growl. Initially, I attempted to override the .ui-growl class like this: ::ng-deep .ui-growl { position: fixed; b ...

cssangularangular5primeng

What is the best method for creating an HTML table using a JSON object?

Currently, I am in the process of developing an express app that can render a csv file and convert it into a json format. Within my method, I have this json data stored as a variable and my goal is to display it as a table on an HTML page. How can I effect ...

htmlnode.jsjsoncsvexpress

Issue with Magnific Popup lightbox functionality, and mfp-hide is ineffective

Hello everyone, I am new to stackoverflow so please bear with me as I navigate through it. Although I am still a beginner in HTML, CSS, and JS, I have been using them for work on occasion. Recently, I implemented Magnific Popup on a website I am working o ...

javascriptjqueryhtmlcssmagnific-popup

Teaching sessions along with the implementation of functions

I've created a set of input fields with the class replaceInput. The idea is to have a simple function that clears the value when the user focuses on the field, and then returns it to 'X' if the field is empty on focus out. My query is, coul ...

javascriptjqueryhtml

In Firefox, the content within the div element does not respect the maximum width set

My lengthy code won't wrap properly inside the td and div elements. It works fine in Chrome, but Firefox isn't cooperating. Any tips on how to fix this issue? I'm also open to other suggestions for improving my code (e.g. "reduce your use of ...

htmlcss

What is the HTML code to display a table and a video/image side by side?

I'm facing a challenge while trying to create a website. I want to place a table in the center of the page, with videos on either side of it. However, whenever I attempt this, the table ends up below the videos instead of being aligned with them. I&ap ...

javascripthtmlcssfrontendvisual-glitch

My function is not working with jQuery's .append method

As a newcomer to javascript and jquery, I am experimenting with adding html through a javascript function. In an attempt to place the contents of variable "y" at a specific location, I am using a div tag with the id of "Contacts" and trying to append elem ...

javascriptjqueryhtml

Ways to restrict the character count in a form input field

I need to limit characters in an input box on a form to 140, but I am struggling to figure out how to do it. Using Angular on the front end. The code for the input section where I need a text limit is in new.html <div class="form-group"> <lab ...

javascriptjqueryhtmlangularjs

How to layer a div on top of another using CSS

I have a container div that is styled with CSS properties. When a button is clicked, I need to display a modal overlay with a message. <div class="dvLanding"> <div class="popupArea"> <span class="VoteOnce">You can only vote ...

csshtmlpositionoverlay

The div on my website is rising to the top

My final div (well, not really final as I plan to add more divs) is moving upwards with the page (trying to adjust the height). I can't figure out why this is happening, especially since my second div is working perfectly fine. Link here: HTML ...

htmlcssbootstrap-4

The localization feature in jQuery mobile is causing the button style to disappear

For my current project, I am utilizing the jquerymobile framework along with the i18Next localization library. Here is the HTML code snippet: <div id="messageboxPage" data-role="page" data-theme="a"> &l ...

jqueryhtmlcssjquery-mobilei18next

Maintain the background div while scrolling horizontally

I am facing an issue with my wide bar chart where I use iScroll to enable horizontal scrolling. Behind the bar chart, there are horizontal lines that should move along in the background as the user scrolls horizontally. The challenge is to keep the lines v ...

htmlcss

determine a distinctive identification for an HTML ID

<div id=Pear1> <div id=Circle></div> </div> <div id=Pear2> <div id=Circle></div> </div> <div id=Pear3> <div id=Circle></div> </div> <div id=Pear4> <div id=Circ ...

jqueryhtml

The Material UI text field on mobile devices causes the screen to zoom in, cutting off the top content and displaying the bottom of the page

Whenever I click on the Material UI text Field during login, the screen gets pushed down and cuts off content at the top of the page. View image description here -I have examined my CSS to see if setting the container height to 100vh is causing this issue ...

cssmaterial-uifrontendtextfieldresponsiveness

Adjusting an image size using JQuery after resizing a canvas will only resize the image itself, not

How can I resize an image within a canvas using JQuery in a way that only the image is resized, not the entire canvas? function resizeImage(width, height){ var image = document.getElementById('resizeImage'), canvas = document.createEleme ...

javascriptjqueryhtmlcsscanvas

Is there a reason why Social Bar isn't appearing at the top?

My challenge is to position the bar close to the black footer. It appears correctly in Chrome, but not in Firefox and Opera. The screenshot shows how it looks in Chrome. However, in Firefox and Opera, the social bar is positioned lower and does not align ...

htmlcssfirefoxopera