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.
Related
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%;
We have an image gallery with responsive sizes, using a ready made React gallery.
The images need to fit into a container with predefined, responsive height and width, but the images we're getting from the server are in different proportions and sizes: sometimes the proportions don't match, and sometimes the image is not big enough to even fill the container.
The product requirement is that an image should only be scaled up to 20% of the original image size to fit the container:
How do I even refer to the original image size in CSS? If I use percentage that would be referring to the container size... I stumbled upon Object-fit but it's not supported on IE.
I thought of using inline styles from JS but that would be complicated since this is responsive and the sizes would need to be calculated again on each window resize.
Thank you.
There can be two cases :
If you are taking <img> inside you container
.container
{
width:100%;
height:300px;
}
.container img
{
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
<div class="container">
<img src="https://regmedia.co.uk/2015/11/16/help_2.jpg">
</div>
If you are taking image as background of the container
.container
{
background-image: url('https://regmedia.co.uk/2015/11/16/help_2.jpg');
background-size: 100% 100%;
width:80%;
height:200px;
}
<div class="container">
</div>
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
I have a simple div and an IMG tag in it. The goal I have to achieve is:
Background image should be re-sized automatically according to screen width and height and no horizontal or vertical scroll-bars appear.
how can I accomplish this ?
------------------------------Code--------------------------
<div>
<img id="image" src="background.png" alt="Image not found"/>
</div>
Try using below CSS
#containerElem {
background: url(...);
background-size: 100% 100%;
}
and here #containerElem is the div or some element where the background is applied.
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/