I have this background image. Its working fine and fills up the entire screen vertically on desktop and tablet correctly. When it gets to mobile however it starts to scaled down a bit and shoe these nasty white bars.
Here is the css:
html {
/* The image used */
background-image: url("../../assets/imgs/MenuBackground1.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Try changing background-size to 100%
Related
I got this background image to be the right size when the page is normal, but when I add enough text that you have to start scrolling, the image doesn't cover the whole page. The image is taller than it shows, but when I change the height, the image just gets bigger, and I can't figure out how to show the rest of the image. Does any one know how to do this?
.bc-grnd-img {
background-image: url("https://media.istockphoto.com/photos/little-cute-dumpy-frog-with-green-background-picture-id694848990?k=20&m=694848990&s=612x612&w=0&h=9tBJzT_Efz0GqI30Je72vvkqtSCQ5Deb_RRCdsG-e0c=");
filter: blur(8px);
-webkit-filter: blur(8px);
height: 500px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 0px;
z-index: -1;
}
<div class="bc-grnd-img"></div>
You have wrong in css
we don't use link for image, download image
.main{
width: 100%;
background: linear-gradient(to top,
rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(1.jpg);
background-position: center;
background-size: cover;
height: 109vh;
}
Your CSS is very heavy and will lead to a slow website in the end, use Photoshop or Photopea to make sure your image is 1920px wide, it can be as tall as you like but remember the larger the image the slower the internet!
This code should then suit.....
background: url("img-name.jpg") 50% 50% no-repeat;
background-size: cover;
50/50 should keep your image centered no matter how tall it is and for a static background we perhaps wouldn't want that repeating.
As a bonus, this also works good for Parallax backgrounds but the image should then definitely be taller than the display area.
I made a hotspot login site that has to work for devices with smaller resolutions / screens so my background has to scale with it. Now the problem is that is scales, but it sticks to the top of the screen. So when the resolution gets too small, there is a white void beneath the image. This is what is looks like: https://imgur.com/a/0jAprjJ
This is my CSS code for the background styling:
background-image: url("img/AngelntrÃĪgtGelb.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
What you can do is a media query for screen sizes less than, wherever it breaks and use this for your image size:
#media only screen and (max-width: 600px) {
body {
background-size: auto 100vh;
background-position: center;
}
}
This is my fiddle
See this screenshot from my desktop
Now see this screenshot from my mobile device
The image will always cover the whole screen in desktop, at any size of the window.
But in mobile, it is not covering the whole screen,why?
Code
<h1>Hello</h1>
CSS:
body {
margin: 0px; /* Background Image Margin will be 0 */
background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /* Background Image Linki */
background-repeat: no-repeat; /* Background Image Will not repeat */
background-attachment: fixed; /* Background Image will stay fixed */
background-size: cover; /* This will make background image width 100% and height 100% */
}
Your body isn't 100% of window height, so if you add
html, body {
height: 100%;
}
Then it covers the entire page. Demo: jsfiddle
Update following css
body, html {
min-height:100%;
height:100%; /* if not working try vh instead of % */
}
body, html {
min-height:100%;
height:100%; /* if not working try vh instead of % */
}
body {
margin: 0px; /* Background Image Margin will be 0 */
background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /* Background Image Linki */
background-repeat: no-repeat; /* Background Image Will not repeat */
background-attachment: fixed; /* Background Image will stay fixed */
background-size: cover; /* This will make background image width 100% and height 100% */
}
<h1>Hello</h1>
background-size: cover makes the background image as large as possible without stretching it, you can read about it here w3schools:
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
The reason that in mobile your background is not full height is because your body tag has no height.
body {
margin: 0px; /* Background Image Margin will be 0 */
background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /* Background Image Linki */
background-repeat: no-repeat; /* Background Image Will not repeat */
background-attachment: fixed; /* Background Image will stay fixed */
background-size: cover; /* This will make background image width 100% and height 100% */
height: 100vh;
}
<h1>Hello</h1>
JSFiddle
I have a website on github pages, which works perfectly on any desktop browser. However, two of my background images will not show up on mobile devices (I've only tested iPad and iPhone, it could just be IOS). I have tried adding media queries to make sure the background-attachment property is set to scroll on handheld devices (I had read this was sometimes the problem). I also have media queries that ensure the images are not too large to load. Here is my html:
<div id="image-1" class="background-image"></div>
<div id="image-2" class="background-image"></div>
Here's the css:
#image-1 {
background-image: url('imgs/coding.jpg');
}
#image-2 {
background-image: url("imgs/game.JPG");
}
#media only screen and (min-width: 500px) {
/* For mobile phones: */
#image-1 {
background-image: url("imgs/coding-large.jpg");
}
#image-2 {
background-image: url("imgs/game-large.jpg");
}
}
#media not handheld {
.background-image {
background-attachment: fixed;
}
}
.background-image {
opacity: 0.8;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 100% 100vh;
height: 85vh;
}
If I change 100vh to 100%, then the images load, but they are terribly stretched vertically. Any suggestions?
You can either:
use a fixed position, with a background position center center: see "CSS background-size: cover replacement for Mobile Safari".
This page refers to a background-attachment: fixed; as well, while remining use that viewport values (such as vh and vw) are technically supported on iOS 7 but simply do not work, hence the rodneyrehm/viewport-units-buggyfill project.
or (less elegant), use fixed size for media with a given size: see "Background image not displayed properly on iPad and iPhone"
Seems iPhones disregard #media rules for handheld devices (See here Do iPhone / Android browsers support CSS #media handheld?
). And giving background-size property of 100% 100% will make the image stretched if the image is not square.
So you can use max-width media query to detect mobile devices and set background-attachment as scroll. And either use background-size: cover or background-size: 100% auto
It looks like you have competing heights with your background-size attribute and your background height attribute. Check out CSS-Trick's post on background-sizes for a better implementation. Since it looks like you want to cover the width of the page with the images, go with background-size:cover instead. Hope this helps.
Use this
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image rescale based on its container's size */
background-size: cover;
So I have an image (w:1638px h:2048px) and I set it as my background using the background-image function and then trying to give it width: 100%; and height: 100%; attributes. It stretches the image across the screen horizontally but then it makes me scroll down for the rest of it. I want no scrolling. Is there a way to crop/position a portrait orientated image to look proportional and fill the screen as a background properly? Should I make it a different size in Photoshop, something landscape orientated?
I have a regular <div class="bgimage></div> in the html and the css looks like this:
.bgimage {
height: 100%;
width: 100%;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
Is there something I'm missing or not doing correctly? I'm using Dreamweaver CS6 and viewing it in the latest versions of Firefox/Safari.
Thank you.
If you're setting the background for the whole page, just style the body element instead:
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
http://jsbin.com/rugom/2