I can't use background image because I'm using Django variables into CSS.
I looked at these
Image position equivalent to background position and
CSS background position 50% 50% does not work (the suggested answer here uses background-position, where I just want to use an <img> tag).
I want to replicate this into just an <img> tag. everything looks good except background-position: 50% 50%. What's the equivalent for that?
.main-header {
min-height: 40%;
background: url('../img/parallax11.jpeg') no-repeat center;
background-size: cover;
text-align: center;
background-position: 50% 50%;
}
So far this has worked:
.cover-img {
display: flex;
min-height: 30%;
overflow: hidden;
height:30vh;
width: 100vw;
object-fit: cover;
}
The equivalent of background-size: cover; would be:
img {
width: 100%;
height: 100%;
object-fit: cover;
}
The equivalent of background-position: 50% 50%; would be:
object-position: 50% 50%;
See the spec on MDN.
The object-position property determines the alignment of the replaced
element inside its box.
Initial value 50% 50%
.cover-inline-image,
.cover-background-image {
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.cover-inline-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cover-background-image {
background-image: url("//unsplash.it/400/300?image=0");
background-size: cover;
background-position: 50% 50%;
}
Inline image:<br>
<div class="cover-inline-image">
<img src="//unsplash.it/400/300?image=0">
</div>
Background image:<br>
<div class="cover-background-image"></div>
How the image looks be default:<br>
<img src="//unsplash.it/400/300?image=0">
object-fit can also 'clip' the image from coordonates via object-position
It would be here : object-position: 50% 50%; or object-position: center center;
see https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
Related
I am trying to incorporate a logo into a HTML page, but I cannot seem to get its height to auto resize to a max-height of 140px. When I do, the logo gets chopped off. See this for this example:
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
}
<div class="partner-logo">
</div>
How can I make sure that this logo can have 100% width but only a max height of 140px?
Please try applying background-size: contain property to your css. background-size: contain scales the image as large as possible without cropping or stretching the image.
For more about background-size property see mdn
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<div class="partner-logo">
</div>
This css code makes sure your background is always centered and always fit the size you give your div without it getting "chopped off":
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
background-position: center;
background-size: contain;
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
}
Try this, and you can resize the image. Just increase or decrease the padding value.
thanks and hope this help you.
.partner-logo {
z-index: 1;
padding: 20px;
margin-top: 20%;
max-height: 140px;
border: 1px solid #000;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
}
<div class="partner-logo"></div>
I am attempting to use 100vh to make a background-image always have a height per the size of the screen. What I am wanting to do is use the same image for each viewport and allow the overflow: hidden to make due of the access width. In essence, narrowing the image more vertically. However, my attempt is not working. The background-image is not adjusting to the 100vh.
Does anyone see what I am doing wrong?
#home-cover1 {
background-image: url("/images/home-cover1.jpg");
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
width: 100%;
position: relative;
}
#home-cover1-wrap {
background-color: rgba(0,0,0,0.3);
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
<div id="home-cover1">
<div id="home-cover1-wrap">
</div>
</div>
Change CSS I think background-size: cover; is Best
#home-cover1 {
background-image: url("https://optimumwebdesigns.com/images/home-cover1.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
position: relative;
}
Your #home-cover1 background-size lack the 100% of height, change background-size: 100%; to background-size: 100% 100%;
I try to set background image for body like as:
body {
background: url("http://beerhold.it/1024/800") center bottom;
z-index: 10;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
But It displays image only partially
html {
height: 100%;
}
add this as well. by default the height of html is set to auto so body height can't be 100% unless you set the height of html
Do u use height: 100%. This height based on height of inner content. Not a parrent block.
body {
background: url("http://beerhold.it/1024/800") center bottom;
z-index: 10;
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
Add this to your code
background: url("http://3ksks.com/pic.jpg");
background-size: 100% auto;
body {
background: url("http://beerhold.it/1024/800") center bottom;
background-size: 100% 100%;
background-repeat: no-repeat;
background-size: cover;
}
I have an image that I am using inside a Div.
I was wondering how I could center the image both vertically and horizontally at all times.
At the moment, when I stretch it, it seems to be stretching from the top left corner, is there a way I could have it centered at all times.
I have searched the web and tried various things but can not seem to get it to work.
this is my html:
<div class="container"></div>
here is my css:
.container {
width: 100%;
height: 75vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Any help or advice is appreciated, thank you in advance.
EDIT you can see that when I stretch the browser, it
seems to be stretching from the left, i want to be able to have the
Image centered so it stretches from all sides equally*
I got the solution..!
Here is your html file :
<div class="container"></div>
CSS file :
.container {
width: 100%;
height: 75vh;
position: absolute;
margin: auto;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
top: 0;
left: 0;}
Here is working demo
background-position: center will align your image in vertical and horizontal center.
Check below snippet:
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-repeat: no-repeat;
background-position: center;
}
<div class="container"></div>
.container {
width: 100%;
height: 75vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size:auto;
}
<div class="container"></div>
HTML :
<div class="container"></div>
CSS :
.container{width: 100%;height: 75vh;position: absolute;margin: auto;background-image: url("http://i.stack.imgur.com/2OrtT.jpg");background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;top: 0;left: 0;}
What I need (and failed) to do is website like in this picture:
Website need to be full screen and no scroll.
I'm not satisfied with results, because:
-when website is opened on vertical screens (smartphones) the bottom border is too big
-I also tried to make this background image to show fully top and bottom (I want to faces at top and bottom to be seen in full, not just partly), but I don't really know how to do it.
My CSS code:
html
{
background: #f36d32;
width: 98%;
height: 95.9%;
padding: 1%;
}
body
{
background: url(http://web-industry.eu/landing/img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
Ok, the border problem is solved by #imGaurav with such a code:
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
But I still can't figure out how to make both top and bottom faces to be visible.
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
So you just want the full size image to scale with different with different screen sizes?
In your css on the image div try:
background-size: contain;
If that is not what you are after, here is a link to all the property values you can use and test out.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Add below CSS to your HTML body
position: absolute;left: 0;top: 0;
Did you mean somethink like that?
<div class="vertical-container">
<div class="vertical-middle">
<img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png">
</div>
</div>
html,body {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
.vertical-container {
background-color: green;
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.vertical-middle {
height: 100%;
vertical-align: middle;
display: table-cell;
}
https://jsfiddle.net/org72bfb/1/
You can use the following css to solve the problem. Reference CSS-trick
html {
background: url(http://i.stack.imgur.com/zRKcX.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}