I just wanna know if background is in color and content div is in image is possible?
<body style="background-color: black; ">
<div id="header" style="background: url('xxx11.png') repeat left top;">
</div>
<div id="#container" style="background-image: url(xxx.png)">
</div>
</body>
When I run, I can just see black color but cannot see the background image..
Thanks in advance
<div id="#container" style="background-url: url(xxx.png)">
should be
<div id="#container" style="background-image: url(xxx.png); width=500px; height=500px;">
Set the width and height to whatever you need.
You will see black color until you do not set width and height of the divs. You do not have set width or height of div or do not have content in it.That is why it is showing body's black color. As you are using inline style so, you can use this:
<div id="header" style="background: url('xxx11.png') repeat left top; width:*px; height:*px;">
</div>
<div id="container" style="background-image: url(xxx.png); width:*px; height:*px;">
</div>
If your <div> is empty, it will be very small (1x1 pixel?), so you won't see your background.
So you can use CSS to set the size of your idv, so the background is shown. For example your could use:
#header {
position:absolute;
height:200px;
width: 400px;
}
Note: the id of your container div is #container, I do not think that a # is allowed in a tag id...
Try below code.
background: url(../img/pattern/59.png) 0 0 scroll #ccc;
<body style="background-color: black; ">
<div id="header" style="background: url('img/4.png') repeat left top #CCC;height:200px;">
</div>
<div id="container" style="background-image: url(img/5.png);height:200px;"></div>
</body>
Above code is tested, body was all black screened because you did not defined height property for divs.
Related
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
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');
}
I have a div inside a div and I want the inside div to either contain a background colour or background image. My code is:
<div class="row two">
<div class="cols n15">
<h2 class="latestVideo">Latest Video</h2>
<iframe width="100%" height="370" src="//www.youtube.com/embed/a-XQL60NVmQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cols n9 clearfix">
<h2>Other Videos</h2>
<div class="otherVids">
<p>"test"<p>
<!-- <img src="images/otherVideos.jpg" alt=""> -->
<div class="video1">
</div>
<div class="vidoe2">
</div>
<div class="video3">
</div>
</div>
<div style="clear:both"></div>
Right now this makes it look like this:
What I want is for the red box to extend all way down and match the height of the div on the left side. I realize that this would work if I have the div(otherVids) a height and width, but if I do this the website won't be responsive anymore.
So if there anyway to make the div background fill up the empty space while still remaining responsive?
Here is the CSS code I have:
.otherVids{
background-image: url('images/otherVideos.jpg');
background-color: red;
width: 100%;
height: 100%;
}
Try setting the height of otherVids to be equal to the iframe.
Add height:370px; to the css of .otherVids
You can try two method,the first thing is:
.otherVids{
min-height:370px;
}
or:
.otherVids{
height:370px;
overflow-y:scroll;
}
if your video list is to many,you need to design the content responsive.
finally,I think you don't need use width:100%,because div is block element.
I have a typical bootstrap layout like this
<body>
<div class="container">
...
</div>
<div class="container">
...
</div>
</body>
but I want to do this
<body>
<div class="bg-img">
<div class="container">
...
</div>
<div class="container">
...
</div>
</div>
</body>
The basic background color will be a soilid color but I want a background image for the main content. I would like the background image to scale appropriately with the responsive aspect of the framework.
I basically want to know if this is advisable?
Use just one container and then you can nest your rows into it.
html:
<div class="container">
<div class="row bg-img">
<div class="col-xs3">...</div>
<div class="col-xs3">...</div>
<div class="col-xs3">...</div>
</div>
<div class="row bg-img2">
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
</div>
css:
.bg-img {
background-image:url('http://placehold.it/200x200');
background-repeat:repeat-x;
background-size: 100%;
}
.bg-img2 {
background-image:url('http://placehold.it/200x200/fc43c');
background-repeat:repeat-x;
background-size: 100%;
}
http://jsfiddle.net/8y9Hr/3
By "scale appropriately", I suppose you mean you have an image of e.g. 1000px wide, and if the window is narrower than 1000px, you want the image to shrink to fit the width of the window.
You can use the CSS background-size property, however this won't work in IE8 and below.
Example which resizes the background image to fit the width of the screen, where image height is calculated automatically while maintaining proportions:
.bg-img {
background: #f00 url('image.png') no-repeat center top;
background-size: 100% auto;
}
You can use media queries to set a different size image to avoid e.g. mobile devices loading a 2000px wide image and resizing it.
Reference: http://www.w3schools.com/cssref/css3_pr_background-size.asp
Situation: I have a div which is 100% width of its parent. There is text in this div which needs to be centered/
Also within that div I have another element which is supposed to have a percentage of the outer divs width, be it 0 to 100% (this area will have a background-color set).
The code may look something like:
<div style="text-align:center; width:100%;">40%
<div style="background-color: green; width:40%;"></div>
</div>
So I would want the text '40%' to be centered and to the left of that 40% of the outer div will have the green background color.
What am I doing wrong?
Thanks.
<div style="text-align:center; width:100%;position: relative;">40%
<div style="background-color: green; width:40%;position: absolute;top: 0px;left: 0px; height: 100%;"></div>
</div>
You need to set position: relative on the outer div to ensure that the inner div is positioned relative to it
You need to set position: absolute on the inner div, and set it's top and left to 0, and it's width and height to 100%
Also, you left out the style=" in the second div
<div style="text-align:center; width:100%;">40%
<div style="background-color: green; width:40%; margin:0 auto;">40%</div>
</div>
Working Fiddle
<div style="text-align:center; width:100%;">40%
<div style="background-color: green; width:40%;"></div>
</div>