Bootstrap full-width with 2 different backgrounds (and 2 columns) The Next CEO of Stack OverflowGet Two Columns with different background colours that extend to screen edgeMake containers respect grid but fill remaining spaceFull-width split row with a fixed-width content area?the same background on the one side of containerFull-width CSS offset columnsMake background image wider than the container but only on one sideHow to Keep Content in a Container, but Extends Background Images Full Width?Centered content but main content and sidebar have there own colors that expanse the screenCSS - how to overflow from div to full width of screenOverflow image outside container on left sideHow do I give text or an image a transparent background using CSS?What's the difference between SCSS and Sass?How to make Twitter Bootstrap menu dropdown on hover rather than clickBootstrap modal appearing under backgroundBootstrap - Text-align class for inside tableCenter a column using Twitter Bootstrap 3How can I make Bootstrap columns all the same height?What is sr-only in Bootstrap 3?vertical-align with Bootstrap 3Bootstrap 4 Full width background on table header and rows but container on contents
Why Were Madagascar and New Zealand Discovered So Late?
Grabbing quick drinks
How to count occurrences of text in a file?
What is the purpose of the Evocation wizard's Potent Cantrip feature?
Return of the Riley Riddles in Reverse
Can a caster that cast Polymorph on themselves stop concentrating at any point even if their Int is low?
Is it a good idea to use COLUMN AS (left([Another_Column],(4)) instead of LEFT in the select?
Anatomically Correct Strange Women In Ponds Distributing Swords
Example of a Mathematician/Physicist whose Other Publications during their PhD eclipsed their PhD Thesis
Where to find order of arguments for default functions
How to safely derail a train during transit?
How to Reset Passwords on Multiple Websites Easily?
Unreliable Magic - Is it worth it?
Why doesn't a table tennis ball float on the surface? How do we calculate buoyancy here?
Why here is plural "We went to the movies last night."
How long to clear the 'suck zone' of a turbofan after start is initiated?
Explicit solution of a Hamiltonian system
Why is there a PLL in CPU?
Why didn't Theresa May consult with Parliament before negotiating a deal with the EU?
How should I support this large drywall patch?
How do spells that require an ability check vs. the caster's spell save DC work?
Is a stroke of luck acceptable after a series of unfavorable events?
Term for the "extreme-extension" version of a straw man fallacy?
Was a professor correct to chastise me for writing "Prof. X" rather than "Professor X"?
Bootstrap full-width with 2 different backgrounds (and 2 columns)
The Next CEO of Stack OverflowGet Two Columns with different background colours that extend to screen edgeMake containers respect grid but fill remaining spaceFull-width split row with a fixed-width content area?the same background on the one side of containerFull-width CSS offset columnsMake background image wider than the container but only on one sideHow to Keep Content in a Container, but Extends Background Images Full Width?Centered content but main content and sidebar have there own colors that expanse the screenCSS - how to overflow from div to full width of screenOverflow image outside container on left sideHow do I give text or an image a transparent background using CSS?What's the difference between SCSS and Sass?How to make Twitter Bootstrap menu dropdown on hover rather than clickBootstrap modal appearing under backgroundBootstrap - Text-align class for inside tableCenter a column using Twitter Bootstrap 3How can I make Bootstrap columns all the same height?What is sr-only in Bootstrap 3?vertical-align with Bootstrap 3Bootstrap 4 Full width background on table header and rows but container on contents
It's a little bit hard to explain, that's why i also can't find the answer on Google.
I'm working with Bootstrap 3, and i need a full width background image. On top of that 2 transparent color backgrounds. I made a example image to make it all clear:
1+2: combined transparent color background
3+4: combined transparent color background
1+2+3+4: combined background image (lowest layer)
Does anyone know if this is possible and how? Thanks for your help!
html css twitter-bootstrap
edited Nov 6 '15 at 10:48
Manoj Kumar
19.2k83869
asked Nov 6 '15 at 10:02
zrerozrero
6617
add a comment |
It's a little bit hard to explain, that's why i also can't find the answer on Google.
I'm working with Bootstrap 3, and i need a full width background image. On top of that 2 transparent color backgrounds. I made a example image to make it all clear:
1+2: combined transparent color background
3+4: combined transparent color background
1+2+3+4: combined background image (lowest layer)
Does anyone know if this is possible and how? Thanks for your help!
html css twitter-bootstrap
edited Nov 6 '15 at 10:48
Manoj Kumar
19.2k83869
asked Nov 6 '15 at 10:02
zrerozrero
6617
1
This technique may give you some tips - stackoverflow.com/questions/28565976/…
– Paulie_D
Nov 6 '15 at 10:15
add a comment |
It's a little bit hard to explain, that's why i also can't find the answer on Google.
I'm working with Bootstrap 3, and i need a full width background image. On top of that 2 transparent color backgrounds. I made a example image to make it all clear:
1+2: combined transparent color background
3+4: combined transparent color background
1+2+3+4: combined background image (lowest layer)
Does anyone know if this is possible and how? Thanks for your help!
html css twitter-bootstrap
edited Nov 6 '15 at 10:48
Manoj Kumar
19.2k83869
asked Nov 6 '15 at 10:02
zrerozrero
6617
It's a little bit hard to explain, that's why i also can't find the answer on Google.
I'm working with Bootstrap 3, and i need a full width background image. On top of that 2 transparent color backgrounds. I made a example image to make it all clear:
1+2: combined transparent color background
3+4: combined transparent color background
1+2+3+4: combined background image (lowest layer)
Does anyone know if this is possible and how? Thanks for your help!
html css twitter-bootstrap
html css twitter-bootstrap
edited Nov 6 '15 at 10:48
Manoj Kumar
19.2k83869
asked Nov 6 '15 at 10:02
zrerozrero
6617
edited Nov 6 '15 at 10:48
Manoj Kumar
19.2k83869
asked Nov 6 '15 at 10:02
zrerozrero
6617
edited Nov 6 '15 at 10:48
Manoj Kumar
19.2k83869
edited Nov 6 '15 at 10:48
Manoj Kumar
19.2k83869
edited Nov 6 '15 at 10:48
Manoj Kumar
19.2k83869
19.2k83869
asked Nov 6 '15 at 10:02
zrerozrero
6617
asked Nov 6 '15 at 10:02
zrerozrero
6617
asked Nov 6 '15 at 10:02
zrerozrero
6617
6617
1
This technique may give you some tips - stackoverflow.com/questions/28565976/…
– Paulie_D
Nov 6 '15 at 10:15
add a comment |
1
This technique may give you some tips - stackoverflow.com/questions/28565976/…
– Paulie_D
Nov 6 '15 at 10:15
1
1
This technique may give you some tips - stackoverflow.com/questions/28565976/…
– Paulie_D
Nov 6 '15 at 10:15
This technique may give you some tips - stackoverflow.com/questions/28565976/…
– Paulie_D
Nov 6 '15 at 10:15
add a comment |
2 Answers
2
active
oldest
votes
Yes, using the techniques outlined in this question but extending it to the columns.
The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
overflow: hidden;
/* prevent scrollbar */
.container
width:80%;
margin:auto;
margin-top: 1em;
position: relative;
overflow: visible;
.extra:before
content: '';
display: block;
/* override bootstrap */
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
[class*="col"]
border: 2px solid grey;
min-height: 320px;
position: relative;
.left:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5)
.right:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background: rgba(0, 0, 255, 0.25);
<div class="container extra">
<div class="row">
<div class="col-sm-4 left"></div>
<div class="col-sm-8 right"></div>
</div>
</div>Codepen Demo
answered Nov 6 '15 at 10:37
Paulie_DPaulie_D
75.6k96790
add a comment |
I think i figured it out.. Thanks to Paulie_D
Very simple example:
HTML:
<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
<div class="row">
<div class="col-sm-4 red20">xx</div>
<div class="col-sm-8 red50">xx</div>
</div>
</div>
<div class="cell red50">xxx</div>
</div>
CSS:
.fullwidth
background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg');
display:table;
width:100%;
.cell
display:table-cell;
vertical-align:top;
.red20
background-color:rgba(255,0,0,0.2);
.red50
background-color:rgba(255,0,0,0.5);
Link to jsfiddle: https://jsfiddle.net/DTcHh/14045/
answered Nov 6 '15 at 10:35
zrerozrero
6617
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33564131%2fbootstrap-full-width-with-2-different-backgrounds-and-2-columns%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Yes, using the techniques outlined in this question but extending it to the columns.
The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
overflow: hidden;
/* prevent scrollbar */
.container
width:80%;
margin:auto;
margin-top: 1em;
position: relative;
overflow: visible;
.extra:before
content: '';
display: block;
/* override bootstrap */
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
[class*="col"]
border: 2px solid grey;
min-height: 320px;
position: relative;
.left:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5)
.right:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background: rgba(0, 0, 255, 0.25);
<div class="container extra">
<div class="row">
<div class="col-sm-4 left"></div>
<div class="col-sm-8 right"></div>
</div>
</div>Codepen Demo
answered Nov 6 '15 at 10:37
Paulie_DPaulie_D
75.6k96790
add a comment |
Yes, using the techniques outlined in this question but extending it to the columns.
The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
overflow: hidden;
/* prevent scrollbar */
.container
width:80%;
margin:auto;
margin-top: 1em;
position: relative;
overflow: visible;
.extra:before
content: '';
display: block;
/* override bootstrap */
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
[class*="col"]
border: 2px solid grey;
min-height: 320px;
position: relative;
.left:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5)
.right:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background: rgba(0, 0, 255, 0.25);
<div class="container extra">
<div class="row">
<div class="col-sm-4 left"></div>
<div class="col-sm-8 right"></div>
</div>
</div>Codepen Demo
answered Nov 6 '15 at 10:37
Paulie_DPaulie_D
75.6k96790
add a comment |
Yes, using the techniques outlined in this question but extending it to the columns.
The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
overflow: hidden;
/* prevent scrollbar */
.container
width:80%;
margin:auto;
margin-top: 1em;
position: relative;
overflow: visible;
.extra:before
content: '';
display: block;
/* override bootstrap */
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
[class*="col"]
border: 2px solid grey;
min-height: 320px;
position: relative;
.left:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5)
.right:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background: rgba(0, 0, 255, 0.25);
<div class="container extra">
<div class="row">
<div class="col-sm-4 left"></div>
<div class="col-sm-8 right"></div>
</div>
</div>Codepen Demo
answered Nov 6 '15 at 10:37
Paulie_DPaulie_D
75.6k96790
Yes, using the techniques outlined in this question but extending it to the columns.
The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
overflow: hidden;
/* prevent scrollbar */
.container
width:80%;
margin:auto;
margin-top: 1em;
position: relative;
overflow: visible;
.extra:before
content: '';
display: block;
/* override bootstrap */
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
[class*="col"]
border: 2px solid grey;
min-height: 320px;
position: relative;
.left:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5)
.right:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background: rgba(0, 0, 255, 0.25);
<div class="container extra">
<div class="row">
<div class="col-sm-4 left"></div>
<div class="col-sm-8 right"></div>
</div>
</div>Codepen Demo
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
overflow: hidden;
/* prevent scrollbar */
.container
width:80%;
margin:auto;
margin-top: 1em;
position: relative;
overflow: visible;
.extra:before
content: '';
display: block;
/* override bootstrap */
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
[class*="col"]
border: 2px solid grey;
min-height: 320px;
position: relative;
.left:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5)
.right:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background: rgba(0, 0, 255, 0.25);
<div class="container extra">
<div class="row">
<div class="col-sm-4 left"></div>
<div class="col-sm-8 right"></div>
</div>
</div>*
margin: 0;
padding: 0;
box-sizing: border-box;
body
overflow: hidden;
/* prevent scrollbar */
.container
width:80%;
margin:auto;
margin-top: 1em;
position: relative;
overflow: visible;
.extra:before
content: '';
display: block;
/* override bootstrap */
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
[class*="col"]
border: 2px solid grey;
min-height: 320px;
position: relative;
.left:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5)
.right:before
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background: rgba(0, 0, 255, 0.25);
<div class="container extra">
<div class="row">
<div class="col-sm-4 left"></div>
<div class="col-sm-8 right"></div>
</div>
</div>answered Nov 6 '15 at 10:37
Paulie_DPaulie_D
75.6k96790
edited Nov 29 '18 at 13:29
answered Nov 6 '15 at 10:37
Paulie_DPaulie_D
75.6k96790
answered Nov 6 '15 at 10:37
Paulie_DPaulie_D
75.6k96790
answered Nov 6 '15 at 10:37
Paulie_DPaulie_D
75.6k96790
75.6k96790
add a comment |
add a comment |
I think i figured it out.. Thanks to Paulie_D
Very simple example:
HTML:
<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
<div class="row">
<div class="col-sm-4 red20">xx</div>
<div class="col-sm-8 red50">xx</div>
</div>
</div>
<div class="cell red50">xxx</div>
</div>
CSS:
.fullwidth
background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg');
display:table;
width:100%;
.cell
display:table-cell;
vertical-align:top;
.red20
background-color:rgba(255,0,0,0.2);
.red50
background-color:rgba(255,0,0,0.5);
Link to jsfiddle: https://jsfiddle.net/DTcHh/14045/
answered Nov 6 '15 at 10:35
zrerozrero
6617
add a comment |
I think i figured it out.. Thanks to Paulie_D
Very simple example:
HTML:
<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
<div class="row">
<div class="col-sm-4 red20">xx</div>
<div class="col-sm-8 red50">xx</div>
</div>
</div>
<div class="cell red50">xxx</div>
</div>
CSS:
.fullwidth
background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg');
display:table;
width:100%;
.cell
display:table-cell;
vertical-align:top;
.red20
background-color:rgba(255,0,0,0.2);
.red50
background-color:rgba(255,0,0,0.5);
Link to jsfiddle: https://jsfiddle.net/DTcHh/14045/
answered Nov 6 '15 at 10:35
zrerozrero
6617
add a comment |
I think i figured it out.. Thanks to Paulie_D
Very simple example:
HTML:
<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
<div class="row">
<div class="col-sm-4 red20">xx</div>
<div class="col-sm-8 red50">xx</div>
</div>
</div>
<div class="cell red50">xxx</div>
</div>
CSS:
.fullwidth
background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg');
display:table;
width:100%;
.cell
display:table-cell;
vertical-align:top;
.red20
background-color:rgba(255,0,0,0.2);
.red50
background-color:rgba(255,0,0,0.5);
Link to jsfiddle: https://jsfiddle.net/DTcHh/14045/
answered Nov 6 '15 at 10:35
zrerozrero
6617
I think i figured it out.. Thanks to Paulie_D
Very simple example:
HTML:
<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
<div class="row">
<div class="col-sm-4 red20">xx</div>
<div class="col-sm-8 red50">xx</div>
</div>
</div>
<div class="cell red50">xxx</div>
</div>
CSS:
.fullwidth
background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg');
display:table;
width:100%;
.cell
display:table-cell;
vertical-align:top;
.red20
background-color:rgba(255,0,0,0.2);
.red50
background-color:rgba(255,0,0,0.5);
Link to jsfiddle: https://jsfiddle.net/DTcHh/14045/
answered Nov 6 '15 at 10:35
zrerozrero
6617
answered Nov 6 '15 at 10:35
zrerozrero
6617
answered Nov 6 '15 at 10:35
zrerozrero
6617
answered Nov 6 '15 at 10:35
zrerozrero
6617
6617
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33564131%2fbootstrap-full-width-with-2-different-backgrounds-and-2-columns%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
This technique may give you some tips - stackoverflow.com/questions/28565976/…
– Paulie_D
Nov 6 '15 at 10:15