I have the following HTML page: https://jsfiddle.net/fk42dw85/
I'd like to position the orange block to the foot of the div container instead of the top. How do I achieve this?
.container {
margin-top: 20px;
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<div style="background:url('https://dynaimage.cdn.cnn.com/cnn/q_auto,w_826,c_fill/http%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F131126191411-strahov-abbey-library.jpg');height:200px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6" style="background:orange">
test
</div>
</div>
</div>
</div>
</div>
</div>
You can see this code https://jsfiddle.net/fk42dw85/97/
You can achieve that with:
position: relative;
bottom: -175px;
.container {
margin-top: 20px;
margin-bottom: 20px;
position: absolute;
bottom: 0;
left: calc(50% - 270px);
}
.parentContainer {
position: relative;
}
Assuming you want an image with a footer related to it. I would suggest you to take the following approach, which is much simpler, let me know if that works for you.
<div class="container">
<div class="image"></div>
<div class="image-footer">
This is the footer of the image
</div>
</div>
.image {
background: url('https://dynaimage.cdn.cnn.com/cnn/q_auto,w_826,c_fill/http%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F131126191411-strahov-abbey-library.jpg');
height:200px;
}
.container {
margin-top: 20px;
margin-bottom: 20px;
}
.image-footer {
background: orange;
opacity: 0.8;
}
Here is the jsfiddle modified with those changes: https://jsfiddle.net/rdarioduarte/fk42dw85/91/
You could try this solution as well, which avoids the use of absolute positioning
.container {
position: relative;
top: 95%;
transform: translateY(-50%);
}
Adjust the value of the top attribute as you wish to get the desired effect.
Related
I found a post here where the same question was asked before. I implemented the solution suggested there and it works fine with Chrome and Firefox. But when I tested it on Safari and Opera, I ended up with a long horizontal scrollbar. I'm not sure how to fix it since I've already added using overflow-x: hidden to the body. You can see it in action here.
HTML
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
CSS
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
border:1px solid black;
}
.level {
height:100px;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
I checked in the link(www.kampuster.com) you shared and found the problem with your code.
Problem:
In file all/themes/bootstrap_kampuster/css/style.css, you have provided width: 9999px; for classes .homeBanner:before, .homeBanner:after and .countUpSection:before, .countUpSection:after which is causing the whole problem and is not the right way to do it.
Suggestion:
Below is the approach I would suggest you to go with.
Here is a pen to better illustrate the suggestion.
.section-first, .section-third {
background-image: url('http://www.kampuster.com/sites/default/files/bannerlogo_babson.jpeg');
background-attachment: fixed;
background-size: cover;
}
.section-first-inner {
background-color: rgba(83, 192, 183, 0.3);
}
.section-first, .section-second, .section-third {
/* this is just to add height inplace of content */
height: 600px;
color: #ffffff;
overflow: hidden;
}
.section-first-inner, .section-second-inner, .section-third-inner {
padding: 20px 20px;
font-size: 18px;
height: 100%;
}
.section-second {
color: #000;
}
<link href="http://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
</head>
<body>
<div class="main-container">
<header id="page-header"></header>
<div class="section-first">
<div class="section-first-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section first goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-second">
<div class="section-second-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section second goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-third">
<div class="section-third-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">Your content for section third goes here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Instead of setting width:960px; on the container try setting view width: width: 100vw;
So the container css will be:
.container {
width: 100vw;
margin: 0 auto;
border:1px solid black;
}
just use .container-fluid class.
<div class="container-fluid" style="background-image:url('xample.jpg')">
<div class="row">
<div class="col-sm-12">
<div class="container">
<div class="row">
<div class="col-sm-12">
your content here
</div>
</div>
</div>
</div>
</div>
Full width background inside Bootstrap container!!
If this is what you want (Example Demo)
Then simply use Relative Lengths :
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
I have only replaced 2 values in your code:
.container {
width:100vw;
}
.purple:after {
width: 100vw; /* some huge width */
}
Code:
<!-- Latest compiled and minified CSS -->
<
link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- jQuery library -->
<
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < /script>
<!-- Latest compiled JavaScript -->
<
script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script>
html,
body {
overflow-x: hidden;
}
.container {
width: 100vw;
margin: 0 auto;
border: 1px solid black;
}
.level {
height: 100vh;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399;
/* Match the background */
top: 0;
bottom: 0;
width: 100vw;
/* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
Please try this, this is working for me.
add the below css, if doesn't work try adding important to them. And to get full width of container, add container-fluid class to particular container.
html, body {
width: -webkit-fill-available;
overflow-x: hidden;
}
I've looked around and tried many different solutions, yet none of them worked for me. Basically I am just trying to have my <center> tag aligned vertically, so the margin on the top is always equal to the bottom when resizing. What kind of CSS can I apply to do this?
.modalText {
font-weight: 100;
font-size: 2.5em;
}
.paypalCenterModal {
margin: auto 0;
}
.modalText {
margin: auto 0;
}
.img-responsiveModal {
margin: 30px 0px 30px 0px;
display: block;
width: 100%;
height: auto;
box-shadow: 10px 10px 8px #888888;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
</div>
<center class="paypalCenterModal">
<h3 class="modalText">Select Options</h3>
<form class="paypalForm" <p>Form Content In Here</p>
</form>
</center>
</div>
</div>
You can easily get this by using Flexbox.
If you are thinking to upgrade your bootstrap to version4 you will get this easily.
And as I see you are not using bootstrap grid col-* and row classes according to doc.
Read Bootstrap3 Grid
Stack Snippet
.v-align-section .row {
display: flex;
align-items: center;
}
.modalText {
margin-top: 0;
}
#media (max-width:767px) {
.v-align-section .row {
flex-direction: column;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="v-align-section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal img-responsive" id="myImg3" src='http://via.placeholder.com/250x350' />
</div>
<div class="col-sm-6">
<form class="paypalForm">
<h3 class="modalText">Select Options</h3>
<p>Form Content In Here</p>
</form>
</div>
</div>
</div>
</div>
You can adjust the bottom values in the class it self. Try the following snippet. Further more you can adjust values with using rem rather than pixel to improve the responsiveness.
.divThatNeedsToBeCenteredVertically {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0px;
margin: auto;
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
</div>
<center class="divThatNeedsToBeCenteredVertically">
<h3 class="modalText">Select Options</h3>
<form class="col-sm-6 paypalForm">
<p>Form Content In Here</p>
</form>
</center>
</div>
</div>
Why did you use "centre" tag? It has been obsoleted. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)
Below is the solution, make sure that the position of the parent div, with class name "row", is not "static" (by default, the position of div is static, you can change it to "relative" or whatever).
.row {
position: relative;
height: 100vh;
}
.divThatNeedsToBeCenteredVertically {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: gray;
}
For more details look at the URL: https://jsfiddle.net/sanqian/y9ftobma/
Here is another example, I recommend you to having a look at it.
https://jsfiddle.net/sanqian/La9m2u8L/
Try adding this CSS Snippet
form{
position : absolute;
transform: translate(-50%,-50%);
top : 50%;
left : 50%;
margin: auto;
}
We are setting the top and left to middle of the form screen
Try this..!
.modalText {
font-weight: 100;
font-size: 2.5em;
margin: auto 0;
}
.img-responsiveModal {
max-width: 100%;
height: auto;
box-shadow: 10px 10px 8px #888888;
}
.row{
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjM2ODEzMDUzMF5BMl5BanBnXkFtZTcwNDQ2NzU3OQ##._V1_UY317_CR20,0,214,317_AL__QL50.jpg"/>
</div>
<div class="col-xs-6 paypalCenterModal">
<h3 class="modalText">Select Options</h3>
<form class="paypalForm"><p>Form Content In Here</p></form>
</div>
</div>
</div>
</div>
There is a large white gap between the first row of columns and the second row.
JSFiddle: https://jsfiddle.net/5o3ug26g/
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style>
.content {
margin-left: 170px;
margin-right: 170px;
}
.sidebar { width: 160px; height: 600px; }
.left { float: left; background: forestgreen; }
.right { float: right; background: steelblue; }
</style>
</head>
<body>
<div>
<div class="left sidebar"></div>
<div class="right sidebar"></div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Text on top of the page</div>
<div class="col-md-6">Other text on top of the page</div>
</div>
<div class="row">
<div class="col-md-6">I want this to be right below the "Text on top of the page" but it isn't...</div>
<div class="col-md-6">... and I want this to be right below the "Other text on top of the page" but it isn't</div>
</div>
</div>
</div>
</div>
</body>
</html>
If I remove the row classes then the gap disappears, but this problem appears also when using Bootstrap navbar-s and other containers with :after { display: table; }, so just removing the row classes is not a solution.
I tried adding clearfix in a bunch of places but to no avail.
This is an extract from a more complex responsive layout and I'd rather avoid refactoring it all.
What is the easiest fix?
You can position your left and right sidebars absolutely instead of floating them. The floats are interfering with the bootstrap layout.
.left { background: forestgreen; position:absolute; left:0; top:0; }
.right { background: steelblue; position:absolute; right:0; top:0;}
Live example forked from yours: https://jsfiddle.net/5fk5900s/1/
Marcelo is correct. You've already added margins to the content to account for the side bars. Here is a fiddle with the absolute positioning changes:
https://jsfiddle.net/5o3ug26g/1/
.content {
margin-left: 170px;
margin-right: 170px;
}
.sidebar {
position: absolute;
width: 160px;
height: 600px;
}
.left {
left: 0px;
background:
forestgreen;
}
.right {
right: 0px;
background: steelblue;
}
I need to lay out a web page with two images that must stretch to fill the available browser window, but with text content that is centred in the page. So far, the only ways I seem to be able to do this are, a) combine the two images into one, and set this as a background image for body, then carefully vertically position the middle band of content to fit the gap between images, or, b) to nest a container (fixed) div inside a container-fluid holding the image and the fixed holding the text content. I have, however, seen dire warnings and scorn poured on those who advocate nesting bootstrap containers.
This image may help convey what I need:
'Image 1' must stretch across the entire window, with the content remaining centered, the same with 'Image 2', with a plain band of white vertically between the images, and a plain band of grey right across the screen at the bottom.
You can try this.
Note that you have to apply some custom css as required by your design needs. Follow the example:
.container-fluid {
padding: 0;
}
.container-fluid.wrapper {
padding-top: 100px;
}
.ht33 {
height: 200px;
}
.container.content {
width: 970px;
position: absolute;
height: 800px;
background: gray;
color: #fff;
top: 0;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid wrapper">
<div class="container content"></div>
<div class="container-fluid bg-primary ht33"></div>
<div class="container-fluid bg-warning ht33"></div>
<div class="container-fluid bg-danger ht33"></div>
</div>
I used row class to the BGs to have a Grid feel on them and also eliminate the padding.
HTML
<div class="container-fluid wrapper">
<div class="container content bg-primary"></div>
<div class="row bg-success bg"></div>
<div class="row bg-warning bg"></div>
<div class="row bg-danger bg"></div>
</div>
CSS
.container-fluid.wrapper {
padding-top: 100px;
}
.bg {
height: 200px;
}
.container.content {
width: 970px;
position: absolute;
height: 800px;
color: #fff;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
You could try to do it like this:
http://jsfiddle.net/kqoonr24/1/
You may have to adapt it to fit your needs, but this is the basic idea. :-)
Basically, you'll want to have a div that acts as a background and houses the individual divs which make up each background element.
Then, after that you'll want to have a foreground div which houses the actual content.
html,
body,
.wrapper,
.foreground,
.background {
height: 100%;
width: 100%;
}
.foreground {
background-color: green;
max-width: 400px;
margin: 0 auto;
}
.background {
position: absolute;
z-index: -1;
}
.background > * {
height: 33%;
content: '';
}
.background-element-1 {
background-color: blue;
}
.background-element-2 {
background-color: red;
}
.background-element-3 {
background-color: orange;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
<div class="wrapper">
<div class="background">
<div class="background-element-1"></div>
<div class="background-element-2"></div>
<div class="background-element-3"></div>
</div>
<div class="foreground">
<div class="foreground-inner">
I am your text!
</div>
</div>
</div>
</body>
You will likely need to adjust it as I made quite a few assumptions—let me know if you need any more help.
The simpliest example that I might think of, I assumed you don't know the size of your background images, that's why I lay them inside background div that's not affecting page flow, while on top there's natural content
Demo
<div class="images-wrapper">
<img src="..." alt="">
<img src="..." alt="">
</div>
<div class="container">
.......
</div> <!-- /container -->
body {
background:#ccc;
}
.images-wrapper {
position:absolute;
top:0;
left:0;
right:0;
background:#fff;
z-index:0;
}
.images-wrapper img {
display:block;
width:100%;
height:auto;
margin-top:30px;
}
.container {
z-index:2;
position:relative;
background:#fff;
}
I am trying to get the picture in the 2nd div to overflow the parent div. I have played around with different position attributes and overflow:visible, but none seem to solve my issue.
How can I solve this?
Thanks
EDIT: Okay scrap that first code - here is the actual code:
I want to get the slider to stretch across and overflow the sp_block
EDIT 2: I must not edit the first 4 divs by the way.
<div id="sp_header">
<div id="sp_block_16" class="sp_block_section_last">
<div>
<div class="sp_block">
<!--
must have
-->
<link type="text/css" rel="stylesheet" href="http://www.dedicatedrejects.com/icsa/test/slider/allinone_contentSlider.css"></link>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cabin"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.dedicatedrejects.com/icsa/test/slider/js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="http://www.dedicatedrejects.com/icsa/test/slider/js/allinone_contentSlider.js"></script>
<!--
must have
-->
<script></script>
<div style="position:relative; width:1562px; height:351px; overflow:visible;">
<div style="width:1562px; height:351px; position:absolute; overflow:visible; margin: 0 auto;">
<div class="allinone_contentSlider imposing" style="width: 1562px; height: 351px;">
<div id="allinone_contentSlider_imposing" style="position:relative overflow:visible;"></div>
<div class="bottomNavRight" style="display: block; bottom: -35px; top: auto; left: 813px;"></div>
<div class="bottomNav" style="display: block; bottom: -35px; top: auto; width: 46px; left: 758px;"></div>
<div class="bottomNavLeft" style="display: block; bottom: -35px; top: auto; left: 758px;"></div>
<div class="bannerControls" style="margin-top: 105px;"></div>
<div class="contentHolderVisibleWrapper" style="width: 1562px; height: 351px;">
<div class="contentHolder ui-draggable" style="cursor: url("skins/hand.cur"), url("skins/hand.cur"), move; … top: 0px; position: absolute; width: 3124px; height: 351px;">
<div id="contentHolderUnit_0" class="contentHolderUnit" rel="0" style="width: 1562px; height: 351px;">
<img src="https://robertsspaceindustries.com/media/6kahqz455yu40r/post_section_header/StarCitizenDev-2014-04-11-14-10-32-75.jpg" style="position:absolute;"></img>
<img src="http://i.imgur.com/vcifs31.png" style="position:absolute; z-index:10;"></img>
</div>
<div id="allinone_contentSlider_photoText0" class="allinone_contentSlider_texts" style="z-index: 11; width: 1562px; left: 0px; top: 0px; display: none;"></div>
<div id="contentHolderUnit_1" class="contentHolderUnit" rel="1" style="width: 1562px; height: 351px;"></div>
<div id="allinone_contentSlider_photoText1" class="allinone_contentSlider_texts" style="z-index: 11; width: 1562px; left: 1562px; top: 0px; display: none;"></div>
</div>
</div>
<div class="playOver" style="left: 744px; top: 139px; display: none;"></div>
<canvas class="mycanvas" width="36" height="36"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
As it is, the image will appear outside the parent div, for no overflow has been specified. If you want it to hide inside the parent div, just add to the div:
{
overflow: hidden;
}
http://jsfiddle.net/Cn3n3/2/
The inline width and height attributes (within the <img> tag) shouldn't have the px unit in them. Only specify the number of pixels without a unit. You shouldn't need to specify overflow, since the defaults will suit your needs in this case.
See example: http://jsfiddle.net/orvn/ansBc/1/
<div id="container">
<img src="http://foo.com/image.jpg" width="500">
</div>
#container { width: 300px; }
#container > img { display: block; }
Additionally, you don't need to wrap the image in a div here, you can apply display: block; to have it behave the way a div would.
Not sure what you're trying to achieve but the parent div needs the overflow tag.
HTML
<div class="parent">
<div class="child">image</div>
</div>
CSS
.parent {
width:700px;
height:200px;
overflow:visible;
background-color:green;
}
.child {
width:1000px;
height:100px;
background-color:red;
}
Here is a demo jsfiddel
I made the parent div background height longer so you can see the overflow. You can also replace the background color with an image. Replace the class (parent & Child) and write this inline but I advise against that.