HTML div background stretch - javascript

How can i stretch background in div, while background would stretch to fit the screen resolution. In that div i want to have just navBar located top-right. Want this div just for intro page. There will be more content in others div behind that.

background-size:100%;
to your css underneath background-image.
choose the dimension that you want
background-size: 30px 40px;

div {
width : 100vw;
height : 100vh;
background : url('path/to-image.jpg') 50%/contain;
}
If you don't care about stretching and or distorting the image, then you can do what Melik said and set background value to...
background : url('path/to-image.jpg') 50%/100% 100%;

Related

Background image of div not fitting in screen

Here is my code. I am trying to display background images in a div tag on user click of links. But my background image is not fitting to screen (Putting height and width in css as shown below is at least allowing me to display the whole image but it is going way out of the screen). If I remove the height and width property from css, then the image is not displayed at all.
html ->
<body>
<div>
<ul>
<li>IT Spend</li>
<li>Assessments</li>
<li>Information</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
<li>2015</li>
</div>
<div id="wrapper" class="IT_Spend_2012"'></div>
</body>
css->
#wrapper { background-repeat: no-repeat; width:1500px; height:1100px;}
.IT_Spend_2012 { background-image: url('./img/IT_Spend2012.jpg'); }
.IT_Spend_2013 { background-image: url('./img/IT_Spend2013.jpg'); }
.IT_Spend_2014 { background-image: url('./img/IT_Spend2014.jpg'); }
.IT_Spend_2015 { background-image: url('./img/IT_Spend2015.jpg'); }
Have you tried percents?
#wrapper { background-repeat: no-repeat; width:100%; height:100%;}
height may get tricky here...
Background image is a background image, it is printed on element's background. The element itself is not resized by background.
What you can do is set the element's width&height to the background image's.
Also check these links: background-size, CSS3 backgrounds, CSS3 background-size.
If you are going to use background-size: cover then keep in mind that your image will not be fully visible like in the "background-size" link above unless, the div you display it on, has the same width&height aspect ratio as the image.

How to crop an image to fit the required height in the screen?

I have a large image whose height is bigger than the screen height. I have no problem with the width. I need to crop it so that the top 65% of the screen contains this image.
<body>
<img class="img" src="image.jpg" alt="img">
<p>Description</p>
</body>
If I write a CSS as below, the whole image gets compressed to fit in 65% screen. Moreover, if I resize the screen, the image automatically starts attempting to fit in the top 65%, making the whole screen look disturbed.
body, html { height:100% }
img.img { height:65% }
I want instead, the image to be cropped so that the leftover fits in the 65%, and then it stays that way. That is, if I now resize the window, let the vertical scrollbar appear. How can I achieve this?
(PS: I didn't want to give a fixed height because I want the webpage to be viewed in different devices like mobile phone and iPads too.
I think this is what I need:
Get the maximum height of the device (not the current height of the browser screen as the user might have minimized it for some reason)
Crop the image in such a way that it fits the top 65%, and display it
Keep the image size that way irrespective of the user changing the screen size
But I am not sure how to achieve it.)
Is this what you are seeking: http://jsfiddle.net/JjwMw/1/
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 65%;
width: 100%;
position: relative;
top: -22.75%; /* 65*35/100 */
background-image: url(http://placehold.it/1024x768);
background-size: cover;
background-position: center bottom;
}
Note that the image is now a background-image and is leveraging the background-size property which is not supported in IE8 (...who cares?). If the image cannot be a background image, you scale a div proportionally to fill the width using a padding hack (Proportionally scale a div with CSS based on max-width (similar to img scaling)) and have the inside image set to 100% width and height.
Maybe this can be useful to you:
http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
Also a search for css cliping property here or in google should bring enough info

Proportionately position element over responsive image

We have a responsive image, and there are elements positioned absolutely above the image - The elements positioned above the image need to stay in the exact same position proportionate with the image.
For example: http://jsbin.com/juremuqa/1/edit - I want the red circles on the cat to stay above the eyes. The circles do not have to resize, just cover the eyes no matter height or width of square element. The image should also scale proportionately.
Possible in just CSS? Or would you have to calculate label position with JS?
The positioned elements will be text in the end.
Add this to the Css.
.square .image {
background: url('http://animalkingdomz00.com/images/chartreux-cat-6.jpg');
width: 100%;
height: 100%;
display: block;
background-size: 100% 100%;
}
Try and tell me
If you don't need the red dots to do anything then the easiest solution is to replace the eyes with a transparent background and let the red background color shine through. Otherwise your going to need to play around with image positioning, right now your problem is that your keeping height and width both fixed which means when the image changes size it stretches in ways that change the height to width ratio making your eye percents fail. If you want that then SSS has the right idea.

Background Image with Full Height but responsive Width using Jquery

I have a background image with height 1400 and width 1000 , if i use any full screen background jquery plugin or code it crops from top or bottom and make it fit the whole screen but what i want is a plugin or code which will make sure the background image is responsive based on width of browser yet the full height of background image should be visible with scroll bar. currently it crops height from top and bottom.
if thats not possible atleast the crop should be only from bottom to maintain aspect ratio.
.background{
width: 100%;
height: 100%;
background-image:url(path/to/image.jpg);
background-position: top center;
background-size: cover;
}
This will only crop the bottom off, but make sure the image 'covers' the entire element.
Demo: http://jsfiddle.net/Rkf6Q/
To show 100% height, and have the width cropped, just set the background-size parameter to auto 100%
Demo: http://jsfiddle.net/Rkf6Q/1/

HTML DIV as the Background of another DIV

Is it possible to place 1 DIV inside another DIV and have the DIV inside have a larger width and height than the DIV it is contained within?
Sounds like a riddle....
Basically I want to have a container that the user can set the width and height of. They will have also selected and image, cropped it and resized it using jQuery. The image will be the background of the container, however due to the fact that the background image could be made bigger than the container I want it to be possible for the background to be a DIV that can expand beyond the height and width of its container - To crop the image if you like.
Do able?
Yes, if I'm understanding you correctly
the container would be relatively positioned, the div "inside" would be absolutely positioned inside it -
the absolute positioning co-ordinates and getting the image centered would be done something like this, at default,
#inner {
position: absolute;
top: 0 ;
left: 0;
right: 0;
bottom: 0;
background: url(theimage.jpg) no-repeat 50% 50%;
}
this should center the image in the user sized container
then the "cropping tool" would be able to manipulate the co-ordinates (in an equal measure I presume) either + or - those 0 values, -, negative, ones will allow it to expand outside the "outer" container
$('<div>').attr('id', 'innerdiv').appendTo($('#div'));
CSS
#div{
height: 100px;
width: 100px;
background: green;
}
#innerdiv{
height: 200px;
width: 200px;
background: red;
}
HTML
<div id="div"></div>
http://jsfiddle.net/bKetM/
A background image will be 'cropped' by default. For example, if I have a 500px by 500px div and then I put a 1000px by 1000px image as its background then it will show the top left 500px by 500px of that image as a background. I could set the background image to be centered like so:
background:transparent url(image.png) no-repeat center;

Categories

Resources