I have an HTML page where I have an image as a background. Whenever I view the page on my iPhone 6, the background image sometimes doesn't cover the whole page. This happens only about 20% of the time and doesn't happen after reloading the page. It always happens when I clear cache and website data on my phone. This is the CSS to set it to the background(I got it from the web by searching "how to make a good CSS background image")
html { /*Copied from the web*/
background: url(img/sea.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
background: none;
}
The url of the page is msolonko.net/signup.php.
As you can see on the image, there is white space below the login button. Why does the image work correctly sometimes, but rarely not? How can I fix this?
EDIT:
Changing resolutions of the image has no effect on the issue.
I do not want the image to repeat. It looks good with just one image if the issue doesn't occur.
Also, if I cannot fix this issue, I will make the image only appear if it is a computer. If the device width is less than some threshold, I will just use a background color instead of image. I am still hoping I can fix this though.
Two solutions: Make it so the image repeats (turn no-repeat to repeat) or..
Increase the height of sky.jpg since sky.jpg is not tall enough to fit the phone.
So if I'm not mistaking (which I probably am), you should make your sky.jpg image 960 x 660 pix. Some average phone pixel resolutions at http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/
This should help! Sorry if it didn't.
EDIT: Did you at least try the techniques? (I'm new to Stack, I can't comment)
edit the image before you load the page, make the correct size for it and there you got.
be recursive.
(i have the same problem and do it this way becouse i found no way to find a solution in the code.)
i use programs like photoshop and corel.
I got it! I was learning some CSS... CSS Code:
body {
background-image:sky.jpg; /*or whatever*/
}
Should work...maybe.
Related
I am using Bootstrap, HTML and CSS for my website. I built it on my Macbook Pro, and now when I move to my desktop monitor (which is much larger), there seems to be a large white space on the right side of the web page due to the monitor being much larger in width.
The height is working perfectly fine and it scales well, but it seems like right when the image ends (width) the site wants to keep going, but is not stretching the image to fit the larger monitors horizontally (width).
How can I fix this?
Image of Website Problem:
This is what I came up with so far.
body {
background-image: url("http://i.imgur.com/vDF3k2s.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
overflow: auto;
font-family: Lato;
}
html {
height: 100%;
}
I appreciate all suggestions, thanks!
Without your HTML code, I can't exactly replicate what you are doing, so I will have to assume some things... always dangerous! LOL!
Anyway, I will first tell you what I believe is going on, then I will explain some things to do to combat that, and then I will provide the actual code, based off of the code you have already supplied.
Ok, I believe what is happening is that since you haven't specified where within the body you want the background image, by default the browser is giving you the image at 100% of it's original size and floated to the left.
In order to get a fullscreen image, which is what I believe you are shooting for, I would first place the background image within the "html" tag instead of the "body" tag. Second, I would let the browser know that you want the image to be centered and not to repeat. Then I would tell the browser that you want the image to "cover the screen".
So, with that said, here is the code for what I just explained:
html {
background: url("http://i.imgur.com/vDF3k2s.jpg")no-repeat center;
background-size: cover;
overflow: auto;
}
I should explain that I have deleted the -webkit, -moz, etc. portions of the code. That is because "overflow" is compatible with so many older versions of the most commonly used browsers, that to write that in your code is unnecessary.
Also, when I'm creating a fullscreen background image on a page, I usually use "background" instead of "background-image" and I have the "overflow" as "hidden". I can't honestly tell you if that is a "best practice" or if your writing "overflow" as "auto" is, but I also don't know what other content you plan to put in place, etc.
Anyway, I hope my solution helps and please hit me back to let me know!
I have been doing some HTML and CSS and have come across a problem that I hope someone can help with.
I am trying to make a full width picture cover a whole Div without a significant loss of quality to the picture.
An example of what I am trying to achieve is similar to the following websites:
https://sso.godaddy.com/v1/?app=mya&realm=idp&
http://www.ugle.org.uk/
Both websites use a picture which quality seams to not dissolve through being expanded or contracted.
How is this done?
Any one know of any tutorials or have example code that they could show me. I have created a picture that can vary to the browsers window size but its quality is awful when the browser changes size.
Thanks in advance everyone!
Very easy. There are a few ways to do this, but the most straightforward is to set the image as the background of the div, with the background size property set to cover: background-size: cover;
For example (CSS):
div {
background: url('path/to/your/image.jpg') no-repeat center;
background-size: cover;
}
Edit: Addressing image quality:
You'd need to make sure your background image is equal to or larger than the div's dimensions. If it's smaller - it'll be stretched to fit (this degrading the quality).
I´m trying to code a header image similar to the one on this page: http://www.eltrecetv.com.ar/nosotros-a-la-manana. Pay attention to what happens to the image of the guy when you resize the page. It stays in the same place, it´s always centered and it doesn´t crop (a little at the bottom but not that much anyway). Here´s my humble and succinct code: (and here´s a fiddle too: https://jsfiddle.net/wvep5ga1/ )
html:
<div class="outer">
</div>
css:
.outer{
background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
background-size:cover;
background-origin:padding-box;
background-position:top center;
min-height:386px;
}
The problem I find is when I resize the browser window the div compresses to the point where it´s only visible the face of the man, as oppposed to what happens in the original page where you can always see the shoulders. I don´t know if i´m explaining this correctly, but basically on window resizing the height of the div varies much faster than what it does on the original page and that affects the rest of the page, beacuse the image of the man must always stay in the same place and must always have the same aspect ratio. I have the aspect ratio issue solved, but i´m having problems with the height of the div compressing and expanding too much on windows resize.
The original page was done using Drupal 7, I think. But what i want is a css snippet that does just that. I know it´s possible, i´ve tried everyhting for hours but i missing something. I know the original page uses many images with different resolutions but that´st no the issue.
Hope somebody can help. I look forward for your comments.
Thanks in advance!
See updated fiddle: https://jsfiddle.net/wvep5ga1/3/
just add
background-size: 100%;
background-repeat: no-repeat;
Like this:
.abc{
background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-origin: padding-box;
background-position:top center;
min-height:386px;
}
I have a hard time scaling my image correctly with css and html.
The css looks like this:
#media (max-width: 979px) {
.header-wrapper {
height: 388px;
background: url("../images/taikuri.jpg") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then the html looks like this:
<header id="header" class="header">
<div class="header-wrapper"> <img src="./imag/taikuri.jpg"
alt="taikureita" width="2050" height="812"/>
I would like to scale the image somehow to get faster loading speed.
GTmetrix page test gives me this advice:
The following images are resized in HTML or CSS. Serving scaled images could save 49.1KiB (69% reduction).
I haven't been able to figure out the right way to do this so I have to ask for help.
What you're attempting to do is reduce the file size of the image so that it loads faster.
What your solution posted in your question is attempting to do is reduce the display width and height of the image, so it shows up on the screen as a smaller width and height. However, the same image, with all its massive file size, is still being loaded in. The browser is just shrinking the look of it for you.
And looking at your code, you're setting a background image to the same thing as the image that you've written into your html. This doesn't matter, as the image will cache, but just so you know you're basically embedding your image twice.
Think of it this way: I'm 200lbs. If I take a picture of myself and shrink it, I'm still 200lbs in real life. That's what you're trying to do. BUT... if I lose some weight, then I'm smaller in real life and won't hurt so much if I sit on you. That's what you're asking how to do. Make sense?
In this case, open the image up in photoshop, make a copy, resize it to a smaller width (you can do this from Image > Image size) with the contain aspect ratio control turned on. Upload that image and use it instead.
Another, better, option is to
Delete your <img> out of your html, as it's duplicated and huge. You can recreate that scaling effect in css.
Set up more media queries to use different images at different media widths.
I see you're already using this big image at a max-width of 979px. If that's the case, set up an image that is width 979px and use it in this media query. If you need to get bigger, create a larger image that has higher jpg compression and create a larger media query to handle it, something like the following code (note I renamed your image as examples of setting up different images):
#media (max-width: 979px) {
.header-wrapper {
height: 388px;
background: url("../images/taikuri_979w.jpg") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
Here's a second media query, with a larger image. Note I added a padding-top as a percentage with a min-height so that the top area would scale respectively to the width of the browser):
#media (min-width: 1000px) {
.header-wrapper {
height: auto;
min-height:388px;
background: url("../images/taikuri_really_big.jpg") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top:35%;
}
}
If you don't have photoshop, you can resize your image using a service like this: http://www.picresize.com/
I've never used this but it looks like it does what you want. Also, if you're on a Mac, the Preview app has an image resize. Not sure what might be on Windows or Linux, though, sorry!
Scaling the image with CSS will not give better loading speeds.
The reason for this is because your browser don't download the image at the size you specify in your CSS. The browser downloads the image at full size, and then show you the image at whatever size that you specified with your code.
You should have a look at tinypng.com or compressor.io for compressing of your image. This would help you with loading speeds. Compressing an image, makes it smaller in file size. It will take less space on the hard drive, and would also be less for the server to transfer to the user.
You could use javascript to load the image after the page loads, and put something like this before the < / body > tag.
<script>
var width = document.getElementById('header').clientWidth;
if(width>=1000)
{
document.getElementById("imageid").src="./images/BigImage.jpg";
}
if(width>500 && width<1000)
{
document.getElementById("imageid").src="./images/MediumImage.jpg";
}
if(width<=500)
{
document.getElementById("imageid").src="../images/SmallImage.jpg";
}
</script>
Of course this would assume that the browser has javascript turned on.
I don't believe my question is exactly as the others posted on this site, so if i missed one apologies in advance to this excellent community.
My question is this:
i've setup a hero container below the nav container in order to give it an 100% but when i reduce the size of the browser the image (in the background of the hero container) scales down and doesn't take up the full dimensions of the container. I don't mind if the image shifts due to the fact that it's increasing and decreasing in scale i just don't want it to become so small that the foreground content gets left without a background
Here is a screen cast that illustrates what's happening exactly: http://youtu.be/lLT3VzHOlPU
Here is a codepen: http://codepen.io/MARS/pen/fEuKr
Thanks to anyone who takes the time to help out, much appreciated.
The video is a nice idea to describe your problem. :) You can use this CSS on the <div> with class hero-container. The background image will always fill the whole space but will never get distorted:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
See here, which browser support the CSS3 Background-image options
Demo
Try before buy