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.
Related
I am having trouble with my background covering the whole page vertically, as it is only halfway now. This is what I am currently doing, and I am not sure why it is not working.
<div class="bg">
<div class="container">
some more code here
</div>
</div>
And in my CSS I have:
body, html {
height: 100%;
}
.bg {
background-image:url(myimage.png);
background-height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I have also tried a few solutions from previous posts on here to no avail.
Thank you for your time.
Your bg class will need a height value, otherwise it will only be as tall as the content that fills it.
Also, background-height is not a valid property.
body, html {
height: 100%;
}
.bg {
height: 100%;
background-image:url(http://www.fillmurray.com/800/400);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Change the image to your image and you should be good. See the attached fiddle.
https://fiddle.jshell.net/krqvhymn/
Your can also give your container class a height value. Depends on what you are looking to do
Unfortunately I can't comment, so I'm offering this answer as further help (although it doesn't answer your question):
You can take those background properties and use shorthand to place them all into one line, instead of separates. That would look like:
.bg {
height: 100%;
background: url(myimage.png) no repeat cover center;
}
There are two columns (second one is separated with other two columns ). I need to setup backgrounds to each of them, but the text still need to follow the side page alingment. I'm using Bootstrap. http://www.screencast.com/t/0YxmYlE76
Are you looking to replicate the screenshot provided with your question? If so in order to set a background image to each column you will need:
.div {
background-image:url(/path/to/image);
background-repeat: no-repeat;
background-position: center top;
background-size: cover; //this will ensure the background image always covers the width of the div
height: 500px; //change this to whatever height you want to set
text-align:left; //to align text to the left of the div
}
The above is one way of writing the CSS, you could use shorthand for the background image styles like below which is a less long winded way of writing the styles in your stylesheet:
.div {
background: url(/path/to/image) no-repeat center top;
background-position: cover;
height: 500px;
text-align:left;
}
Also note if you are building a responsive site, you can change the height for the div across different breakpoints.
If you want to achieve the layout in your screen shot using bootstrap, you can use something like this:
https://jsfiddle.net/rejw439u/
HTML layout would look like this.
<div class="row">
<div class="col-xs-8"><h1>The Contingent Workforce</h1></div>
<div class="col-xs-4">
<div class="col-xs-12"><h2>Heading 2 Article</h2></div>
<div class="col-xs-12"><h2>Heading 2 Article</h2></div>
</div>
</div>
you can then add classes like my fiddle link to add background styling etc.
Thanks for the help, I fixed the problem.
.col-sm-8 {
height: 600px
}
.col-sm-8:after {
content: " ";
position: absolute;
width: 66vw;
height: 100%;
bottom: 0;
right: 0;
background-image: url("image.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
I have a large image that I want to set as the background for a 404 page. I want the image to be 100% wide every time someone loads the page, so that if their screen is smaller the image becomes smaller, if the screen is bigger, the image stretches. The height should change based on the width, it doesn't need to be the height of the page.
I don't have the code for this. Would it be better to do it in the HTML file or the CSS file?
Can you possible create a JSfiddle that could serve as an example? Thanks!
Just add this to your CSS code...
body {
background-image:url('http://imageshack.com/scaled/large/268/gjb.png');
background-size:100%,100%;
}
And then create a body...
<body>
Dummy Code
</body>
jsFiddle
This is best left to CSS. Hard to tell without your code exactly, but the following should do what you want:
CSS
html {
height: 100%;
width: 100%;
}
body {
width:100%;
height:100%;
}
#background {
width: 100%;
height: 100%;
background-image: url('http://www.placekitten.com/200/200');
background-repeat: no-repeat;
background-size: 100%;
}
HTML
<div id="background">
<div id="content">
Hello world!
</div>
</div>
UPDATE
See the fiddle here: http://jsfiddle.net/DrydenLong/jywbd/
UPDATE #2
I'd like to point out, just in case those reading through don't see the comments on my post below, that while applying the background-image property directly to the body selector is simpler, it will also apply that same image to every page referencing that CSS file. Should you choose to use a single CSS file for your entire website, my code above will make it easier to have different background images for the 404 page and the rest of the site.
HTML Body content
none
CSS
html {
background: url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Demo(updated)
I think what you are really looking for is a background-attachment property.
body {
background-image:url('http://IMAGEURL');
background-attachment:fixed;
width: 100%;
}
You dont need to setup height property here, it's done for you automatically.
How about this:
body{background:url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) 0 0 no-repeat; background-size:100% auto;}
I have an image that is my header. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
It fills the full width of the page, but I had to specify a height for it show up. Here is the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 250px;
}
How do I make this image responsive? Right now when I expand the page it gets to the point where the pic is unrecognizable.
Didn't got your question quiet well, but I think you are missing a value here
background-size: 100%; /* 1 value is not wrong but you'll probably need 2 */
--^---
CSS
.wrapper {
background-image: url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Demo
As ralph.m suggested, if you are using this image as your website background, than use the background property on body element instead of div
You need to use following CSS to make the background responsive
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Reference Link
You need to think carefully about how you want/expect this to work. Without some actual content in the div, it will have zero height, which is why you needed to set a height on it; but in general, try to avoid setting heights. Presumably, if this is a "wrapper", it will be wrapping some content that will hold it open without you having to set a height.
As for the background image, you need to think about how it will behave. Do you just want it to appear in a strip along the top? If you use Mr Alien's solution, be aware that the image will stretch wider and wider and start to look odd. So we need some more information on what you are trying to do here.
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