Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
Hi there my backgoround images on my webpage are fuzzy and out of focus.
body{
background: url('../images/def2.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
I'm getting my images from google images so don'y know the reliability of quality.
They're probably a lower resolution than your screen, so background-size: cover is stretching them too large.
Too add on to crunch, always make sure your images are large enough! Stretched images look unprofessional, so remember to always start with the largest file as your source, and make copies as you go when you need to scale it down so you'll always have the large image when you need it.
The reason that images look blurry when scaled up is because they lack the information to display on a larger size. You can eliminate this need by using vector graphics, but that isn't a feasible solution for a photograph, and is aimed more towards logos and the likes.
If you don't have the original image on hand, try contacting your photographer for the original. You can scale up if necessary, but anything beyond ~%30 increase will be somewhat visible.
If it's of any use, I did a reverse google image search to find similar images of the same fellow you've shown in higher resolution. It's not the same photo, as it appears that your picture is a still from a video, but it may be of use. Just keep in mind that these images are probably copyrighted and not approved for legal usage on your website.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
For the past few days, I have been looking at the various ways websites upload background images to their website via CSS.
When it comes to images which can be duplicated endlessly, such as plain stripes, I have noticed that some websites upload a small 'sample' of the image and then duplicate it with a CSS input such as background-repeat: repeat-x; rather than uploading a larger version which scales according to screen size.
Is this, primarily, a page load speed optimisation exercise, or is there another reason why somebody may wish to do this other than due to the original image being small in the first place?
Is this, primarily, a page load speed optimisation exercise,
Yes.
is there another reason why somebody may wish to do this
A repeating image doesn't have a maximum height or width that using a larger non-repeating image would impose.
This question intrigued me too, I just did a quick Google and from what I found most sites seem to be saying it takes a longer amount of time to download a dimensionally large image than repeat it.
http://smallbusiness.chron.com/making-background-images-load-faster-31826.html
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Alright so i have been having a hard time when applying background image to my html code. The problem is that if i make my browser too big it will zoom in too much and if the window is too small it will cut off half of the website. I want to figure out a way to make it so that whenever i resize the browser window the background would also resize depending on the browser window size.
Thanks in advance!
CSS has a background-size property that you can set.
background-size: contain; would probably do the trick.
Below are some more resources regarding hte CSS property background-size.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
http://www.w3schools.com/cssref/css3_pr_background-size.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
contain is most likely what you are looking for.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Hi I have seen many different sites using different techniques on background scaling and I was wondering which is more professional. I am building a website and I would like to make sure it is professional. I have seen some background images that are scaling and resizing to the size of the browser, and I have also seen backgrounds that have a fixed image based on your resolution that does not resize when the browser is resized.
So my question is which of these is more professional in the business world?
If there are other methods that are more professional I think many of us new programmers would like this information to start on the proper path to professionalism.
Thank you for reading and taking the time to answer this question.
"and I was wondering which is more professional" - Actually this depends on your requirements of the application you are developing.Your perception of "professionalism" on a social networking site may be different from an ERP solution.
What I suggest you is first understand the requirement right.If you are new to ajax and JavaScript , be knowledgeable of them because most of the re-sizing stuff works with them.And then study the themes used in reputed places.
Sometimes this may be useful to you http://www.developphp.com/list_php_video.php.
Try with "background-size: cover" it's a new css3 prop but it's unsupported on some mobile devices. So you must integrate it with some javascript fallback. With that setting the aspect ration is conserved and also the image always fill the container. Some fix is this..
.myclass {
background-image: url('blabla.png');
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='blabla.png',sizingMethod='scale');
}
...but this is not the most professional way
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
It almost seems like a no-brainer, but I wanna get a second opinion. I am designing a project for a client where it will output PDF's that can be printed. As a customer of theirs, you can customize the cover page with an uploaded image. When printing the cover page, is it better to have them try and upload as big an image as possible?
Seems like the answer would be yes, but I have never (web) designed for print before. I've either done one or the other.
Any thoughts on this would be greatly appreciated.
When you say "big", it's unclear what you mean. Do you mean file-size? Image dimensions? I'll speak to both.
The actual printing of the page doesn't have anything to do with file or image-size from a bandwidth load perspective.
The bigger the file-size, the longer the upload time, the greater the bandwidth use, and the larger the .pdf file size.
The smaller the dimensions of the uploaded image and the lesser of the resolution means that if the image gets resized to fit a certain area, then the image will appear pixelated both on the web and in print. Conversely, you can resize down an image and not lose quality.
Hope my perspective is helpful :-)
I think you should resize the image while uploading in order to it fits the PDF page cover, except if the image is smaller than the page.
You don't need to get huge images for medium sized pages.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I came across some nice CSS designs that I am trying to replicate on my own site. The problem is, the designs were presented as images...screenshots of the actual page. This means I've been trying to replicate the design in my own CSS.
Here is the problem: the text I am rendering is colored as grayscale (all rgb values are equal) in my CSS, but if I screenshot my page and zoom in, you can see colored pixels throughout the text. The original design does not have those...it is perfectly gray, and thus, looks much more smooth.
Here is the original at regular size (very smooth looking):
And here it is zoomed in (notice that all pixels are grayscale):
Now, here is my attempt at regular size (notice how rough it looks):
And zoomed in (see all the colored pixels):
What on earth in happening here? How can I achieve the smooth look of the original design, without the colored pixels?
The original author might have been using a different system when they took the screen shot. Mac and Windows machines smooth fonts differently. There is a -webkit-font-smoothing property, but I think this will only apply to Safari on Mac in the future.
I often experiment with text-shadow to achieve smoother looking fonts. Results vary depending on how much contrast there is with the text and background.
How To Properly Smooth Font Using CSS3