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>
Related
I wanna know how I can make the div's background responsive
My code:
height:500px;
background-image: url(../images/Doctor.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
The result:
When i zoom out :
The problem is when I zoom in or out I want the doctor image fixed in zoom not in scroll
In order to make it responsive, try the following snippet. Do not set width, height, or margins.
body {
background-image: url(https://cdn.dribbble.com/users/394/screenshots/196178/attachments/3368/background-circles.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
span {
color: tomato;
font-weight: bold;
font-size: 2em;
margin: 0;
padding: 0;
position: absolute;
top: 50%;
}
<span>Responsive Background<br/>Image</span>
try this
height: auto;
background-image: url(https://cdn.dribbble.com/users/394/screenshots/196178/attachments/3368/background-circles.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
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 tried so much! But I think my problem is a little more special than the other solved questions:
Here is the side:
fruehstarter.com
I have a problem with the background on mobile devices.
My client wanted a special background, it's fixed with 100% width and height. On a mobile device you need to zoom in to identify the content.
But if you scroll down and the browser line disappears, the background-image jumps because of the new height.
Either I have the jumping background or I have a white border at the end of the side with the height of the browser line.
Hope you understand my problem and can help me. Thanks a lot!
EDIT: What I've tried:
background:cover not scaling on mobile browsers
Background image jumps when address bar hides iOS/Android/Mobile Chrome
And I've tried to give my div ".bg" and ".container-fluid" another positions (changed to "absolute" and "relative") or give another div the background.
EDIT 2nd:
Here is the CODE: jsfiddl
HTML:
<div class="container-fluid">
<div class="bg"></div>
<div class="row">
<div class="linkbox"></div>
</div>
</div>
CSS:
html {
font-size: 10vh;
height: 100%;
font-family: 'Titillium Web', sans-serif;
}
body {
-webkit-overflow-scrolling: touch;
min-height: 100%;
width: 100%;
position: relative;
}
.container-fluid {
height: 100%;
overflow-x: hidden;
position: absolute;
width: 100%;
}
.row {
height: 100%;
position: relative;
}
.bg {
overflow: hidden;
position: fixed;
width: 100%;
height: auto;
min-height: 10rem;
padding-left: 15px;
padding-right: 15px;
margin-left: -15px;
margin-right: -15px;
z-index: -1;
background: url('http://fruehstarter.com/wp- content/themes/fruehstarter/library/images/fs_klingelschildMobil6.jpg') no-repeat;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-position: center center;
background-attachment: fixed;
}
JAVASCRIPT:
jQuery(document).ready(function () {
if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android)/g)) {
$('html').css('font-size', Math.ceil($(window).height() / 10));
$('.bg').css('overflow-y', 'scroll');
$('body').scrollTop(1);
}
}
It would be helpful to share your code.
I think
background-attachment: fixed;
in addition is what your are looking for.
Example:
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
Update
Try this:
body {
background: url('http://fruehstarter.com/wp- content/themes/fruehstarter/library/images/fs_klingelschildMobil6.jpg') no-repeat;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
I think defining background inside the body, in your case, is more comfortable.
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
The image I selected is too big and does not fit the page vertically or horizontally. here is what I have:
<style>
.jumbotron {
height: 500px;
width: 100%;
}
.jumbo-container {
background-image: url('../img/challenge2.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
</style>
<body>
<div class="jumbotron">
<div class="jumbo-container">
</div>
</div>
</body>
link to the picture I want: http://fc09.deviantart.net/fs71/f/2010/347/0/2/life_challenges_by_eddieretelj-d34scch.jpg
If I understand correctly you might need to use this take a look at my fiddle background-size: 100% auto; http://jsfiddle.net/mhussa19/r0pq2zra/2/
.jumbotron {
height: 500px;
width: 100%;
}
.jumbo-container {
background-image: url(' http://fc09.deviantart.net/fs71/f/2010/347/0/2/life_challenges_by_eddieretelj-d34scch.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
width: 100%;
height:100%;
}
background-image: url('../img/challenge2.jpg'); height:100%; width:100%;
should work