36210

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

Question:

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!

Answer1:

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>

<br />

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

You can run it here: <a href="https://jsfiddle.net/akneg2pm/" rel="nofollow">JSFiddle</a>

Answer2:

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

<pre class="snippet-code-css lang-css prettyprint-override">.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; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="wrapper"> <div class="row1">...</div> <div class="row2">...</div> </div>

Answer3:

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

<pre class="snippet-code-css lang-css prettyprint-override">.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; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="container-fluid red"> <div class="row">

Row Content 1

</div> </div> <div class="container-fluid green"> <div class="row">

Row Content 2

</div> </div> <div class="container-fluid blue"> <div class="row">

Row Content 3

</div> </div>

Recommend

  • AS2: Calculate days between two dates
  • PHP automatically refresh page if the content of a specific file has changed
  • Setting color for textview dynamically using spinner?
  • Search feature with multiple criteria - PHP/MySQL
  • How to remove extra space caused by word-wrap in shrunk to fit element?
  • Remove border around the color in an input[type=color] in Firefox?
  • Exception handling as per java coding standards
  • Textbox validation in jquery
  • Whats the right place for testhelper-classes? (phpunit/best practise)
  • Jquery resizable reposition handle after scroll
  • IE11 textarea loses focus if another textarea is disabled
  • HighCharts - Show tooltip on column where value is 0 or null
  • SQL query to group by maximal sets of a column having inner consecutive distances below a threshold
  • EntLib Way to Bind “Null” Value to Parameter
  • Django model inheritance, filtering models
  • converting text file into xml using php?
  • D3 get axis values on zoom event
  • Calling Worksheet functions from vba in foreign language versions of Excel
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Ajax Loaded meta Tags
  • Xamarin Forms - UWP Fonts
  • NetLogo BehaviorSpace - Measure runs using reporters
  • Is possible to count alias result on mysql
  • How to set/get protobuf's extension field in Go?
  • Running a C# exe file
  • Join two tables and save into third-sql
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • How to model a transition system with SPIN
  • How to show dropdown in excel using jrxml (jasper api)?
  • ORA-29908: missing primary invocation for ancillary operator
  • Jquery - Jquery Wysiwyg return html as a string
  • Arrays break string types in Julia
  • WPF Applying a trigger on binding failure
  • Benchmarking RAM performance - UWP and C#
  • Acquiring multiple attributes from .xml file in c#
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Java static initializers and reflection
  • How can I remove ASP.NET Designer.cs files?
  • Converting MP3 duration time
  • java string with new operator and a literal