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
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
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 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.
I have a page in which I am using bootstrap for designing. Now I am using grids; I want to keep 8 columns for my image and 4 columns for the text. So i have following code:-
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="bg"></div>
</div>
<div class="col-md-4">
hi how are you
</div>
</div>
</div>
Following is the css for class bg :
.bg {
background-image: url('../images/2.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:690px;
}
Now everything works fine, but I am facing a small problem here where i am checking this in extra small screen, the picture occupies almost the entire screen and for text i have to scroll way to the bottom.
Is there any way to adjust image height(width works perfectly fine) for extra small screens so that image and text can be seen together without much scrolling?
Try using viewport-height in CSS3:
.bg {
height:100vh;
}
do like this.give div class name as img-responsive and set width and height as your need.and put your image inside it and set its width and height like this.
<div class="img-responsive" style="width: 300px;height: 300px;">
<img style="width: 100%;height: 100%" src="http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg"/>
</div>
if you want text over picture, you can do this:
#media (max-width: 480px) {
.bg {
position: absolute;
left: 0;
width: 100%;
}
}
if you want half top is picture, half bottom is text, you can do this:
html
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="wrap">
<div class="bg"></div>
</div>
</div>
<div class="col-md-4">
hi how are you
</div>
</div>
</div>
css
#media (max-width: 480px) {
.wrap {
position: relative;
padding-bottom: 50%;
}
.bg {
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
}
hope it can help
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>