I am facing a simple problem that is taking up a lot of my time.
I have a simple CSS that defines an image as background:
#header-content{
background-image: url("../images/header-img.png");
background-repeat: no-repeat;
background-position-x: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And the div in a HTML page that has this ID:
<!-- HEADER -->
<div id="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="header-content">
</div>
</div>
</div>
</div>
</div>
<!-- HEADER -->
Very simple. But the image is not shown. What could be the problem?
P.S.: The image directory is correct.
Your problem could be that the #header-content div doesn't have any size. Try adding: height: 100px; width: 200px
#header-content{
background-image: url("http://unsplash.com/photos/1-ISIwuBMiw/download");
background-repeat: no-repeat;
background-position-x: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100px;
width: 200px;
}
<!-- HEADER -->
<div id="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="header-content">
</div>
</div>
</div>
</div>
</div>
<!-- HEADER -->
There is no need to set width ( the default for DOVs is 100%), but if you don't have any content in that DIV, you have to set a height value for that DIV to see a background (if not, it's 0px high = not visible).
Set height and width to your #header-content.
Also, when setting the height, try a different measuring unit than percentage(%) because percentage might not work correctly sometimes and it'll make it not to show as well. You can use px or vh.
Because you haven't defined width and height in your css code.
For example, add these width: 400px; height: 400px; to the first of #header-content {}, and it works. you can also do it for body or even HTML tag without using width and height properties.
Related
I have a problem adding the background-image: url() tag to my code. It doesn't display. I've tried everything, added strings, made it the first in the block but nothing works. Quite frustrating.
The HTML:
<div id="home" class="offset">
<div class="landing">
<div class="home-wrap">
<div class="home-inner"></div>
</div>
</div>
The CSS:
.home-inner {
background-image: url("imgs\04-full.jpg");
position: relative;
background-size: cover;
}
This is happening becouse the div with the background-image attribute has no sizes so it is displayed in the html page but it has width and heght null.
.home-inner {
background-image: url(https://www.gravatar.com/avatar/062021b6a1aae23a9651e9ab01ec9e36?s=48&d=identicon&r=PG&f=1);
position: relative;
background-size: cover;
width: 500px; /* fixed width */
height: 500px; /* fixed height */
}
<div id="home" class="offset">
<div class="landing">
<div class="home-wrap">
<div class="home-inner"></div>
</div>
</div>
Try adding some content to it or giving the div some width and height
my background image on the div looks too zoomed and is not clear it loses it clarity
this the html and styling that i've tried
<div class="grid-x intro">
<div class="cell large-12 medium-12 small-12 one">
</div>
</div>
<!-- end of intro -->
styling
.intro{
background-image: url("../images/house4.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
/* height: auto; */
padding-top: 66.64%;
}
It's okkey in here ... use "background-size: 100% auto;"
This is because your image is more wider then height & u used background-size: cover; . To cover all background, that's why it's zoomed and cropped rest width
Your code is okkey, just use resized image like 500px*333.2px (or around this ratio) to show all image inside 66.64% padding
.intro{
background-image: url("https://image.freepik.com/free-vector/geometric-models-gradient-background_23-2148326516.jpg");
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
/* height: auto; */
padding-top: 66.64%;
}
<div class="grid-x intro">
<div class="cell large-12 medium-12 small-12 one">
</div>
</div>
<!-- end of intro -->
May be the quality of the image is not great. Or if you don't need full covered background, you can shrink the background image by doing
background-size: 50%;
CSS background image is not showing.
This is my html code:
<div class="container-fluid p-c b-g">
<div class="row">
<div class="col-sm-12 text-infom">
</div>
</div>
</div>
</div>
css code
.b-g{
background-image: url(../images/bg/trading.jpg);
width: 100%;
}
add some height to div it'll show
.b-g{
background-image: url(https://pbs.twimg.com/profile_banners/1285511592/1470391779/1500x500);
background-size: contain;
background-repeat: no-repeat;
height: 300px;
}
<div class="container-fluid p-c b-g">
<div class="row">
<div class="col-sm-12 text-infom">
</div>
</div>
</div>
May be your keeping file path is wrong, check file loading or not by inspect in browser.
<style type="text/css">
.b-g {
background-image: url("http://tipsforbeauties.com/gallery_gen//5c5f13b27a80afa16ca4184aec9a26c1_324.7619047619x220.jpg");
width: 100%;
}
</style>
<div class="b-g">
</div>
For fit image to background (element, body or whatelse):
.b-g {
padding: 0px;
background-image: url(../images/bg/trading.jpg);
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
Or you can add background-size property (remove width property).
background-size: 100% 100%;
And last one you can use like this:
background-image: #000 url('../images/bg/trading.jpg') repeat center center;
I am using Twitter Bootstrap and have placed a number of fullscreen background images that were working perfectly. Tonight I added Scrollr to the site and now the background images are all blown up and I can't figure out why?
html
<header id="top" class="header">
<div class="container text-vertical-center">
<div class="row">
<div class="center-block">
<div class="padded" style="border: 1px solid white">
<h1 class="title text-uppercase"><font color="#FFFFFF">Language</font></h1>
</div>
</div>
</div>
<div class="row">
<div class="scroll">
<i class="icon-double-angle-down icon-large"></i>
</div>
</div>
</div>
</header>
css
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/test.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
I have also added height and width to the html and body tags at the top of my css.
html,
body
#skrollr-body {
width: 100%;
height: 100%;
}
Any ideas...?
Sorry, can't to add comment. Can you describe how it looks now? At first look it seems all is well. Maybe try ro change your position for absolute or fixed
I'm using Bootstrap to create my animation portfolio and currently have my sticky header working, but don't know how to fix two issues with it. You can see a working example [here].
Center the header exactly above the content div (right now it has a small offset to it)
Scale header to always take up 10% of the browser vertical size
(optional) Would like the content div to start exactly where the header stops so nothing gets cut off
Here is what my code looks like:
HTML
<div class="container">
<div class="affix affix-top header-resize" style="position: top; margin: 0 auto; clear: left; height: auto; z-index: 5; text-align: center; background-size: cover; background-color: clear;">
<div class="container" style="background-image: url('img/header-bg.png'); background-size: cover; height: auto;">
<img src="img/logo.png" class="col-xs-8" alt="Jesse J. Jones - Animator/Illustrator/Designer">
</div>
<div class="container" style="background-image: url('img/header-gradient.png'); background-repeat:repeat-x; background-size: cover; height: 20%;">
</div>
</div>
</div>
CSS
.header-resize {
height: 10%;
}
Thank you for your help! I'm pretty new to Bootstrap and responsive design, so all this is purely me experimenting and following tutorials. Let me know if I need to explain anything further! :)
Thank you,
Jesse
You forgot to add bootstrap's own ROW div. This will re-center your header:
<div class="container">
<div class="row">
<div class="affix affix-top header-resize" style="position: top; margin: 0 auto; clear: left; height: auto; z-index: 5; text-align: center; background-size: cover; background-color: clear;">
<div class="container" style="background-image: url('img/header-bg.png'); background-size: cover; height: auto;">
<img src="img/logo.png" class="col-xs-8" alt="Jesse J. Jones - Animator/Illustrator/Designer">
</div>
<div class="container" style="background-image: url('img/header-gradient.png'); background-repeat:repeat-x; background-size: cover; height: 20%;"></div>
</div>
</div>
</div>