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;
}
Related
So you'll see in my example, I have a gradient applied to html and a texture overlay .png on body which at first looks as expected.
I added a div with a large height to show my issue. Notice as you scroll down in the example you see the div overflow body and the texture overlay applied to body gets cut and almost has a parallax effect.
What I want is the html/body backgrounds to stay fixed so the content of body will scroll over them as expected while the gradient and overlay stay stationary and the size of the window. I'm thinking you'll notice what I'm talking about pretty easily with the example.
What am I missing here?
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
html {
background: radial-gradient(#bcd197, #325757);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body {
outline: blue 3px dashed;
background-image: url("https://i.ibb.co/NFvCfrj/texture.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
div {
outline: red 3px dashed;
height: 200rem;
width: 10rem;
background-color: rgba(0,0,0,.5);
margin: 1rem;
}
<div></div>
You're setting the body's height to 100%, so the background no longer render below the initial viewport height.
You must set the same div height to the body or mark body height to auto (default value).
html {
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
body {
height: auto;
width: auto;
}
html {
background: radial-gradient(#bcd197, #325757);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body {
outline: blue 3px dashed;
background-image: url("https://i.ibb.co/NFvCfrj/texture.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
div {
outline: red 3px dashed;
height: 200rem;
width: 10rem;
background-color: rgba(0,0,0,.5);
margin: 1rem;
}
<div></div>
I'm trying to make my background from website so if I'll go to mobile it will stretch it by height in center.
Something from that: large screen to that small screen
my code is:
body{
background-image: url("Tie_logo_shaders.jpg");
background-color: black;
background-size: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Try this code
.bg-img{
background: url("https://s-media-cache-ak0.pinimg.com/originals/27/3e/43/273e43a71854d8359186ecc348370f8d.jpg") no-repeat center center;
min-height: 100%;
position: relative;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
<body>
<div class="bg-img">
</div>
</body>
I'm trying to put in the right place a button which is a sibling with a div which have a cover background image. Every time when I stretch the cover div (to be "responsive" in some way), I want the button to be in the right place about this cover image. I mean that the cover div image has some graphics (feathers) and I want the button to be between them every time. How can I do that? Thanks in advance.
My HTML
<div class="cover_bgr"></div>
<div class="main">
Click
</div>
My CSS
.cover_bgr {
background: url(http://www.hdwallpapers.in/walls/colorful_background-wide.jpg) center no-repeat;
min-width: 100%;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
position: fixed;
top: 0;
left: 0;
min-height: 100%;
height: 100%;
}
.main {
position: relative;
margin: 0 auto;
z-index: 100;
height: 500px;
width: 100%;
}
.btn {
position: relative;
top: 30%;
left: 70%;
padding: 15x 5px;
background-color: #2a2a2a;
display: inline-block;
color: #fff;
}
My JSFiddle:
http://jsfiddle.net/onlinepch/w7v6L578/
Here's my JSFiddle
html, body {
height: 100%;
}
#background {
height: 100%;
background: url(http://phosproject.com/wp-content/themes/phos_theme/images/7.jpg); no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.button {
position: absolute;
top: 50%;
left: 50%;
width: 440px;
height: 460px;
margin-top: -230px; /* Half the height */
margin-left: -220px; /* Half the width */
}
On my website the background seems to have a white border around it and makes it look bad and i was wondering how i could remove it.
The html body has a default margin. You need to remove it.
body {
margin: 0;
}
Updated fiddle.
Im trying to have a background image set to cover the entire screen of the website, however there seems to be about 3-5 pixels of padding/white space no matter what i do. Can someone help me fix this?
here is the css i used:
.body{
position: relative;
background: url(images/home-bg.png) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden!important;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0px;
display: block;
box-sizing: border-box;
}
Add this to your css file
body{
margin:0;
}
You have a margin of 8px on the <body> element (not the div with an ID of body).
add this to your css
body {
margin : 0;
}