I have a responsive website but my background doesn't shows properly with phone (iphone6) i haven't tried with other phones. My background just zooming in my phone and looks terrible wanna make it responsive to fit on mobile screen.My website is www.orangegsm.hu I tried in css with :cover code that's the code what i'm using right now:
#background
{
background-attachment: fixed;
background-image: url("../img/bg1.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
min-width: 100%;
position: fixed;
width: 100%;
z-index: -2;
}
Thanks!
Related
I am trying to create a simple parallax image with background attachment to fixed. The image looks okay on android's mozilla browser in my android phone and looks okay in chrome developer's tool but when I look at it on my IphoneX, the image looks zoomed in and fixed.
Here is my code.
HTML:
<div class="weddingparallax">
</div>
CSS:
.weddingparallax {
background-image: url("imageurl");
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 80vh;
}
Try this:
.weddingparallax {
background-image: url("imageurl");
min-height: 500px; /* you can change it */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Do let me know if it works!
I have the following Problem with my website:
I have a hero-section with a background image. It covers the background and uses background-attachmend: fixed. This works and looks pretty nice on my desktop.
Whereas on my iPhone the background is very blurred and the background is not fixed. If I change it to default, background-attachmend: scroll, then the background shows the right part of the picture with good quality.
If the background is fixed, the background is sometimes completely black on iPhone, depending if I use background-size: cover or not.
I know that iOS does not like fixed backgrounds but there has to be a way to fix this right?
Hope you can help me!
Edit:
My Css code for my <section> "home"
width: 100%;
height: 100%;
background-color: #151515;
background-image: url(../images/titelbild-skydance.jpg);
background-repeat: no-repeat;
background-position: bottom 100%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-attachment: fixed;
min-height: 804px;
position: relative;
For a responsive background-image use the following CSS for your <section> tag:
section {
min-height: 800px;
width: 100%;
background-image: url("../images/titelbild-skydance.jpg");
background-position: 0%, 0%, 50%, 50%;
background-attachment: scroll, fixed;
background-size: auto, cover;
}
I've configured a full screen background image with CSS like this:
html {
background: url(image url) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: hidden;
}
When I first open the site in a mobile browser it looks great. However, if I select a form input and the mobile keyboard pops open then the background image resizes to match the height of the view that's above the keyboard.
Is there any way to keep the height of the background image static when the mobile keyboard opens? CSS only solutions are preferred.
Here's one way to achieve this with CSS variables. First add this to your <head>:
<script>document.documentElement.style.setProperty('--original-viewport-height', window.innerHeight+"px")</script>
Now you can set the min-height of your background element to var(--original-viewport-height).
Here's an example of the code that I'm using:
body {
min-height: 100vh;
position: relative;
}
body::before {
content: "";
position: fixed;
background-image: url(img.png);
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
min-height: var(--original-viewport-height);
left: 0;
top: 0;
will-change: transform;
z-index: -1;
}
(As you can see, in my specific case the background is on the ::before rather than directly on the body to solve the jittery scrolling issue with fixed backgrounds in Android Chrome.)
How can I have an image always covering all the screen regardless of monitor sizes? I have an image which has a height of 1000px and a width of 1000px. I don't want the image to be repeated but I don't want the scrolling bar to appear as well. If I use % the image is repeated, because it's inside a div. Thank you
I want the bottom of the image to be always at the bottom of the browser page and the div/image to be always the same size, even if I zoom with the browser
div {
width: 1000px;
left:0%;
right:0%;
top: 0%;
height: 800px;
text-align:center;
position: absolute;
background-image: url("image.png");
background-position: 50% 50%;
margin:auto; }
Try this out
div {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}
If you still want to know more, do check out this link
https://www.w3schools.com/howto/howto_css_full_page.asp
well if you want set up a full image background that is also responsive, you can do the following:
div {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you want to add this image as background image you can add the below css
div {
width: 100%;
height: 100%;
background: url(images/bg.jpg) no-repeat center top;
position: fixed;
z-index: 0;
}
Or if you want image to be show you can do the below things
<img src="images/bg.jpg" style="width: 100%;height :100%">
if (screen.width>=500){document.write(" body{zoom:78%;}");}
Here's the solution for my code, I needed to change the zoom.
I have a div with properties and values of:
#main {
height: 100%;
width: 100%;
background: url(image.jpg) no-repeat center center fixed;
background-size: cover;
}
And when i tested website on iPad,the image appeared to be blurry and centered incorrectly.What could cause that problem? Any solutions please