background images outside of a container css - html

im trying to build a web layout that has a fixed width container. the design calls for background images to go outside of the container though, meanwhile still keeping the text of the divs within the container. below is an image to show what i mean:
The black is the container, the red is the sidebar. the content on the sidebar should stay within the container, but different sections of the sidebar have different background colors.
any suggestions?

You can manage this with pseudo-elements
Extract of relevant code from demo.
aside .block:before {
position: absolute;
content: '';
left: 0;
top:0;
height: 100%;
width: 100vw;
background: rgba(0,255,0,0.5);
z-index:-1;
}
Codepen Demo
Note: The layout method here I've used it not specifically relevant. I just use flexbox for fun but this works with other, older layout methods just as well.

Related

Add image to the bottom of a adjustable height section

I am trying to created a CSS design on my web app. I am going for a banner that is flapping in the wind. I want the banner to expand/scroll its height so all text will be displayed on the banner but regardless of how tall the banner is, I want to add a ripped section of the banner at the bottom of it. The banner will be the same width in all cases.
Something like the example below (forgive the horrible Paint screenshot):
I can't seem to wrap my brain around how to accomplish this. Any of you smart people have any ideas?
First, I think it'd be helpful if you could provide an example of what you have so far. For example, what's your HTML & CSS for the adjustable-height divs, just without the image at the bottom? Easier to add onto that.
I believe the best way would be to add an image element at the bottom of your adjustable element (assuming it's a <div>). Position it as absolute, and set it relative to the bottom of its parent container. You may have to fiddle with it a bit to get it to work. Don't forget to also set the position of the parent to relative.
If you'd like to see the shoddiest example ever, go here: https://jsfiddle.net/c2ptfv8o/
Good further reading on position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Give the container element "position:relative" (to create a new positioning context) and some bottom padding (to make space for the image). Then you can either use a background image set to be at the bottom of the container and not repeat vertically or absolutely position an image to the bottom.
You can use pseudo-elements for this. This way you don't require extra markup for each element.
.myDiv {
position: relative;
}
.myDiv::after {
content: url(image.jpg);
display: block;
position: absolute;
left: 0;
top: 100%; /* will be placed immediately where the div ends */
width: 100%;
}
Based on the height of the 'banner curls', set a margin-bottom on .myDiv.
Or directly, without absolute, as long as you don't have paddings:
.myDiv::after {
content: url(image.jpg);
display: block;
width: 100%;
}

How to get 100% height of page content when using a MDL fixed header in Chrome?

I'm trying to make a page with a fixed header using material design lite. The problem is that I can't get the entire space of the page-content div.
Suppose I wanted to paint red the whole page except for the navigation bar. This works on Firefox:
<div class="page-content" style="height:100%">
<div style="background:#ff0000;height:100%"></div>
</div>
codepen : http://codepen.io/anon/pen/qONpXQ
This exact same codepen doesn't work in Chrome. How can I get the whole space in Chrome? I don't really care if the solution breaks the page in Firefox.
I created a different solution. The problem with using vh to set a content container's height is that if the content becomes a lot it will overflow the background color since the div is now a fixed height.
In this code pen I have created a "background-color" using a pseudo element which allows the content to scroll as usual but have the background still.
http://codepen.io/mcclaskiem/pen/YyWYoP
.page-content{
background-color:red;
height: 100%;
width: 100%;
&:after {
content: "";
height: 100vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
}
For some reason "page-content" on chrome doesn't work with percentages, no matter what I do. My advice to you would be to either use the parent div for your content, or to define the height of "page-content" in ems or pixels.
I personally have a similar issue right now and I honestly can't get it solved
Edit: mcclaskiem solution works better try out this codepen

How do I move div so they don't overlap

I am using codeigniter on a project. I have an over lap in DIVs.
(source: childrensdaycaresoftware.com)
In the image you can see that the overlap blocks the button. The CSS that controls this is
.fam {
position: relative;
left: 20px;
width: 400px;
}
If I make it fixed or absolute, it throws off all the work that I have done. I would have to redo the whole page.
Is there a way to send the Family Info block behind the menu button?
The css for these two DIVs are not in the same css file.
You should be able to make the z-index for the button, or its container, a higher number to elevate it above the other div.
.button{
z-index:5;
}
for example.

Extending a bootstrap container background to the edge of the page

I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design:
I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain rows have a coloured background that extends off to the sides as far as they go, as shown. I'm not sure if this is possible?
One method I have tried is switching to a container-fluid class for those rows, which goes to the edge of the screen. This sort of works, but I'm not sure if it is then possible to have the text inside stay inline with the other paragraphs as the page is resized? Really, the text should always have the consistent margins on the left and right sides for all of the blocks of text.
I don't think I would need content in the areas in the margin, so if a solution just involved using a standard container to hold the content, and another method to extend the background off to the side, that may work.
Here is a JSFiddle to start off with, including one of the orange boxes in a container-fluid, to demo that approach.
I'm not sure if this is the 'best' solution, but it is a solution nonetheless.
Create a pseudo element for each coloured box (:before)
Absolutely position that (relative to the coloured box - Bootstrap already sets position: relative on col-*-*).
Set top and bottom values to 0 so it's always the correct height
Set background colour to match box
Give it a wide width to ensure it always covers the gutter (sides of .container) on wide screens
For the left sided box, set left: -[width of psuedo element], for right sided box set right: -[width of pseudo element
Finally, you'll need a page container set to overflow: hidden.
HTML
<div id="page">
<div class="container">
...
</div>
</div>
CSS
#page {
overflow: hidden;
}
.box-left:before,
.box-right:before {
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.box-left:before {
left: -999em;
background: orange;
}
.box-right:before {
right: -999em;
background: lightblue;
}
DEMO

Rows of flexible and fixed div's within full-size window

I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}