Crop image and set as background without stretched and background image should be 50% cover image and 50% gray background
HTML:
<div class="main">
<div class="inner-wrapper">
//contain here
</div>
</div>
Css:
This .main class is background css property
.main
{
width:1024px;
margin:0 auto;
background:url(event_cover_img.jpg);
background-size:100%;
background-repeat:no-repeat;
background-color:#eceeef;
padding-bottom:50px;
box-shadow: 2px 2px 2px #969494;
}
.inner-wrapper
{
padding-top:150px;
float:left;
}
This image is wrong.
This image is right.
But image is starched so i need solution how it is solve?
you can try putting the image inside a pseudo class
.main::before {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: 0;
left: 0;
background:url(event_cover_img.jpg);
background-size: cover;
}
Use background-size: contain; if you don't want to stretched the image.
Related
I have used this approach https://stackoverflow.com/a/22211990
Only problem is that as soon as I enter text/content in div like this:
<div>abc</div>
That text appear under the image.
Code: https://codepen.io/labeeb/pen/JMxzQY
* {
padding: 0px;
margin: 0px;
}
.image {
background: url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat;
background-size: 100%;
background-size: contain;
height: 0;
padding-top: 100.44%; /* (bg image width/ bg image height) * 100*/
}
<div class="image">aaa</div>
You can give the image element position:relative and wrap the text in an element with position:absolute and top:0
*{
padding:0px;
margin:0px;
}
.relative {
position:relative;
}
.text {
position: absolute;
color: red;
top:0;
}
.image{
background:url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat;
background-size:100%;
height:0;
padding-top:100.44%; /* (bg image width/ bg image height) * 100*/
}
<div class="image relative">
<div class="text">aaa</div>
</div>
For me : you choice is a bad strategy, because de the padding-top will always impact your content. It is not the background job.
My solution : combine height 100vh and background-size cover.
*{
padding:0px;
margin:0px;
}
.image{
color: white;
height: 100vh;
background:url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat;
background-size:cover;
}
<div class="image">aaa</div>
I am trying to position a background image on the right side of the screen so that on medium screens one could see a half of it and on big ones the whole image (the image should not be scaled). The problem is that there seems to be no way to position left side of the background in the center of the div that has an unknown width.
And I can't use an img tag because it will result in a horizontal scrollbar.
EDIT:
It seems that there is no way to position a background the way I wanted, at least with background-position. You can offset a background from either side by writing background-position: top 50px left 100px, but you cannot do the same with position center. I wonder why.
Have you try to set a background size and a background position like so :
background-position: 100% 0;
background-size:50%;
You can test it here: https://jsfiddle.net/dL2u6co7/
Here is a working solution. I added another block with an absolute positioning inside the container.
.container {
margin: 50px;
padding: 10px 10px;
position: relative;
width:400px;
height:270px;
border:2px solid red;
}
.text {
float: left;
height: 200px;
width: 150px;
background-color: green;
}
.bg {
position: absolute;
top: 10px;
left: 50%;
width: 50%;
height: 250px;
background-image: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg');
background-position: 0 0;
background-repeat:no-repeat;
background-size: cover;
}
<div class="container">
<div class="text">
Text block
</div>
<div class="bg">
</div>
</div>
I have rotating banner images which I'd like to work (scale to fit) in any screen size.
When I use the following, it works:
.banner{
position:absolute;
width: 80%;
height: 30%;
top:5%;
left:20%;
background:#FFF;
border:hidden;
}
However, when I try to change the width to for example 40%, the images truncate rather than scale down.
When I tried to use, for example, max-width: 80%, or width: auto, the images totally disappear, even if I use a high z-index.
Setting both width and height on your images, will not care about aspect ratio. Just use width = 100%, and leave the height related to it (with the technique below).
And then set the container width to whatever you want:
#banner {
width: 100%;
height: 0;
padding-top: 30%;
background: red;
}
#banner-container {
width: 400px;
}
<div id="banner-container">
<div id="banner"></div>
</div>
If you want to show an image inside it, use CSS background-image with background-size: cover:
#banner {
width: 100%;
height: 0;
padding-top: 30%;
background: gray;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
#banner-container {
width: 400px;
}
<div id="banner-container">
<div id="banner" style="background-image: url('http://placekitten.com/800/500');"></div>
</div>
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/
Using web-tiki's responsive square grid lay-out's I have made some responsive squares with background images and text on it as follows:
HTML:
<div class="square bg imgautumn1">
<div class="content">
<div class="table">
<div class="table-cell months">
VISIBLE TEXT
</div>
</div>
</div>
</div>
CSS:
.square {
float: left;
position: relative;
margin: 0.25%;
width: 50%;
padding-bottom : 50%; /* = width for a 1:1 aspect ratio */
background-color: #1E1E1E;
overflow: hidden;
}
.content {
position: absolute;
height: 90%; /* = 100% - 2*5% padding */
width: 90%; /* = 100% - 2*5% padding */
padding: 5%;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.months {
font-size: 40px;
font-weight: 900;
}
.imgautumn1:before {
background-color: black;
}
/* For responsive images as background */
.bg:before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
content:'';
position:absolute;
top:0;left:0;
right:0;bottom:0;
}
.bg{color: #fff;}
/*CHANGE OPACITY ON HOVER*/
.bg:hover:before{opacity:0.2;}
Now I am trying to only make the background transparent, not the text.
While using the opacity: 0.3 property on the imgautumn1 CSS-class the image becomes transparent, but also the text in it. Other techniques like the one from this SO-answer with using a separate div for the background, or a technique with using the :after element from here for the background plus opacity make the positioning of the background go wrong (i.e., image not centred) and I find it hard to implement. Another possibility might be to place a transparent div square on top of the image, but I don't think that is possible with the background-image property.
I hope someone here can provide me with some help on how to only make the background transparent and not the text.
JSFiddle: http://jsfiddle.net/L7m5psrm/
Seems to work fine if you use the :after/:before solution (setting the image as the background)
You just need to make sure you apply the same background properties.
.imgautumn1:before {
background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/* For responsive images as background */
.bg:before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
content:'';
position:absolute;
top:0;left:0;
right:0;bottom:0;
}
Demo at http://jsfiddle.net/L7m5psrm/2/