Develop Reference

How to prevent scaling of background image using CSS?

I have a high-resolution image that is the background image of a div. The div keeps rendering it at a smaller size but I would like to leave it unscaled. I don't mind that the background image is cropped to show only a portion of the image as long as that portion has the original size.
Javascript:
console.log(img.width) // this comes out 3840px
resultDiv.style.backgroundImage = "url('" + img.src + "')";
resultDiv.style.backgroundRepeat = "no-repeat";
CSS:
.img-full {//this is the class of the img
max-width: none;
max-height: none;
}
#bottomPanel {//this is the resultDiv that is scaling the background image
height: 30vh;
background: black;
margin-left: 10px;
margin-right: 10px;
overflow-x: auto;
overflow-y: auto;
}

you can specify the following CSS Property
background-size: cover;
this will make sure the background covers the whole element regardless if it was cropped or not, different that
background-size: contain;
that will scale the image to be fit within the element and to be fully visible

If you would like to prevent scaling by using background-size: cover.
This crops the background, and it never stretches for me.
More info about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

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

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.

Background image in HTML

Please guide me how to set background image of the web page to full screen.
Also I'd like to this image to show fullscreen for all size monitors and mobile devices..
Right now I have an image with resolution 1920 : 1080 and it only looks good on my 19" monitor with resolution 1440 : 900, but not good on 15.4" laptops and mobile devices.
Please help,
Thanks.

The proper solution to keep the ratio to your image is to set background-size: cover.

If the background-size: cover; doesn't work for you, for example, if the aspect ratio of the image is wrong, then you can try using background-size: auto 100% to ensure that the picture keeps it's aspect ratio as well as being tall enough to fit the screen.
I think it all depends on the resolution of the image and the maximum size you're willing to have it. But you will need to put media queries into your code to ensure there are no gaps when the screen gets too big or too small.

Use background-size:cover; will help you.

Use background-size: cover; for newer browsers:
<div id="bg"></div>
html,body{
height: 100%;
}
#bg{
width: 100%;
height: 100%;
background: url(image-path.jpg) no-repeat;
background-size: cover; /* also include vendor prefixes: you may google */
}
check compatibility using background-size
Better solution for full background image with responsive can be found here

You can tackle this in two ways:
New browsers, Use the CSS:
background-size: cover
Old Browsers, use a fake <img /> for the background.
.bg {z-index: 1; position: absolute; width: 100%; height: 100%;}

The background image property for chrome, mozile and opera browsers
body {
background: url(images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

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.