Using bootstrap, I'm trying to set a background-image for the first row of an html page. The .background CSS class, contains info on setting up the background image. When I make it a class of <body>, it works fine and fills the whole page with a background image. When I try to put it in the first <div>, though, The image is not displayed at all.
From what I understand, you can set a background image for a <div>. What am I doing incorrectly that is making this not work?
CSS:
.background
{
background-image : url("image.jpg");
background-repeat : no-repeat;
background-size : cover;
}
HTML:
<body>
<div class ="row background">
<div class="col-xs-12">
<h1 class="titletext text-center" id="text" style="color : #000070; margin-top : 250px; display : none" ><b>Harness the power of the web</b></h1>
<input class="center-block" type="image" id="down" src="down-arrow.png" style="margin-top : 350px; display : none" ></input>
</div>
</div>
<!-- start new row -->
<div class="row">
<div class="col-xs-3">
<!-- img> /img -->
</div>
<div class="col-xs-9">
<p>
Blob
</p>
</div>
<script>
$("#text").fadeIn(6000);
window.setTimeout(function ()
{
$("#down").fadeIn(6000);
}, 6000);
</script>
</body>
Also, here is an attempt at putting it in JSFiddle: https://jsfiddle.net/yc1jnp6o/2/. For some reason Neither the image (which I changed for the fiddle) or the headline will display in the fiddle. This isn't the case on the apache server I have set up.
Don't use width, because he has used col-xs-12 in row , that means he want to 100% width
.background {
background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat : no-repeat;
background-size : cover;
min-height:200px;
}
You need to declare width and height when using background:
.background {
background-image: url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 200px;
}
May be you can make use of pseudo code
.row.background:before{
display:block;
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat : no-repeat;
background-size : cover;
z-index:-1;
}
it covers whole row class
Check the fiddle
Related
I've got a website I'm trying to build. The main page has a hero image, and on the second page I want to display a different hero image.
For index.html:
<!--Hero Section-->
<header id="about">
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Hone is home</h1>
<hr>
<p>this text is ontop of the hero image</p>
Find Out More
</div>
</div>
</header>
CSS:
header {
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
background-image: url(../img/header.jpg);
color: #fff;
}
For membership.html (the page where I'd like the hero image to change):
<!--Hero Section-->
<header id="member">
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Hone is home</h1>
<hr>
<p>This text is on top of the hero image</p>
Find Out More
</div>
</div>
</header>
<!-- / Hero section-->
I tried to override the hero image using the id='member':
header #member {
background-image: url(../img/header2.jpg) !important;
}
But that doesn't work. So I thought maybe I could try some JavaScript:
window.onload = function(){
#member {
background-image: url('./img/header2.jpg');
}
}
and
$(function() {
$("header").attr("src", "../img/header2.jpg")
})
But neither worked. Please note that this isn't a website that's going live, it's for practice and for me to try and figure things out if I can.
You can use two classes, one common to both header tags and another specific to the id of the header. Also there is no need for !important as id has higher specificity.
Note that there is no space between tag and id in CSS, that is, it should be header#id.
HTML:
<!--Hero Section-->
<header id="about" class="commonHeader">
// rest of code
</header>
<!--Hero Section-->
<header id="member" class="commonHeader">
// rest of the code
</header>
CSS:
.commonHeader {
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
color: #fff;
}
header#member {
background-image: url(../img/header2.jpg);
}
header#about{
background-image: url(someOtherImage);
}
You are using the wrong CSS selector. You should use something like this:
header#member {
background-image: url(../img/header2.jpg);
}
There shouldn't be space between header and #member. Your current selector means the #member tag that is a descendant of a header tag. And there is no need for !important.
Your Code
header #member {
background-image: url(../img/header2.jpg) !important;
}
you need to use
header#member{
background-image: url(../img/header2.jpg);
}
JS
Your Code
window.onload = function(){
#member {
background-image: url('./img/header2.jpg');
}
}
This don't Work
Using jQuery
Your Code
$(function() {
$("header").attr("src", "../img/header2.jpg");
});
you need to use
$("header#member").css("background-image","path to image");
I have a div that I want to be able to click and shrink to the top ~10% of a page. I have code similar to this where one DIV should cover everything, then the second DIV would have the content for the page:
<div id="cover">Optimized the javascript so that all code is based on jQuery.
</div>
<div id="content" style="height:300px;" class="hide" >Optimized the javascript so that all code is based on jQuery.
</div>
This is a partial example of what I want to do:
JSFiddle
The problem with this is that the slideUp() function seems to completely hide the "cover" DIV rather than shrink it to part of it's size. The other problem I have is that the background doesn't scale with the DIV. I would like the background image to shrink to a reasonable size in the cover DIV. Is this possible? In my example JSFiddle, the white space should have the "cover" DIV, and a smaller version of the background image.
jQuery slideToggle(); is actually supposed to hide or show an element completely due the fact that you're not supposed to hide or show it with the element you're hiding / showing.
So to solve your problem I've created an extra div that will hide or show the element giving it the appearence of only partly hiding the element. You can find the fiddle here:
JSFiddle
I've also scaled the background for you.
I would use jquery's animate() for this and replace background-attachment:fixed with background-size: 8em;
Tweak this part depending on the size of your divs { "height": "30%","background-size": "6em" }
$(function () {
$('#cover').click(function () {
$(this).animate({ "height": "30%","background-size": "6em" }, 400, function () {
$(this).next().show();
});
});
});
* {
margin: 0px;
padding: 0px;
}
html {
width:100%;
height:100%;
}
.hide {
display: none
}
.show {
}
#cover {
background-color: black;
width:100%;
height: 100%;
top:0;
left:0;
position:fixed;
background-size: 8em;
margin: 0 auto;
background-image: url('http://i.stack.imgur.com/JVX13.png');
background-repeat:no-repeat;
background-position:center;
}
#content {
background-color: #CCCCFF;
padding: 5px 10px;
width:100%;
height: 100%;
top:30%;
left:0;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="cover">Optimized the javascript so that all code is based on jQuery.</div>
<div id="content" class="hide">Optimized the javascript so that all code is based on jQuery.</div>
<div id="img-frame">
<img src="mypathimg.png"/>
</div>
use img 100% will work but it unlike Facebook, it shrink but show the centre of the image.
Since none of the other answers are complete, change the markup to:
<div id="img-frame">
<div style="background-image:url(yoururl.png)" class="img"></div>
</div>
Now add CSS:
.img-frame > .img {
background-size:cover; /* Scale to fit optimistically */
background-position:center; /* Scale from center */
width:100%; /* Same width as parent */
height:100%; /* Same height as parent */
}
Have you tried:
<div id="img-frame">
<div style="background:url(mypathimg.png) 100% 100%;" />
</div>
You could also set the width and height of the image to 100% if you don't want it as a background image. You might need to provide an example of what you have so far and be more specific though.
#img-frame{
width:100px;
height:100px;
}
#img-frame img{
width:100%;
height:100%;
}
You could try:
<div id="img-frame">
<div style="background-size: cover;" />
</div>
you could use css3 rule: background-size as
<div id="img-frame">
<div style='background:url(mypathimg.png) ;background-size:contain;' ></div>
I'm attempting to roll divs over one another as your scroll down a page using Skrollr. I've gotten the desired effect to work with two divs, but when I try to make it work with a 3rd, only the first and last div seem to work. I'm thinking this is because I'm not fully understanding how the data-anchor-target attribute in Skrollr works. Here is the HTML I'm attempting to use:
<div id="skrollr-body">
<div id="q1" data-0="top:0%;">
Text
</div>
<div id="q2" data-anchor-target="#q1" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
Text2
</div>
<div id="q3" data-anchor-target="#q2" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
Text3
</div>
</div>
And the CSS:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#skrollr-body {
width:100%;
height:100%;
position:fixed;
}
#skrollr-body > div {
overflow:hidden;
position:absolute;
height: 100%;
width: 100%;
}
#q1 {
background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
background-size: cover;
}
#q2 {
background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
background-size: cover;
}
#q3 {
background: url(http://iwritealot.com/wp-content/uploads/2010/02/golden-clouds-wallpaper.jpg) center center no-repeat;
background-size: cover;
}
Fiddle here
What am I missing that is not allowing all 3 divs to behave as expected, instead of just the first and last?
Thanks.
Here's an example without anchor-target http://jsfiddle.net/YMYTy/1/
<div id="skrollr-body">
<div id="q1">
Text
</div>
<div id="q2" data-bottom-top="top:100%;" data-top="top:0%;">
Text2
</div>
<div id="q3" data-bottom-top="top:100%;" data-top="top:0%;">
Text3
</div>
</div>
It's different than what I described, but works.
There's this open feature request which, once implemented, will make this much easier https://github.com/Prinzhorn/skrollr/issues/185 You will then be able to use data-100p and data-200p to have animations after you scrolled down one or two times the height of the viewport.
I've got a piece of javascript that launches an entire page cover on launch of the page and two divs 'dialog' and 'dialog2' that open on top of the cover. so it's like having a blacked out background with a notification.
The problem i'm getting is i want the 'cover' background to be transparent / have an opacity, and it does, but for some reason this is also causing the 'dialog' and 'dialog2' div backgrounds to be transparent, and i don't want this to happen and i'm not sure why this is happening?
Can someone tell me what i'm doing wrong please.
<script type="text/javascript">
window.onload = function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById("dialog")
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
z-index:98;
left:0px;
top:0px;
width:100%;
height:2648px;
background-color:#fff;
filter:alpha(Opacity=50);
opacity:0.7;
-moz-opacity:0.7;
-khtml-opacity:0.7;
overflow:hidden;
}
#dialog {
background-image: url(http://www.playtimeboys.com/img/packages/account1.png);
background-repeat: no-repeat;
background-size:311px 187px;
height:187px;
width:311px;
margin-top:300px;
margin-left:650px;
z-index: 99;
position:fixed;
}
#dialog2 {
background-image: url(http://www.playtimeboys.com/img/packages/account1.png);
background-repeat: no-repeat;
background-size:311px 187px;
height:187px;
width:311px;
margin-top:300px;
margin-left:230px;
z-index: 99;
position:fixed;
}
</style>
</head>
<div id="cover">
<div id="dialog">
</div>
<div id="dialog2">
</div>
<div class="foo"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'-38px'},{queue:false,duration:200});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:200});
});
});
</script>
The CSS opacity effects everything and all the tags inside of it. You have to separate the cover from the dialogs. like this:
<div id="cover"></div>
<div id="dialog">
</div>
<div id="dialog2">
</div>
<div class="foo"></div>
Instead of using opacity, you can use the rgba color format:
#cover {
....
background: rgba(255, 255, 255, 0.7);
....
}
That should solve your problem without messing with HTML.
Put
<div id="dialog">
</div>
<div id="dialog2">
</div>
Outside of
<div id="cover">
Or, put in css #dialog1 and #dialog2:
filter:alpha(Opacity=100);
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;
Hope it helps :)