I am trying to create a div with a background-image, but the image is not showing. If I set the height in pixels (px) not percentage(%), the image is shown. So, I suspect there is no height set before. But I've set the html body height and width.
The code is below:
html {
height: 100%;
width: 100%
}
body {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<div class="row" style="height:100%">
<div class="leftdisp" style="width:50%;background-image:URL('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&w=1000&q=80')">
</div>
<div class="rightdisp" style="width:50%; background-color:#00000"></div>
</div>
I think there's nothing wrong with it? Are there any mistakes I made?
EDIT:
I already added background-size and background-repeat.
Your expectations are wrong. The height of div (and other block-level elements) is determined by its content, unless specified explicitly otherwise.
Since both of your inner div elements have no content other than whitespace (a background-image is not content), their height resolves to 0.
To fix it, assign a height to the divs.
Please start using the element inspector in your browser's developer tools (F12 on Windows).
first background-image:url() second you didnt set height of that image.`
.leftdisp {
height: 300px;
}
<div class="row" style="height:100%">
<div class="leftdisp" style="width:50%;background-image:url('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&w=1000&q=80')">
</div>
<div class="rightdisp" style="width:50%; background-color:#00000"></div>
</div>
`
Please add min-height property on leftdisp div
Just replace this code
<body>
<div class="row" style="height:100%">
<div class="leftdisp" style="width:50%; min-height: 500px; background-image:URL('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&w=1000&q=80')">
</div>
<div class="rightdisp" style="width:50%; background-color:#00000"></div>
</div>
</body>
if you want to set image to background, do it in body tag.
<body style="width:50%;background-image:url('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&w=1000&q=80')">
<div class="row" style="height:100%">
<div class="leftdisp">
</div>
<div class="rightdisp" style="width:50%; background-color:#00000"></div>
</div>
</body
Related
I want the page to be 100vh in height, so that there are no scrollbars on the whole page. For some reason the main grid is bigger than the screen size and some of the elements are getting clipped.
<html>
<body>
<div id="root">
<div class="app_container">
<div class="navigation">
<div class="navigation_logo_container"><img src="/icon.9c86b69e.png"
class="navigation_logo"><span>Sample</span></div>
<div class="navigation_buttons_container">
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
</div>
</div>
<div class="game">
<div class="quiz"><span class="question_text">Sample</span>
<div class="answer_choices">
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Codepen: https://codepen.io/GuacomoleCyclone/pen/RwKjmzO
Base on your setup the 100vh is working but your children are adding to the cause...
Meaning you have nav with height on fit-content...so lets just say 65px;
but then you have game div at height: 100%
If you remove that nav it works as you want, ..so for easily to solve this, you would have to also equate that extra height besides 100% game(nav height).
So meaning you would have to give:
.game {
height: calc(100% - 65px);
}
There are other ways to solve your setup without doing this but this is one of them.
In the botton of this there is a fullwidth picture with some stairs. I would like to make that around a 500px height.
It works when I set an inline height:
<section class="pv-40 ding-bottom-clear parallax dark-translucent-bg hovered background-img-4">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="testimonial" style="height: 500px;">
</div>
</div>
</div>
</div>
</section>
But when I set the height in css it is not working, and I cannot understand why?
<div class="testimonial controlHeight">
</div>
CSS
.controlHeight {
height: 500px;
}
It is a CSS document with a lot of lines CSS codes, so the document is called. I thought maybe something was overwriting, so I tried to set it at the end of the CSS document, but still not called.
controlHeight is a class selector. Therefore you need to write
.controlHeight {
height: 500px;
}
with the dot at the beginning.
You have:
controlHeight {
height: 500px;
}
Which matches against elements named controlHeight. You want:
.controlHeight {
height: 500px;
}
which matches elements with the class controlHeight.
I have this structure:
<div id="container">
<div id="header></div>
<div id="content>
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
I need to use background-image on container, but it does not have any content. Only header, sidebar, and main have content. How I can do it without position: absolute or specifying height in pixels?
min-height is useful, but I want to try dynamic size.
As others had noticed, it doesn't make much sense to have a container without content... but if you really wanna do this, you could use a padding on your #container to give it the size of the image:
#container {
background-image: url(https://lorempixel.com/g/800/600/);
background-size: cover;
padding-bottom: calc(100% * (600/800));
}
<div id="container">
<div id="header></div>
<div id="content>
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
This way, the container will have the same aspect ratio as your background image.
JSFiddle
Basically you can't show a background on a container that does not have content or specific height/width because it makes no sense.
A background means the "backside of the content", if the content don't have a size where you put the background? :)
If you have a rough idea of how much content the container is going to contain, you don't need to specify an exact height for it. Instead, consider using the min-height attribute like this:
#container {
background-color: black;
min-height: 50px;
}
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
If you're setting a background, it means that it will be displayed behind all of the content within the area that the content is in. For this reason, a minimum height must be specified for it to display the background without requiring any fixed, unchangeable height and without any content in the container.
Try it:-
background: url("image.png") no-repeat 105% 105%;
try this:
#container {
min-height: 200px;
background-image: url('your-image.png');
}
Since this question is outdated my question is how do I create a fluid row within non-fluid container.
I want to have a non-fluid container as my default layout, however the map I am placing, i need it to be full-width non-fluid.
here is my html:
<div class="container">
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
row-fluid is not working with bootstrap 3, setting width: 100%; only takes width of its parent (non-fluid container).
JS Fiddle, Please increase output window width so you can see the difference.
Thanks in advance
Try following code. You can make a 100% width container inside fixed layout.
http://jsfiddle.net/m1L6pfwm/2/
HTML
<div class="row row-full"> content... </>
CSS
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
I'm not sure that a completely understand your question, but can't you just use Bootstrap's container-fluid to contain the map row?
http://bootply.com/KP9j6dKCES
<div class="container-fluid">
<div class="row" style="height:100px; background: #f00;">
this should take 100% width
</div>
</div>
Either use apropriate layout
or get same effect using following
<div class="row-fluid" style="position:absolute;z-index:5">
<div id="map-canvas" class="container-fluid"></div>
</div>
<div class="container" style="z-index:0">
<--fluid with respect to first static/relative parent-->
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
You can play same effect using Z-index but not with it's grand parent
If you zoom out my website, the structure of the header looks bad. I don't know what to do about this. This is the link of my website. This is the CSS and HTML structure. Hope you can help me, I really need help :(
If you want you header to stay in the centre with your content, you will need t do that, it doesn't just happen.
You should start by agreeing on a width you want you content in (you have width: 1100pxon your container div, so I'll go with that for you.)
In you css for .containerchange width: 1100px; to max-width: 1100px.
Then in the css for #header remove the position: absolute;. Add in max-width: 1100px; margin: 0 auto;
You will need to modify the structure of your HTML and place the header div inside the container div. Currently, that part of your HTML is like this:
<div id="header"></div>
<div id="container">
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
but it should be like this instead:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
After modifying your HTML, you can add the following CSS to your stylesheet:
#header {
margin-left: -100px;
}
your header is positioned absolute
so when you zoom in and out it will stay absolute positioned. In the top left corner when the page is zoomed out
Also you do not have a wrapper for your code.... you may want to wrap everything in a container,
This will also take care of the image size thats over lapping your other content.
I do not know id you wanted the header to overlap like that but if it was intended just use margin-left
a wrapper will also contain your other divs sizes to stay within that wrapper.
Not going to work with zooming in and out
#header {
position:absolute;
z-index:101
}
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="underheader">
</div>
</div>
</body>
css
#wrapper{
width:800px;
} or whatever width you want
#header{
maegin-left:50px;
} or whatever px you desire