[Solved] Float 2 images on same row using CSS (background-image property)

[Jtwa11]

I have 2 images which are the exact same height and width. I want them to sit on the same row. However, combined they are much larger than the body width. I’ve inserted them through the HTML tags using IMG tags.

<div>
  <ul id="gallery">
    <li>
      <img src="http://www.picturesnew.com/media/images/image-background.jpg" alt="" />
      Test image 1 off google.
    </li>
    <li>
      <img src="http://www.picturesnew.com/media/images/image-background.jpg" alt="" />
      Test image 2 off google.
    </li>
 </ul>  
</div>

To restrain there size, I floated them left and applied a % width.
Here is the CSS for the code:

        .wrapper{
          width:80%;
          margin:0 auto;
        }
        img{
          max-width:100%;
          max-height:100%;
        }

        #gallery{
          list-style:none;
        }

        #gallery li{
          float:left;
          width:50%;
        }

Instead of the IMG tag, can I use background-image:url('') to accomplish the same thing?

Here is my :
CodePen

[shaneisme]

The images are broken on your pen.

I’m curious what you want them to look like exactly. Is it OK if they’re resized to always be 50% width of the viewport (like you have now), or do you want them to always remain the same size, or fill up their half of the viewport?

[shaneisme]

Images are working now, strange how it wasn’t loading for me earlier.

IMO, keeping them as images might be better for your needs – if you want them to be displayed as a normal image. I don’t know what making them background images would gain. What is your reasoning behind making them backgrounds in the first place?

[shaneisme]

In that case, I set up a fork.

[shaneisme]

That’s what I was trying to say, thanks for putting it so well!

[Author]

Posts