At the beginning I'd like to apologize for my english..
But cutting the chase - I doing my first website and I have a problem with div background. I want to changing the background resolution of div when I resize the browsers' window like this http://kamilnizinski.pl or http://rumblelabs.com - as you can see the background is fully changing resolution when you resize window. In my CSS file I have
.background {
height: 100%;
background-image: url('img/background.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center; }
so I get a part of a image without resizing. So my question is - how can I get this effect? I must change something in CSS or I must use javascript/jQuery?
Thank you in advance for your answers.
Simple example:
http://jsfiddle.net/xkaL2rho/
html:
<div class='background' />
css:
.background{
background-image: url(http://blendr.io/wp-content/uploads/2014/05/Polygon-Background-2.jpg);
background-size: cover;
height:100%;
}
html, body{
height:100%;
width:100%;
}
Another way is using javascript:
http://jsfiddle.net/xkaL2rho/1/
css:
.background{
background-image: url(http://blendr.io/wp-content/uploads/2014/05/Polygon-Background-2.jpg);
background-size:cover;
}
html, body{
height:100%;
width:100%;
}
js:
$(window).resize(function(){
doResize()
});
function doResize(){
var width = $(window).width();
var height = $(window).height();
$('.background').css({'width':width+'px',height: height+'px'})
}
doResize();
Im not entirely sure how the sites you mentioned are doing this, but I would suggest using the #media tag in your css
The media tag allows you define css rules based on the screen size.
Check out this Google fundamentals write up about #media and screen sizes.
Use CSS media queries for responsiveness
The reason I suggest using this is that you can control more than just images but anything like text or buttons by screen size.
Related
I'm making a site with big background design and I can't understand a couple of things.
Let me explain what I want to see. My web-site will be looking almost like this site
http://www.deepend.com.au/-/website-development-fox8
1. User loads the page
2. Height of every div in my page becomes the same as the height of the browser's window AND STAYS LIKE THIS, so your scrolling through my page becomes more logic.
So my question is: is there property in CSS that can get user's browser window? Or should I use JavaScript? If JavaScript, is there any jQuery plugin to simplify my job?
Thanks for your attention.
It's simply a huge image that is set as background of a div and sized as 'cover' in css which means its width determines its height based on its aspect ratio.
http://jsfiddle.net/f9yy8/4/
Demo: http://jsfiddle.net/f9yy8/4/embedded/result/
* { padding: 0; margin: 0; overflow:hidden;}
html, body { height: 100%;}
.txt {
background-image: url("http://elstika.com/images/2013/09/Pink-Tulips-Bouquet-Huge-Hd-Wallpaper.jpg");
background-repeat:no-repeat;
background-size: cover;
height: 100%;
color:white;
padding: 30px;
}
You can try to use position:absolute for the div's.
div{
position:absolute;
width:100%;
height:100%;
}
To cover 100% width/height of the user's browser window you can do this:
CSS
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
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;
}
div.scroll {
overflow: auto;
}
HTML
<html>
<body>
<div class="scroll">All your content inside here</div>
</body>
</html>
you can use simply this code:
div{
width:100vw;
height:100vh;
}
this code work like a charm... :)
jsFiddle
I want to create a full screen image that let's me scroll down the page like on the apple site here.
http://www.apple.com/uk
You'll notice that by resizing the browser the image stays full screen but it allows you to scroll down to the footer.
Can this be done in jquery or does it need javascript?
The only bit of code i have so far is this css code that make the image full screen:
.content {
height:100%;
width:100%;
background: url("http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and here's a fiddle fiddle http://jsfiddle.net/XXHgJ/
if you scroll down the footer shows but the menu stays still, this needs to scroll up.
If you just want to make a full screen element, you could do it with jQuery:
jQuery:
function setDimensions(){
var windowsHeight = $(window).height();
$('#element').css('height', windowsHeight + 'px');
}
//when resizing the site, we adjust the heights of the sections
$(window).resize(function() {
setDimensions();
});
setDimensions();
CSS
.content {
background-image: url(yourURL);
background-size:cover;
}
Living demo: http://jsfiddle.net/XXHgJ/7/
Is it something like this?... I did it with pure css after closely noticing that in the one for apple when the page resizes, the image size does not necessarily change.
<div>
<div style="position:relative; background:green; ">
<div style="position:absolute; top:30px; left:50px; margin:auto; width:250px; height:40px; text-align:center; padding-top:10px; background:black; color:#fff;">Menu goes here</div>
<div><img src="http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg" height="400" /></div></div>
<div style="background:#fff; padding:30px;">Footer</div>
</div>
See Feddle: http://jsfiddle.net/HZbAt/
Hope it helps
on my page i have margin-top 80px which pushes the content down is their anything i can add to the code so this does not happen like -80px? This is for the jquery script
EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/
I've seen this trick on many websites and I want to make it for a project of my own.
I have an image background.jpg that is VERY BIG, just to be ready for any screen size.
I wish to center the background image to the visitor's window.
I mean, while scrolling the window content will move but the background will stay in place - centered vertically and horizontally.
BTW most of the viewers will have old crappy PC's so it'd better not flicker, if it'll be JS.
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
put your image on the body background:
body{ background-image:url('your/image/url'); }
and put a div within the body:
<body><div class="div-body">{your site's contents}</div></body>
and create a css selector like this:
.div-body{
overflow:scroll;
width: 100%;
height: 100%;
display: block;
float: left;
}
try what is in this fiddle: http://jsfiddle.net/maniator/3RRYe/3/ demo
see if that works for ya ^_^
I have a div that I want to have the following characteristics:
Width = 50% of its parent element
Height equal to whatever it needs to be in order to maintain a certain aspect ratio.
I need to use percentages because the object will resize left-right when the browser is resized. I want the object to be resized top-bottom to ensure the object maintains the same aspect ratio.
I don't think there's any way to use pure CSS to do this, but does anyone know of a way? Alternatively, is there an easy JavaScript way to do this? (JQuery is fine.)
I figured out how to do this without js, though you need to use a transparent image.
Set up a html structure like:
<div class="rect_container"><img class="rect_image" src="rect_image.png"/>
<div class="rect">Your favorite content here</div>
</div>
Use a AxB transparent png for rect_image where AxB is the aspect ratio.
Meanwhile set up a stylesheet like:
.rect_container {width: 50%; position: relative;}
.rect_image {width: 100%; display: block;}
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}
The important thing here is taking advantage of the fact that images maintain their aspect ratio when resized in one direction. Meanwhile, we need a useable div, so we make the image display as block, wrap it in a div, and put an absolutely positioned div inside that. I distilled this code from something more complicated I actually tested. Works like a charm.
Here's a pure CSS version with no img tag:
<div class="apple_container"><div class="apple_icon"></div></div>
SCSS (include Compass to render the background-size):
.apple_container {
width: 50%;
}
.apple_icon {
padding-bottom: 100%;
background-image: url(/images/apple.png);
background-repeat: no-repeat;
#include background-size(contain);
background-position: center center;
}
CSS generated from the above:
.apple_container {
width: 50%;
}
.apple_icon {
padding-bottom: 100%;
background-image: url(/images/apple.png);
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: center center;
}
Results in a square element with a background image centered and fitted within it. This is good for responsive elements that you want to resize dependent on the user's device.
jQuery sounds pretty easy. Set the 50% width in the CSS, and then the following:
function onResize() {
var el = $('#element');
el.height(el.width());
}
$(window).resize(onResize);
$(document).ready(onResize);
Here you go: Detecting a browser resize using JQuery.