Develop Reference

CSS - Show Entire Image as Background Without Cropping

I'm trying to setup a div with a background image with some text on top of it. The background image needs to stretch the entire width of the viewport, which I've been able to do successfully. This is my CSS:
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem I'm having is that it isn't showing the full height of the image. The image is being cropped at the top and bottom. I want the image to show it's full height and the user needs to be able to scroll down to see more content below the image.
Is there a way I can show the full image without cutting the top and bottom off?
Thanks!

Remove the fixed and instead of cover use contain. If you want a specific size though I would define a height in my css.

You can use background-size: auto 100%;
I updated an example in fiddle to see how its looks.
http://jsfiddle.net/4ozmn00t/2/

.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://);
background-size: 100% 100%;
}
setting the width and height of background-size to 100% will fill the div

Remove the fixed from the background.
url() no-repeat center center

Background image is stretched in mobile safari

I am using background image for landing page and it works fine on desktop browsers, Android browser but fails on iOS browsers... After looking for answer i thing problem is due to height of the contained div which holds the background image.
I resized the height of the container div using jquery 'var wheight = $(window).height();'
I thing this get length of the whole document and gives feeling of image being streached.
I have setup example on fiddle this may come right on iOS as i have not tested after adding the height using jQuery.
What is the best way to handle this height issue.
SHould i use screen.height(); or there is a way around for this
http://fiddle.jshell.net/dtphzdxy/3/

Try this in css section
html, body {
margin:0;
padding:0;
}
.bg-intro {
width:100%;
height:100vh;
position:absolute;
}
.bg-intro {
width:100%;
}
.parallax {
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.parallax-1 {
background-image: url("http://www.hdwallpapersos.com/wp-content/uploads/2014/07/HD-Wallpaper-Nature.jpg");
transition: height 0.85s cubic-bezier(0.725, 0, 0, 0.995) 0s;
}

Window height can be calculated with css using the vh unit. Fiddle: http://fiddle.jshell.net/dtphzdxy/5/
.bg-intro {
width:100%;
height:100vh;
}

Problems with logo not appearing on background image

I used photoshop to layer a logo over a background image. I have the background image set up that it is responsive. I set up a image map to use the logo as a main page link. I works well on two of the other pages of the site but this page is different because of the way the background image is set up. I thought I could play a trick by using a transparent image along with usemap. did not work. I am able to see the hand when I hover over the image map, but there is no logo there. the url is http://jandswebsitedesigns.com/test/index.html. an example of the logo on the upper left hand corner is http://jandswebsitedesigns.com/test/im-new-here.html. I had a similar problem with the im-new-here page. The "top-bar" div (which is transparent) that is on top of the upper part of the image, was covering the clickable area. Samuel responded and I added div#top-bar { height: 0px; } and it fixed it. worked nicely, but the same fix won't work here.
<style>
body {
background: url(images/cd-background-1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
min-height: 100%;
z-index: 1; }
</style>
<div style="text-align: center; height: 800px;">
<img src="images/trans.png" usemap="#logomap">
<map name="logomap">
<area shape="poly" coords="11,2,430,3,432,307,3,320"
style="outline:none;" href="index.html" alt="main page">
</map>
</div>

An image background may not appear if height and width are not set for the element that containing it
html, body{
width:100%;
height: 100%:
}
.my-div{
display: block:
width: // must give width
height: // must give height
background-image: url('...'):
}

First of all, I would recommend not using usemap, since it would make it harder to port your site to a mobile audience.
A better approach (which I personally use a lot and which would work on the design in question) is to make a div with full width and a given height, and to add the logo inside of it.
The HTML would look something like this:
<div class="header">
</div>
The CSS could then look like this:
.header {
background-image: url(...);
background-position: center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 800px;
}
.header .logo {
width: 400px;
height: 300px;
display: inline-block;
background-image: url(...);
background-position: center;
background-repeat: no-repeat;
}
It's something different from your current approach, but would fix your problem with the logo.
EDIT: I've put up a little fiddle about the problem, to give more context in case necessary.

Resizing a div background

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.

Use CSS (and maybe JavaScript) to make an element be square (or maintain a specific aspect ratio)

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.