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
Related
Im using an svg as background for my html site. It works fine on most Desktops and a few broswers like Chrome on android, but in other browsers, there is this weird white blank area beneath the image. Any idea why this is happening? Here's what I mean - https://imgur.com/a/1ui6QeR
This is my styling right now. Any help would be appreciated.
html {
background: url('Bubble.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
body{
height: 100vh;
margin: 0;
display: grid;
place-items: center;
font-size: 10px;
}
It works completely fine on Chrome, but is offset to the right and bottom on firefox mobile, and is not displaying properly on edge mobile too.
Try to add 100% 100% instead of center center.
I would suggest to add the background image to a container in body rather to the html. Wrap your contents in a div and add image to that.
.bgImg{
background: url('https://www.w3schools.com/howto/img_forest.jpg') 100% 100% no-repeat;
background-size: cover;
height: 100%;
width: 100%;
min-height: 100vh;
}
<div class="bgImg">
</div>
Very new here and have never asked on this form before so forgive me for any confusion. I'm having an issue with a background image. It looks fine on my PC or when I turn my phone on it's side and view it in landscape; however, it's getting cut off and flat out not sizing right in portrait view. I can only get it to display the full image at the cost of white space at the bottom or the image being cut off. I've tried many of the solutions already posted on here to no avail. The three I posted here came the closest.
These cut off half the image but fill the screen in portrait view. However, they look good in landscape view.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: cover;
}
and
body {
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
}
this shows the full image but leaves the half the screen blank and explodes in landscape
body{
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vw;
overflow: hidden;
}
The image is 1920x1080. I've also resized the picture to 321x174 with the exact same results. Is this an image size issue? Is there a way I can get the image to display in the screen with no white space and without it being cut off? Please help I'm bashing my brains in with this.
Use code as below:
See fiddle
body {
width: 100vw;
height: 100vh;
background: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Try to use
background-size: 100% in your css i.e.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: 100%;
}
background-size: 100% applies to both height and width.
Additional Info
if you want to modify any one of them you can try background-size: 100% 50%;
you can read more about it here
https://www.w3schools.com/cssref/css3_pr_background-size.asp
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;
}
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 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!