I have a website that I developed, but I just got a screenshot from someone who was looking at it on a 2560 x 1600 monitor and it looks kind of ridiculous. What is a reasonable upper limit for screen resolutions to support? I'm concerned about negatively impacting load time by adding a huge image. How can I deal with this properly?
Solution 1: Maximum width
Use a container div with the following CSS:
#innerbody {
width: 100%;
max-width: 2000px;
margin: 0 auto;
}
Put all HTML in this container (wrap the container around all HTML), like this:
<body>
<div id="innerbody">
... your page ...
</div>
</body>
I would also add a nice subtle background color to the body, to mark where the 'page' ends, like this:
body {background: #eee;}
#innerbody {background: #fff;}
Solution 2: Mask the quality
If you are only worried about the (poor) image quality, you can add the container div (from solution 1) and use this CSS to overlay a hatch (diagonal lines). This is trick is often used for low quality full-screen video, but also works for background images.
#innerbody {
width: 100%;
background: url(/hatch.png);
}
Solution 3: Media queries
Got a big screen? Thou shall get a big image. Got a small screen? Thou shall get a small image. Sounds logical, right? You can achieve this by using media queries. This works like this:
#media screen and (max-width: 500px) {
body {
background: url(small_image.jpg);
}
}
#media screen and (max-width: 1000px) and (min-width: 501px) {
body {
background: url(medium_image.jpg);
}
}
#media screen and (max-width: 2000px) and (min-width: 1001px) {
body {
background: url(big_image.jpg);
}
}
#media screen and (min-width: 2001px) {
body {
background: url(really_big_image.jpg);
}
}
For each screen size ONE of these media queries will be true. That image wil be served.
To address your load time concern, one option is to use media queries so you can control the background image based on visitor viewport size. e.g.
#media (max-width: 800px) {
.div-with-background{
background-image: url("background-sm.jpg");
}
}
#media (max-width: 1200px) {
.div-with-background{
background-image: url("background-md.jpg");
}
}
#media (min-width: 1201px){
.div-with-background{
background-image: url("background-lg.jpg");
}
}
What is a reasonable upper limit for screen resolutions to support?
It depends on your visitors. If you use Google Analytics, you can get details on this by going to Users > Technology > Browser & OS and under 'Secondary Dimension' search for 'Screen Resolution'
Hope this helps!
Related
I'll describe the issue first then show how my media queries are setup.
The issue is that at exactly 978px wide, media queries are being ignored.
Here's what my site looks like at 977px wide
And here's at 978px wide
The background image disappears. The background image is being set with media queries so that it can load smaller images on smaller devices.
Here's the code (SCSS):
//Desktop
#include desktop {
background: $header-desktop-img;
}
//Tablet
#include tablet {
background: $header-tablet-img;
}
And here are the media queries being used for desktop and tablet:
$break-desktop: 978px;
//Desktop
#mixin desktop {
#media (min-width: #{$break-desktop + 1}) {
#content;
}
}
//Tablet
#mixin tablet {
#media ((max-width: #{$break-desktop}) {
#content;
}
}
As far as I understand, media queries are inclusive, so there shouldn't be a gap in the media queries, but for some reason there is.
If anyone has an idea how to fix this issue, please let me know.
If your browser is zoomed (as in 90%, 110%), this can cause rounding issues in certain cases which may be what you are experiencing. However, even if this is not the case, I would generally advise against using both min and max-width queries, and to instead go with a mobile-first approach. That is, to begin by writing the base styles to apply for the smallest possible screen, and then write only min-width queries that overwrite the previous breakpoints. In this approach, you are guaranteed not to have any gaps in your queries. For instance,
.some-selector {
width: 100%;
#media screen and (min-width: 768px) {
text-align: center;
}
#media screen and (min-width: 992px) {
width: 50%;
text-align: left;
}
}
Look at this page
There are 3 images on the right. When I look at my site with a mobile device, those 3 images stay there instead of centering in the middle, and so they make the page overflow/have a left-right scroll.
Any ideas on how I can fix it so that the images get centered when the page is viewed on mobile?
Thank you
Use a CSS media Query
The code used in the example you gave is
#media (max-width: 600px)
.about-us-images {
width: 100% !important;
}
The #media (max-width: 600px) part is telling the page to only apply those styles when a page width is 600px or less.
Adjust it to Your Preferences
You can adjust that to any size you wish or use the reverse to style any page that is 600px or wider using: #media (min-width: 600px).
Try this—
#media (max-width:600px) {
.about-us-text,
.about-us-images { width:100% }
}
Just add a class to the images div, and change the breakpoint as you wish. Looks like this now—
Here is what I had to do.
#media (max-width:600px) {
.about-us-text {
float: none !important;
width:100% !important;
}
}
#media (max-width:600px) {
.about-us-images {
width: 100% !important;
}
}
That did it.
Let's say I did this:
#media only screen and (min-width: 1366px)
.someBg {
background-image: url('someBg_BIG.jpg');
}
}
Now override the background image like this:
#media only screen and (max-width: 480px)
.someBg {
background-image: url('someBg_SMALL.jpg');
}
}
Question: For devices below 480px - Will the css first override the class then load only the overridden image? Or will it first load both the images and then decide which one will have more precedence?
When you use #media only appropriate images will be loaded.
If resolution more than 768px (for example) only one image will be loaded. If resolution less than 768px only one image will be loaded too. But if you resize window from 800px to 500px both images will be loaded.
You can check it in Chrome inspector.
img {
width: 400px;
content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg");
}
#media screen and (max-width: 768px) {
img {
content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg");
}
}
<img alt="">
You are using css #media queries which is used just to change styles according to screen size it doesn't effect anything to load.
So here if you use this css then both the images will load first and then show according to screen size.
you can try this
the css:
.somebg{
max-width: 1400px;
padding: 0;
margin: 0;
}
.somebg img{
width: 100%;
}
and in html:
<div class="somebg"><img src="URL HERE"></div>
I'm trying to figure out how to remove the image if the browser height is larger than 1080 pixels. For example android devices would have more than 1080 when the page loads and my image is loaded and it goes down to about 2/3 of the page and the rest of it is blank. I would rather it be gone entirely. How can I get rid of it. Here is how I am setting it:
body {
font-family: Helvetica;
font-size: 1.8rem;
background-color: #000;
margin: 0 auto;
background-image: url("../images/myimage.jpg");
background-repeat:no-repeat;
background-position:center top;
background-position:no-repeat;
background-attachment:fixed;
}
what I tried
#media screen and (min-height: 1080px) {
body {
background-image: none;
}
}
#media device and (orientation: portrait) and (min-height: 1080px) {
body {
background-image: none;
}
}
Try a media query!
/* standard*/
#media screen and (min-height: 1080px) {
body {
background-image: none;
}
}
/* orientation */
#media device and (orientation: portrait) and (min-height: 1080px) {
body {
background-image: none;
}
}
You will want to use a media query here, but you want to focus on max-height (not width... which is what media queries typically focus on, eg, http://unmatchedstyle.com/news/height-based-media-queries.php)
#media screen and ( min-height: 1080px ){
body { background-image: none; }
}
You should probably spend a bit of time learning about mobile responsive design in general, specifically because the media queries can come in handy with problems like yours. This is a very good place to start reading about them: http://alistapart.com/article/responsive-web-design/
Also note that certain JS plugins (eg Backstretch for example) stretch your image to whatever the background size happens to be... that might be another thing to look into, if you are interested.
Give the element containing the background image an id attribute then use that id attribute to assign the style to the background using an if statement with JavaScript.
<script>
var element = document.getElementById("elementHoldingTheBackground");
if (1080 < window.innerHeight ) { // returns a number
element.style.display="none"; // hides the element with CSS
}
</script>
That's the most simple way from the top of my head but I'm sure there are better ways to do it!
I'm also no expert. Please don't cook me over this. I'm only 18. I'm new to this!
Please tell me what you think.
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
I have a background image on my desktop site. However, because of the size it makes the mobile site slow and out of proportion. Is it possible to remove the background image for the mobile site or at least make it responsive?
Actually to hide background image here is the simple css:
background-image: none;
Here is the solution for mobile, i used media queries
HTML
<div class="bgimg" >
</div>
External CSS
/* Show in Large desktops and laptops */
#media (min-width: 1200px) {
.bgimg {
background-image: url('../img/your-eternity.jpg');
background-repeat: no-repeat;
height: 800px;
width: 1000px;
background-size:100% auto;
}
}
/*Hide in Other Small Devices */
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
.bgimg {
background-image: none;
}
}
/* Portrait tablets and small desktops */
#media (min-width: 768px) and (max-width: 991px) {
.bgimg {
background-image: none;
}
}
/* Landscape phones and portrait tablets */
#media (max-width: 767px) {
.bgimg {
background-image: none;
}
}
/* Portrait phones and smaller */
#media (max-width: 480px) {
.bgimg {
background-image: none;
}
}
Hope helps someone.
The code below is adapted from a great blog post by Tim Kadlec that walks through the various scenarios for conditionally displaying a background image.
For your scenario, the mobile version is set to match the width of its parent element. Depending on your layout, you may need to set/restrict the size of the element that #container is in.
If you elect to hide the background image on mobile, then the first style block would go inside the first media query and the second one could be eliminated. As popnoodles mentioned, posting some code would make it easier to provide a more specific solution.
<div id="container"></div>
#container {
background-image: url('images/bg.png');
}
#media all and (min-width: 601px) {
#container {
width:200px;
height:75px;
}
}
#media all and (max-width: 600px) {
#container {
max-width: 100%;
background-size: 100%;
}
}
You can use media query to specify different css rules for desktop version of site and mobile site .
Refere How to use CSS media query to scale background-image to viewing window
Using media queries depends on resolution of the screen we can set the styling .
Refere https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries for more information about media query .
You can also refer
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ for creating mobile version of your website .