css Question posted in
Some basic documentation can be found here.

Is it possible to have a background color AND background photo side-by-side using CSS?

background color and photo side-by-side

Using a single outer wrapper container, is it possible to have a background color immediately next to a background photo as in the attached image? It needs to be a single wrapper, because I’d like to add a child div inside that will overlap this entire area. The photo needs to grow/shrink at the container grows/shrinks with the browser.

<div class="outerWrapper">
     <div class="innerWrapper"></div>
</div>
Tags:

2

Answers


  1. 0

    Yes. Backgrounds can be stacked/layered, sized and positioned. No layering is required to have a color with an image beside, just sizing and positioning.

    .d1 {
  color: white;
  width: 100%;
  height: 80vh;
  background-color: green;
  background-image: url(http://picsum.photos/1000);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: right center;
  padding: 0 calc(60% + 1em) 1em 1em;
  box-sizing: border-box;
  overflow: auto;
}
    <div class="d1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</p>
</div>

    After running this snippet, use the full page link to test the responsive behaviour.

    Login or Signup to reply.
  2. 0

    Alternate solution using Flexbox to achieve a similar layout without relying heavily on background properties:

    .container {
  display: flex;
  flex-direction: row;
  height: 80vh;
}

.content {
  flex: 1;
  padding: 1em;
  color: white;
  background-color: green;
}

.image {
  width: 60%;
  flex: 0 0 auto;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    <div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies.</p>
  </div>
  <div class="image">
    <img src="http://picsum.photos/1000" alt="background image">
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search