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%;
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 would Like to make my Background Image Responsive
.page {
background-image: url("AA/NW.png");
background-repeat: no-repeat;
height: 650px;
width: 1228px;
position: relative;
}
Would this solve it
.page {
background-image: url("AA/NW.png");
background-repeat: no-repeat;
height: auto;
width: 100%;
position: relative;
}
You can use background-size property. The first value sets the width and the second value sets the height.
If you want it to be full-screen you can use it like this:
background-size: 100vw 100vh;
I want to create a div with background image and fit his height to 100%. I can achieve it with background-image: auto 100%;, but how to place the text above the image in this case?
Please check jsfiddle (try to increase the width of the window with the result to understand what I mean).
P.S. The solution should be responsive.
html, body {
height: 100%;
width: 100%;
}
body > .container {
background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: auto 100%;
width: 100%;
height: 100%;
}
<body>
<div class="container">
text
</div>
</body>
you could keep the container at least within the ratio of the background-image setting a max-width.
100vh equals the window's height
image is 1600px wide for 1100px of height. width's ratio from height is average 1.44 (1600/1100).
At the most, if the container is 144vh width (140% of height) content will stand hover the background filling up the entire container:
html, body {
height: 100%;
width: 100%;
margin:0;/* reset */
}
body > .container {
background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: auto 100%;
max-width:144vh;/* update*/
margin:auto;
border:solid;;
height: 100%;
}
<div class="container">
text
</div>
Other approach would be to clip the image as i commented earlier (let's keep here the elephant at middle and in sight):
html,
body {
height: 100%;
width: 100%;
margin: 0;
/* rset */
}
body>.container {
background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg');
background-repeat: no-repeat;
/* update*/
background-position: 100% 50%;
background-size: cover;
/* end update */
width: 100%;
height: 100%;
}
<div class="container">
text
</div>
Make the background-size:100%. You will get the responsive background-image with text
html, body {
height: 100%;
width: 100%;
}
body > .container {
background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
width: 100%;
height: 100%;
}
<body>
<div class="container">
text
</div>
</body>
I am trying to make an image responsive, but when I test it with different screen sizes, it cuts off part of the image.My CSS is pretty straight forward as below. Here is my codepen
.mainImage {
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
}
What am I missing or could be doing wrong?
You're setting all the "background-" parts first, and then defining "background" in a shorthand, which is overwriting. Change the order...
.mainImage {
position: relative;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
}
Or don't use the shorthand...
background-image: url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
You could also use background-size: contain instead of cover to force the image to display fully.
cover will completely fill the whole background.
contain will make sure the whole image is displayed inside the element
You also need to apply these background styling properties after the main background style.
So:
.mainImage {
position: relative;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: top center;
background-attachment: fixed;
}
try adding this:
background-size: 100% 100%;
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;
}