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>
Related
I am editing a website template that has the homepage background image inserted in the CSS. The image is not responsive on mobile. The CSS points to a specific section and not the specific image. So I am guessing that is why it is not working. But I don't know how to point the responsive CSS to the image when it is in CSS and not HTML. How can I make the image responsive? Thanks!
```
#slider {
background: url("../img/helloquence-61189.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
width: 100%;
height: auto;
}
```
Try this
#slider{
background: url("../img/helloquence-61189.jpg") no-repeat;
background-size: 100% 100%;
}
Use background-image:contain instead of cover
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
#slider {
background: url("http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg") no-repeat;
background-size: contain;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
width: 100%;
height: auto;
}
</style>
<div id=slider>
</div>
</body>
</html>
Try this one
#slider {
background: url("../img/helloquence-61189.jpg") no-repeat;
background-size: 100% 100%; background-attachment: fixed; background-
position: center center; position: relative;
width: 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;}
The code below works just fine on desktops. But on mobiles the images doesn't centralize correctly
<style>
html, body
{
margin: 0px;
padding: 0px;
height: 4000px; /* just an example */
}
</style>
<div style="
background-image: url('img/bg1.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: contain;
width: 100%;
height: 100%;
z-index: 998;">
</div>
I want it fixed on the center of the screen.
It will work for you i guess.
<style>
html, body
{
margin: 0px;
padding: 0px;
height: 100% !important; /* #nicfo advice, for working on mobiles */
}
</style>
<div style="
background-image: url('http://www.w3schools.com/images/w3schools.png');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: 100% 100%;
background-size: contain;
width: 100%;
height: 100%;
z-index: 998;">
</div>
to stretch the image to fill the screen:
background-size: 100% 100%;
to fill screen without stretching the image:
background-size: cover;
source
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 beating my head against a wall on this one. I am trying to design a landing page, with a full screen picture background, that stops at the footer. So essentially I believe my trouble lies in creating a sticky footer..
I have been following the tutorial at this website.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<code omitted>
</head>
<body>
<div id="wrapper">
<div id="bkgcontainer"></div>
<div class="push"></div>
</div>
<footer>
<address>
<code omitted>
</address>
</footer>
</body>
</html>
My CSS:
* {
margin: 0;
}
html, body{
height: 100%;
background-color: black;
}
#wrapper {
width: 100%;
position: relative;
min-height: 100%;
margin: 0px auto -25px;
}
footer, .push {
height: 25px;
}
#bkgcontainer {
width: 100%;
height: 100%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
footer{
text-align: center;
margin: 0px auto;
color: white;
position: relative;
}
As far as I can tell, I have everything set right. But when I launch the website, 'bkgcontainer' takes up the full screen and the bottom margin '-25' is below the view-port. I'm at a loss, any ideas? Fixes or better ways, I'm all ears.
You can make the picture background take up 90% of the screen height, make the footer 10%, and pin the footer to the bottom of the page:
//remove `footer`
.push {
height: 25px;
}
//set height to 90%;
#bkgcontainer {
width: 100%;
height: 90%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
//change height to 10%, change to fixed position, and set bottom to 0. Oh, set width, too.
footer{
height: 10%;
text-align: center;
margin: 0px auto;
background-color: white;
position: fixed;
bottom:0;
width:100%;
}
See this jsfiddle to see how it looks.
Here's a completely different solution. Note that it doesn't contain a modification of your code, however, it is an entirely different solution (out of several solutions) to get a header and a footer
HTML:
<header>
this is header
</header>
<div id="content">
hello
</div>
<footer>
this is footer
</footer>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 60px;
background: green;
position: fixed;
top: 0;
}
#content {
width: 100%;
height: 100%;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Beautiful-Wallpapers-7.jpg");
background-size: 100%;
}
footer {
width: 100%;
height: 60px;
background: blue;
position: fixed;
bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/harshulpandav/7S4Xx/214/
You can try a position:fixed for footer class
footer{
text-align: center;
margin: 0px auto;
color: white;
position: fixed;
bottom:0;
width:100%
}
You should change the min-height value on the #wrapper to either a smaller percentage value or a minimum pixel value to allow for the footer to display. What you have done is tell the browser that you want that div to extend no less than the full screen.