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
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 a problem with my website. The picture looks great on the desktop but on my phone it looks terrible because its zoomed in.
How can I solve this?
It don´t work with
background-size:cover;
The div with the background have two classes
.content{
color: white;
font-family: "Another Typewriter";
width:100%; height:1000px;
font-size: 300%;
padding-left: 15%;
padding-right: 15%;
padding-top: 10%;
text-align: center;
background-size: cover;
}
.parallax{
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#xyz{background-image: url(URLtoimage);}
Div Container:
<div id="xyz" class="parallax content">
<legend class="text-center content-headline">XYZ</legend>
Some text
</div>
How I've assumed you're using background-attachment: fixed; , it can't work on many mobile browser you must use media query to change it on scroll for little screen.
.parallax{
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 600px) {
.parallax {
background-attachment: scroll;
}
}
Maybe you could change it to background-size: contain when the screen width is smaller than 767px
use background-size:100% 100%; Check the snippet view.
body{
margin:0;
}
.bg-img {
background: url('http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg') no-repeat center;
background-size: 100% 100%;
min-height: 100vh;
width: 100%;
}
<div class="bg-img">
</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 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;
}