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;
}
Related
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 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;
}
I am trying to make by background image fit to the screen, but I'm not sure what to add to my code.
<body background= "b.png">
If anyone could suggest what to put and where that would be great.
Apply the following CSS to your body tag in your stylesheet. You can change the value of the properties to match how you want you background to look.
body {
margin:0;
padding:0;
background-image: url(b.png);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: top center;
background-size: cover;
-webkit-background-size:cover;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
position:relative;
}
As mentioned in one of the comments, put this into the CSS:
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
On my landing page i want to set a background image that appears at exact section. My design is currently boxed, so I set up the background image to body, because I want the image to appear on whole width (not just inside my set box width).
body {
background-image: url("bg-image.png") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-origin: padding-box;
background-position: 0 0;
background-size: 100%;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: -1;
background-position: 0% 70%;
}
Now is the image appearing on 70% of my screen size. How can I set it up it will always appear on position 70% of my entire front page?
If I am setting it up like background-position: 0px 1200px; its not working and its also not responsive.
you could try this code :
body{
background: url(image/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
Let me know if it's what you want.
html {
background: white url(../img/bg.jpg) no-repeat center center;
min-height:100%;
background-size: cover;
}