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
Currently working on a mobile version of a website. I have this:
body {
background-image : url("my_image.png");
background-repeat : no-repeat;
background-size: 100%;
}
The background image fills the whole device screen. Question. What size in px (width) will be best for smartphones? Currently thinking to go with a width for the background image of 640px. Is this ok? Any suggestion please?
Using background-size: cover or contain is usually the best way to go.
Big backgrounds could get cropped, though, so you could set background-position or a different background for different screen sizes with media queries, but the above usually works fine.
background-size properties:
cover
Scale the background image to be as large as possible so that the background area is completely covered by the background image.
contain
Scale the image to the largest size such that both its width and its height can fit inside the content area.
Source
640px is the width of an iPhone, so it's one of the smallest widths. A Galaxy Note 3 for example has a width of 1080px. If you want to use an absolute image size, I would suggest to use a bigger one.
However best practice in my opinion would be to use a background image that stretches itself to match the screensize, like described in Sajad's answer.
Related
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 1 year ago.
Improve this question
I'm currently making my website responsive and making sure it looks good on mobile/tablets. While doing this I discovered that my fixed navigation bar, with a width set to 100vw, don't cover the width of the page if I pinch-zoom out (a friend also informed me that the navbar didn't cover the width of his phone screen even before he zoomed out).
Before I zoom out:
After zooming out
I've tried finding a solution online but came up empty handed. I also tried changing my navbar from 100vw to 100% but the problem still stands. How could I go about fixing this?
Your width of the navbar is set at 100vw, which means 100% of the viewport is covered which is exactly your case because the navbar covers the whole screen before pinching it out.
Try setting your navbar width to 100% instead of 100vw.
Also, there is an issue with your image sizing which is why you are actually able to pinch out in the first place.
So correct your image dimensions or change your navbar width to 100%. Both should work.
Correcting the image dimensions is preferable.
If you are using something like Bootstrap, you don't need to add the width in the first place.
Please share the code if further clarification is needed.
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 4 years ago.
Improve this question
What is the correct method to use an image for different sizes. Like Thumbnail, Large Devices, Medium Devices and Small Devices? Mainly I'm using Bootstrap. I have used .img-responsive class. Is there any easy way to use the same image for these different screen sizes except calling different size images for different screen sizes? What is the correct common method to do such work?
Use the same width for all devices. Place the image in different column structures for different window widths (desktop, mobile).
For example, if you want an image to be 50% width of its container on desktop, and then 100% of its container on mobile, wrap your image in a single div that contains both respective columns:
<div class="col-md-6 col-sm-12">
<img src="example.png">
</div>
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 5 years ago.
Improve this question
So I need to make 50px x 50px photos in a row. All of them have different resolutions. My question is how to scale photos down to make them 50px x 50px with centered content, just like in Photoshop where I can make a 50x50 square and move it to choose where to copy.
50x50 square:
ON THE LEFT: This is the original photo for example it is 136px x 266px
ON THE RIGHT: This is how photos should look like
Typically it would be best to crop your images in something like PhotoShop before uploading them to your website. This is due to the fact that the user will have to download the photos, and smaller dimensions for a photo means a smaller filesize (and thus a quicker download for your user).
If you have to crop the photos on the website itself, you can use the clip property in conjunction with position: absolute:
img {
position: absolute;
clip: rect(0px, 80px, 200px, 0px);
}
<img src="http://placehold.it/200">
Note that the clip property is deprecated (because you should be cropping the image beforehand), and may be removed at any time.
Hope this helps! :)
From my knowledge this is not something possible in css because css can only resize and move the image, but cannot crop the image. The image on the right is not simply resized but is cropped to focus on the persons face and that is something css cannot do as it can't modify the image content. You can find good free online cropping tools to resize your image or use the cropper that comes with windows 10 in settings when you view an image.
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
I'm just a starter in html/css and I don't really know what should I use , I made some sites using % and it looked good in the beginning on my laptop screen (wide) but when I accesed the site at school the site was all looking weird cause the width was smaller and the height was bigger.
So my question is : Should I use px instead of % and what would be a good width to make a site with px.
900 or 960 px is almost always the way to go for your main content. You can however use percentages for some parts of your websites.
Like stackoverflow, you could have a main bar on top which has a 100% span across the page, whilst your content (the questions/answers) are within the 960px grid.
Take a look at http://960.gs/
Keep in mind you should also have to consider other screen sizes, so it might be wise to look at responsive webdesign ( http://en.wikipedia.org/wiki/Responsive_web_design )
However, it's up to what you want to accomplish to make the right decisions on what to use.
Pixels:
If you use pixels then, its an absolute measurement and will be rendered irrespective of the browser's window size.
Percentage:
Percentage is a relative measurement which will be rendered with respect to the browser's window size.
If you want to show some element to always appear in a fixed size, then use pixels, else use percentage.
The answer about the good width for a website is very well answered here:
What is the best absolute width for a webpage?
Refer the following article too. It will be helpufull to you.
http://www.sitepoint.com/best-size-website/
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
Every website has elements and their width and height must be set. here is my question how do we can set the width and height such that the website works correctly on different monitors with different width/height? is px preferred to %? when we should px and when we should use %? what are advantages and disadvantages of each one?
It all depends upon the type of your website and how you want to response to various screen resolutions.
Just using % and px is not enough, there are other unit for text size for example em and pt etc.
Also we have media queries
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
http://www.htmlgoodies.com/html5/client/common-techniques-in-responsive-web-design.html#fbid=YIeEpYZXBt-
Relevant SO Question Responsive Layout - PX, EM, or %?
Use px when you want to specify a fixed/static height in pixels. % refers to the percentage total of the elements parent. Using percent means the web site will adapt when the browser is resized wheras using pixels it will not.
Which one you choose really depends on the look and feel that you are trying to achieve.
it all depends of what kind of web you plannning to do.
Many web pages use a container with a fixed width on pixels (like 960px). then it's extremely easy if you have a well-made predesign on photoshop, illustrator, indesign, etc to work with pixels. These webs though doesn't work well outside PC screens as if you have a window width smaller than the container the content won't be show unless scrolling horizontally.
Now, if you want your content to adjust to any horizontal width you should use % but imo it is much difficult and you need a clear idea what you want to show on each possible width before starting working.
If you decide to go for a "responsive" design... the work will be harder. I recomend you to use something like:
#media screen and (min-width:600px) {}
#media screen and (min-width:800px) {}
#media screen and (min-width:1024px) {}
#media screen and (min-width:1524px) {}
in your CSS to tweek your classes wahtever necesary for each width (or platform). (there's also many other usefull #medias