I need my background image to be responsive. I have used background-size: contain and that seems to work fine but I need the height of my div to be responsive as well.
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center top;
background-size: contain;
height: 600px;
}
<div class="container">
<div class="bg"></div>
</div>
For now the height is 600px and based on the width of the screen, you will see a red background, which should not be the case.
I have tried background: cover, but it will scale the image. It should be 100% of the div but it should not be cut.
How can I fix this?
https://jsfiddle.net/mt386Ln0/
There is an easy solution without using JavaScript. Just add <svg> with specific ratio inside a container.
You must use image dimensions as viewBox <svg viewBox="0 0 960 628"></svg>
Example:
div{
background-image:url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg');
background-size:cover;
background-position:50%;
background-repeat:no-repeat;
}
svg{
width:100%;
display:block;
visibility:hidden;
}
.demo-1{width:100%}
.demo-2{width:40%}
<div class="demo-1">
<svg viewBox="0 0 960 628"></svg>
</div>
<hr>
<div class="demo-2">
<svg viewBox="0 0 960 628"></svg>
</div>
If you know the ratio of the image you can consider the padding trick:
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') center/100%;
}
.bg:before {
content: "";
display: inline-block;
padding-top: calc((628/960) * 100%); /* OR 65.42% */
vertical-align: top;
}
<div class="container">
<div class="bg"></div>
</div>
Instead of using background-size: contain, I used background-size: auto, which seems to work the way you want it to. Furthermore, I added some javascript to help with the resizing.
window.resize = function() {
var a = document.getElementById("a");
var b = document.getElementById("b");
a.style.width = "100%";
b.backgroundSize = "auto";
}
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center;
background-size: auto;
height: 600px;
}
<div class="container" id = "a">
<div class="bg" id = "b"></div>
</div>
Have you tried:
background-size: cover
this will allow the background to always cover the DIV - you might need to tweek the -
background-position: xxxxx
as sometimes the screen size your viewing the image on will mean setting a #meda query to get it right for each different deceive (i.e. mobile or desktop)
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Related
I have tried using media query to resize images on my page according to screen-size but it didn't work , need help.
Here is the relevant code of images in my html :
<body>
<div class="img certhtml"></div>
<div class="img certcss"></div>
<div class="img certjs"></div>
<div class="img certphp"></div>
</body>
</html>
Here is the relevant css pertaining to the class:
.img {
width: 836px;
height: 588px;
border: 4px solid #38b6ff;
margin: 5px;
background-size: cover;
background-repeat: no-repeat ;
margin: auto;
}
.certhtml {
background-image: url("images/SW_html5_foundations.png");
}
.certcss {
background-image: url("images/SW_css3_foundations.png");
}
.certjs {
background-image: url("images/SW_javascript_foundations.png");
}
.certphp {
background-image: url("images/SW_php_7_foundations.png");
}
This code allows the images to be seen clearly on full screen ,when screen width goes down below 776px then it buggers up the images.
I tried using
#media and (max width:776px) {
.img{height:60%;width:60%}
}
Tried lots of fiddling about but didn't work
but to no avail, would appreciate help, thanks.
If you have an image inside the div, for example
<div class="img certcss"><img src="https://example.com/sample.jpg" alt="you own alt"></div>
Then you should apply the correct CSS selector to the IMG, and also you need to correct the media selector
#media only screen and (max-width: 776px) {
.img img {
height:60%;
width:60%;
}
}
You could also do width 100% and add-in
.img img {
object-fit: cover;
}
Which will ensure the full responsiveness of the image.
I have this image in css and I want to add bootstrap class: img-responsive to it so it becomes responsive. It's easy if it's in HTML but how to do it in CSS?
#index-jumbotron {
height: 490px;
margin-left: 0;
margin-right: 0;
background-image: url("../images/Eiffel%20Sunset%203.JPG");
Thanks!
Here's how you can do responsive background images in CSS :
body {
margin: 0;
}
#index-jumbotron {
background-image: url(http://www.intrawallpaper.com/static/images/City_Landscape_Background_B5hx2zA.jpg);
background-size: cover;
padding-bottom: 46.128%; /* <- This value should be equal to height / width */
}
<div>Here goes your menu</div>
<div id="index-jumbotron"></div>
<div>Here goes the rest of your content</div>
(see also this Fiddle)
This works both with and without Bootstrap.
Try:
background-size:cover;
Or
background-size:contain;
I am developing a site where the users' profile image needs to display in a circle. There are many circles on this site and the circle size can vary.
I can display square images properly but with vertical and horizontal images I face a problem.
I have to display the image in a circle with the below criteria:
Suppose image size is 500x300. The image should crop 100px off of the right and left sides, so that the center of the image is shown. Now the image should be 300x300, centered. Then I need to make a circle from that image. OR hide 100px of the right and left of the image using CSS.
If image size is 300x500, then the top and bottom area should be hidden using CSS
What do I have to do to fix this? CSS-only answers are best for me, if possible.
background-size
MDN -
CSS Tricks - Can I Use
As the image sizes are variable, you want to make sure they cover the div as well as being centered within it.
Adding the border-radius: 50%; will give you the circle effect.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.one {
background-image: url('https://via.placeholder.com/400x200');
}
.two {
background-image: url('https://via.placeholder.com/200x200');
}
.three {
background-image: url('https://via.placeholder.com/200x400');
}
<div class="user one">
</div>
<div class="user two">
</div>
<div class="user three">
</div>
In practice, you wouldn't want to have a class for each image, so you'd specify it with an inline style in the markup:
<div class="user" style="background-image:url('path/to/user/img.png')"></div>
object-fit
MDN - CSS Tricks - Can I Use
A newer alternative is to use the object-fit property on a regular <img> tag. This does not work in IE or older versions of Edge.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
<img src="https://via.placeholder.com/400x200" class="user">
<img src="https://via.placeholder.com/200x200" class="user">
<img src="https://via.placeholder.com/200x400" class="user">
set the image as background, centered.
<div class="image"></div>
css:
.image{
width: 300px;
height: 300px;
border-radius: 50%; /*don't forget prefixes*/
background-image: url("path/to/image");
background-position: center center;
/* as mentioned by Vad: */
background-size: cover;
}
fiddle
If you are using bootstrap you have class img-circle to do this.
<html>
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>
First, please consider this fiddle.
I need to get some links over specific image regions, however those images are scaled according to the parent size...
that's why the link's position and size are relative(percentages) to the image.
But the fiddle shows the problem of this approach.
Is there anyway to get the .image-wrapper to "mimic" the img size and position after scaled?! Any trick or whatever?
Note: I'm OK with webkit-only solutions!
Edit 1
Actually I'm more focused in making the image fit on the content div, then making the image wrapper follow the resulting image size. Here's what I achieved so far...
Now I'm trying to get it working with the image centralized.
Here is the CSS skeleton for a solution.
Suppose your HTML looks like the following:
<div id="content1" class="content portrait">
<div class="panel-wrapper">
<div class="image-wrapper">
<img src="http://placekitten.com/200/250" />
</div>
</div>
</div>
<div id="content2" class="content landscape">
<div class="panel-wrapper">
<div class="image-wrapper">
<img src="http://placekitten.com/300/200" />
</div>
</div>
</div>
The HTML is similar to your original code except that there is an extra wrapper .panel-wrapper.
I used the following CSS:
.content {
background: lightgray;
display: table;
margin: 40px 0;
}
#content1 {
width:100px;
height:150px;
}
#content2 {
width:150px;
height:150px;
}
.panel-wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.image-wrapper {
outline: 1px solid green;
position:relative;
display: inline-block;
}
.content img {
display: block;
width: 100%;
}
.portrait .image-wrapper {
height: calc(100% - 2px);
}
.portrait .img {
height: 100%;
}
.landscape .image-wrapper {
width: calc(100% - 2px);
}
.landscape .img {
width: 100%;
}
.sample-link {
background:rgba(0, 0, 255, 0.3);
position:absolute;
display:block;
width: 50%;
height:20%;
top:5%;
left:5%;
}
I apply display: table to .content and display: table-cell to .panel-wrapper so that I can get a get the image centered both vertically and horizontally.
The .image-wrapper has display: inline-block.
To get the scaling right, you need to consider two cases depending on the aspect ratio of the image.
For portrait images, apply height: 100% to the .image-wrapper and the child img.
For landscape images, apply width: 100% respectively.
If you have a border on .image-wrapper, use the CSS calc() function to adjust for the 2px width of the borders.
What you need to do is use JavaScript/jQuery to determine the aspect ratio of the image and then apply the correct class (.portrait or .landscape) to the .content block.
See demo at: http://jsfiddle.net/audetwebdesign/SZjvJ/
A possible way is to work with image ratio and to adjust link ratio and margins according to image dimensions, with Jquery.
Have a look at this example fiddle: http://jsfiddle.net/t7Ucj/
The Js measures width and height of the image and according to its ratio, it works on the width or on the height of the link.
var width = $('#content2 img').width();
var height = $('#content2 img').height();
//vertical image
if(height > width){
var left = $('#content2 img').css('margin-left');
$('#content2 .sample-link').css({'width': width, 'left' : left});
}
else{
var top = $('#content2 img').css('margin-top');
$('#content2 .sample-link').css({'height': height*0.2, 'top' : top + height*0.4});
}
Then you can wrap all the instructions in a simple function obviously.
I know it can be tricky to put all the possible cases but i had a similar problem and solved in this way.
hope it helps
I want to cut image when body height < img height.
Here jsfiddle: http://jsfiddle.net/oboshto/AKsaS/
I need all height (1200+px).
img{
height: 100%; /* bad */
}
CSS:
body{
background-image: url('http://oboshto.ru/upme/shits/left%20%281%29.png');
background-position: top left;
background-repeat: no-repeat;
}
HTML:
<div id="wrapper">
SOME CONTENT
<div id="cut"> < - -CUT CUT CUT </div>
</div>
JsFiddle:
http://jsfiddle.net/AKsaS/3/
You could also place a position: relative on #wrapper, which would cut it off to the wrapper as well. JsFiddle for that: http://jsfiddle.net/AKsaS/4/