I'm trying to position one div after another, easily achieved when the divs are positioned relatively, but I want each of these divs to fit the size of the browser.
I've very roughly achieved it using this method:
<div id="container">
<div id="test-1" style="background: url(../images/background-v2.jpg)"></div>
<div id="test-2" style="background: url(../images/background-v2.jpg)"></div>
</div>
CSS:
#test-1 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#test-2 {
position: absolute;
top: 101%;
left: 0px;
width: 100%;
height: 100%;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
So #test-1 scales to fit the size of the browser then when you scale down #test-2 also fits the size of the browser and so on. But I've achieved these by positioning them absolutely and setting #test-2 101% from the top, which I don't want to do every time I add another div, thus the reason I'd like them positioned relatively while still retaining the scale to browser background images. If that is at all possible? Might it require jQuery?
I'm completely stumped on this one!
There was something else I couldn't figure out with these background images as well, as they're nested inside divs, when the browser size gets below about 750px in width, the background images become fixed, is there anyway they can always stay centre to the browser, basically overflowing the image off the left of the browser?
I haven't used background images as I'm not really sure what you're doing with them but here is a solution using jQuery for the sizing issue:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.fill-browser{
width:100%;
}
</style>
<!-- uncomment the line below to include jquery, I had to comment it out for stackoverflow -->
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script-->
<script>
$(function() {
Resize();
});
//Every resize of window
$(window).resize(function() {
Resize();
});
//Dynamically assign height
function Resize() {
// Handler for .ready() called.
var windowHeight = $(window).height() + 'px';
$('.fill-browser').css('height', windowHeight);
}
</script>
</head>
<body>
<div class="fill-browser" style="background-color:#aa0000;"></div>
<div class="fill-browser" style="background-color:#00aa00;"></div>
<div class="fill-browser" style="background-color:#0000aa;"></div>
</body>
</html>
You might also want to check out - http://srobbin.com/jquery-plugins/backstretch/
It's a jQuery plugin to easily stretch background images.
Related
I have been looking at this css demo (http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/) , and love it : however, I want to be able to put this into a div, and not cover the whole page.
Is this possible ? I have been able to put single image into a div using this css code
header {
background: url(/assets/images/landscape-mountains-nature-man.jpg) no-repeat center top fixed;
-webkit-background-size: contain;
background-size: contain;
}
but for the life of me I can't get the image slideshow to work in a div
I am not a css guy (as it is plainly obvious) and would appreciate some pointers if someone could help me out ;)
Thanks!
========= update ========
I probably have not been clear enough : I have been able to get a div background working , but what I really want to do is to use the css animations in the slideshow demo in a div.
I have implemented the css from the demo, but it is fullscreen, and I can't work out how to limit it to a div / class , despite working on it for quite some time.
What I don't get is that the css from the demo is
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
and my html is
<header id="home">
.. [snip] ..
<div class="container">
<ul class="cb-slideshow">
<li><span></span><div><h3>page1</h3></div></li>
<li><span></span><div><h3>page2</h3></div></li>
<li><span></span><div><h3>page3</h3></div></li>
<li><span></span><div><h3>page4</h3></div></li>
<li><span></span><div><h3>page5</h3></div></li>
<li><span></span><div><h3>page6</h3></div></li>
</ul>
so why does the css in my code just limit itself to the header, but the css in the animation take over the whole page ?
You can use this
HTML
<div class="header_div">
</div>
CSS
.header_div {
width: 100%;
height: 400px;
background-image: url('http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg');
background-size: cover;
background-position: center;
}
Just make multiple div in the HTML, like so:
<div id = "number1"></div>
<div id = "number2"></div>
<div id = "number3"></div>
then, in the CSS, put:
#number2 {
background: url(/assets/images/landscape-mountains-nature-man.jpg) no-repeat center top fixed;
-webkit-background-size: contain;
background-size: contain;
}
this #number2 can be number 1 or 3, just put content in the other div's
hope I helped!
I recommend that if you're using a div, using jquery to specify to the height of the screen, this will serve to assign the height of the screen and will also work with mobile phones and tablets.
This method is for use with <body>:
Css:
body {
background: url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg') no-repeat fixed;
background-size: cover;
background-position: center;
}
Or you can use it in a div adding Jquery like this:
$(function() {
var height = $(window).height()+"px",
$element = $('.background-image');
$element.css('height', height);
});
this is to make your div is full screen.
I am trying to come up with a website of my own where I have a background image that covers the entire page when it loads initially. I want this to be responsive as well so that I can see the entire background image irrespective of screen size.
Here is the catch though, As I scroll the page I want the next div or element to be ready just below (on scrolling). The best reference i can think of right away would be fiftythree.com.
What you’re seeing on fiftythree.com is merely a div that has the size of the viewport height with a background-image set.
To make the image scale based on the screen size, set it to background-size: cover.
.hero {
background-color: salmon;
/* background-image: url(...); */
background-position: center;
background-size: cover;
color: #fff;
height: 100vh;
overflow: hidden;
}
.hero__title {
margin-top: calc(50vh - 2em);
text-align: center;
}
.wrapper {
padding: 1em;
}
<link href="https://necolas.github.io/normalize.css/3.0.2/normalize.css" rel="stylesheet"/>
<div class="hero">
<h1 class="hero__title">Look at this</h1>
</div>
<div class="wrapper">
<h2>Hello earthling</h2>
</div>
I have had the same question some time ago, I did fix it by using this tutorial:
http://responsivedesign.is/resources/javascript-jquery/back-stretch
Backstretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.
it is very easy to use and it does the job:)
CSS
#header{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Javascript
<script type="text/javascript">
$.backstretch("/path/to/image.jpg", {speed: 150});
// Perhaps you'd like to change the image on a button click
$(".button").click(function() {
$.backstretch("/path/to/next_image.jpg");
});
</script>
don't forget to copy this in the html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script type="text/javascript" src="/jquery.backstretch.min.js"></script>;
anyway, check the link:)
edit: http://srobbin.com/jquery-plugins/backstretch/ even simpler
I am creating a website, however I would like the website to have a full screen div (Like this: http://peet.io)
However I do not know what is wrong with my code, I have tried googling several times, but still no help.
This is my code:
http://jsfiddle.net/6p3dk2yo/
.introduction {
height: 100%;
width: 100%;
background: url('../images/header.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: absolute;
}
That is my introduction css code.
However it only show's my test div and not my introduction div which is what I need the most, is not showing, the 'test' div is making it hidden.
If anyone knows how i can fix this then please say:)
That is because setting height: 100% simply means "stretch to the height of element's content". And since it is an empty <div> element, a height of 100% simply computes to 0px.
What you can do though, is to use vw or vh units when it comes to dimensions (see browser compatibility and support) that have to be calculated relative to the viewport size:
.introduction {
height:100vh;
width: 100%;
background: url('../images/header.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
http://jsfiddle.net/teddyrised/6p3dk2yo/3/
Even better, is that you can also use max-height or min-height to control how big the element should be when it comes to smaller, mobile viewports through the #media conditional statement.
Your introduction div has a height: 100%; but it's 100% of nothing.
If you put some content in your div, like in this JS Fiddle then you'll be able to see the background image.
If you don't want any content in the div, then you should change height to a fixed pixel amount, like height: 500px;.
Your div technically has no content, so it is in fact 100% of 0px (content size). If you want to stick with the percentages and keep things responsive as you are, why not throw an actual image in that div containter? Check out this Jfiddle. -> http://jsfiddle.net/6p3dk2yo/
<body>
<section class="introduction"></section>
<section class="test"><img src='../images/header.jpg' alt='header' /></section>
<script src="javascript/smoothscroll.js"></script>
</body>
I'm brand new to this site so apologies if I'm stepping on toes but I've been trying to create a page where you are met by a fullscreen header, with a height and width of 100% of the viewport, however you are still able to scroll to the content below.
Perfect example of this is http://www.bklynsoap.com/
I have tried to achieve this with purely CSS by creating a 100% height and width on an absolute positioned Div, but this hides the content below.
No need for absolute position in this. Your example uses javascript to change the size of the div and the content inside.
You can do this with pure CSS
Example:
<html>
<body>
<section class="fullscreen"></section>
<section class="other-content></section>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
}
.fullscrenn {
height: 100%;
width: 100%;
background: url('../images/fullscreen.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have a background image that re sizes with the window. I want the words on my background image to represent links. My idea was to create divs that were empty and transparent and position them over the words in the background image and when that div was clicked, the corresponding link would be activated.
I am having trouble positioning my divs. I can't seem to get them to stay aligned with their word in the background image when the window is re resized.
HTML:
<div id="wrapper">
<div id="bespoke">
I want this to always be aligned with "Bespoke" in the background image
</div>
</div>
CSS:
html {
background: url(main.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
}
#wrapper {
position: relative;
top: auto;
margin: auto;
text-align: center;
height: auto;
}
#bespoke {
}
Demo:
http://jsfiddle.net/DzC3V/1/
Note: if jQuery is the best way to accomplish this, I don't mind using it.
In my opinion you won't need jquery. CSS and positioning with percentages should do the trick.
Try the following
#yourObeject {
position: absolute;
top: 30%;
left: 30%;
}
it's tricky to position your div properly. but it should work
if this doesn't fit your needs you should really try doing an image Map and resize it with jquery
i think the best way to do this is to use media queries, its a bit of a drag, but it will work
You can set the image in a div
And you can put the empty div on top of it using the z-index:1
So u have better control on both