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/
Related
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
Here is the html:
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
I have the following for my background image:
.bg {
background: url("img/watercolor-bkgrd.png") center top / 100% 75% no-repeat
}
Now I would like to position the background image slightly lower from the top (for example: 100px) so that h3 heading will not stay on top the background image. How can I make it happen without modifying the html structure? Please note that I have to keep what is already in the above css such as centering the image horizontally, etc.
Use the background position offset value.
This does require that you know the height of the element above though.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h3 {
height: 60px;
background: lightblue;
opacity: .5;
}
.bg {
height: 100vh;
background-image: url(http://www.placebacon.net/400/200?image=0);
background-repeat: no-repeat;
background-position: center top 60px;
}
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
Just change "top" to "100px" or whatever value you want to move it by.
See this working snippet (where I use 80px):
.bg {
height:400px; /* for testing */
background: url("http://oi67.tinypic.com/28a11js.jpg") center 80px / 100% 75% no-repeat
}
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
This is setting the background-position properties inline in the same way that you are in your own code.
The problem is making sure the image is always under the <h3> element: You could make the <h3> element a fixed height and use the same value for your background position.
Unknown height of h3 element
If you don't know the height of the <h3> element, how about adding the image as background to the <div> underneath the <h3> like this:
.bg div{
height:400px; /* for testing */
background: url("http://oi67.tinypic.com/28a11js.jpg") center top / 100% 75% no-repeat
}
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
Youre looking for the css property "background-position" (Mozilla Docs)
This allows you to set the initial top and left positions of your background image in the div.
background-position: left top;
Just add the following to your .bg class:
background-position: 0 100px;
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>
here is my css:
html {
height: 100%;
}
body {
height: 100%;
width: 300px;
margin: 0px;
}
div.div1 {
height: 100px;
background-color: red;
}
div.div2 {
background-color: blue;
height: 100%;
}
<div class="div1"></div>
<div class="div2"></div>
the problem is that I want body to be float-based but without scrolling inside it.
The doctype is sctrict. Browser: ff3. Is it possible?
you can add one more div in div2 to display content in it.
actually that div will have 100px top margin to avoid top div overlapping on your content.
div2 will extend from top to bottom but top 100px won't be used by content div.
so trick is, keep div1's height same with content's top margin. then it'll be fine
html:
<body>
<div class="div1">div1 div1 div1 div1</div>
<div class="div2">
<div class="content">
<div2 test <br/>
<div2 test <br/>
<div2 test <br/>
<div2 test <br/>
</div>
</div>
</body>
and css will be something like:
html,body {height:100%;width:300px;margin:0px;}
div.div1 {height:100px; background-color:red; position:absolute; width:300px;}
div.div2 {background-color:blue; height:100%;}
div.content {margin-top:100px; float:left; width:100%;}
if you want to hide scroll completely just add overflow:hidden to div.div2
also you can give same background color to container make div2 look seamless.(it wont extend after scroll.)
div.content {margin-top:100px; float:left; width:100%; background:blue;}
cheers