CODEWITHSUNDEEP
cssbackground
Scipion
Scipion

Reputation: 11888

CSS : Apply background to full width in a div with a fixed width

My page is divided in rows with limited width. (<div class='row'>) I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?

Thanks!

Upvotes: 1

Views: 2983

Answers (3)

Paulie_D
Paulie_D

Reputation: 114991

This is possible with a pseudo-element, no need for additional HTML.

.wrapper {
  width: 50%;
  margin: auto;
}
[class^=row] {
  height: 50px;
  position: relative;
  margin-bottom: 10px;
}
[class^=row]:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 100vw;
  background: purple;
  z-index: -1;
}
.row1 {
  background-color: red;
}
.row2 {
  background-color: pink;
}
<div class="wrapper">
  <div class="row1">...</div>
  <div class="row2">...</div>
</div>

Upvotes: 4

AnnieMac
AnnieMac

Reputation: 862

You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need

.container-fluid {
  min-width: 100%
}
.row {
  max-width: 300px;
  margin: 0 auto;
  padding: 10px;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
<div class="container-fluid red">
  <div class="row">
    <p>Row Content 1</p>
  </div>
</div>
<div class="container-fluid green">
  <div class="row">
    <p>Row Content 2</p>
  </div>
</div>
<div class="container-fluid blue">
  <div class="row">
    <p>Row Content 3</p>
  </div>
</div>

Upvotes: 0

Aruloci
Aruloci

Reputation: 589

Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.

I came to this solution: 

<div class="row1">
    ...
</div>

<div class="row2">
    ...
</div>



.row1 {
    background-color: red;
    width: 100%;
    height: 50%;
}
.row2 {
    background-color: pink;
    width: 100%;
    height: 50%;
}

You can run it here: JSFiddle

Upvotes: 5

Related Questions