Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am trying to get the #media search to work but with not success. I am using the following code but the only image I can displayed is the headernew.jpg never the headerold.jpg so it seams that none of the media queries are working. I have tested on a 27in iMac and a iPad but both display the same background image. Any help would be appreciated.
Thanks Roger
position: absolute;
top: 0;
left:-50%;
width: 1344px;
height: 150px;
background-image: url('../img/headernew.jpg');
/* Only affects 1600px width */
#media only screen and (min-width : 1600px){ background-image: url('../img/headerold.jpg');}
/* Only affects 1200px width */
#media only screen and (max-width : 1200px){ background-image: url('../img/headerold.jpg');}
/* Only affects 900px width */
#media only screen and (max-width : 900px){ background-image: url('../img/headerold.jpg');}
/* Only affects 600px width */
#media only screen and (max-width: 600px){ background-image: url('../img/headerold.jpg');}
/* Only affects 400px width */
#media only screen and (max-width: 400px){ background-image: url('../img/headerold.jpg');}
background-repeat: no-repeat;
background-position: center center;
Your format is wrong, and I don't see any selectors in your code, which should look something like this:
#yourID {
background-image: url('../img/headernew.jpg');
}
#media only screen and (max-width : 900px) {
#yourID {
background-image: url('../img/headerold.jpg');
}
}
It looks like you were trying to put the media queries inside the selector block, but instead the query must wrap the selectors and rules you want to use.
Related
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 8 days ago.
Improve this question
What are the difference between these:
#media (max-width: 100px) { /* CSS Rules */ }
#media screen (max-width: 100px) { /* CSS Rules */ }
#media screen and (max-width: 100px) { /* CSS Rules */ }
#media only screen and (max-width: 100px) { /* CSS Rules */ }
#media only screen (max-width: 100px) { /* CSS Rules */ }
Thank you! :)
The only difference between these examples is the syntax.
#media (max-width: 100px) { /* CSS Rules */ } - this is a basic media query that checks the maximum width of the screen. Since no media type is specified it defaults to screen.
#media screen (max-width: 100px) { /* CSS Rules */ } - this media query is similar to the first one, but it explicitly specifies the media type as screen.
#media screen and (max-width: 100px) { /* CSS Rules */ } - this is the same as the second example - the and is implied in the prior case but explicitly set here.
#media only screen and (max-width: 100px) { /* CSS Rules */ } - this media query is the most specific and recommended syntax. It uses the only keyword to hide the media query from older, incompatible browsers, and it explicitly specifies the media type as screen.
#media only screen (max-width: 100px) { /* CSS Rules */ } - this is similar to the fourth example, but it does not use the and keyword explicitly.
How do you add a retina background if you want the background to fit the full area of the element, if the element has an arbitrary width, depending on the users screen size.
#home_data_communication {background:url(../images/home/data-com-bg.jpg) no-repeat; background-size:cover; border-bottom:1px solid #cccccc;}
I can do this
#media
(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#home_data_communication {background-image:url../images/home/data-com-bg#2x.jpg);}
But I dont know what the background size will be. Is there some CSS trick here? How do I have full size backgrounds with retina quality background images?
You seem to already be using background-size: cover; and media queries so I am not quite sure where the issue is. background-size: cover; uses some css magic to alter the size of the image so that it always fits the screen regardless of how large the screen gets. This can cause the image to get blown out of proportion as the screen gets bigger or cause the image to get too tiny on small screens. You may consider using css breakpoints where you will switch to a different version of the image that may fit better as certain sizes.
body {
background-size: cover;
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
body {
background-image: url("/img/image-xs.png");
}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
body {
background-image: url("/img/image-sm.png");
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
body {
background-image: url("/img/image-md.png");
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
body {
background-image: url("/img/image-lg.png");
}
}
That snippet uses bootstraps standard breakpoints as well as a custom image for each potential size. You may not be using bootstrap, but it is shown as a proof of concept. The snippet was taken in part from https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries
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 .
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
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
Closed 9 years ago.
Improve this question
I want to be able to swap the jquery mobile CSS for a desktop "friendly" CSS. For example when a user is NOT on a mobile device display the styles in a non mobile type style. Is there a platform or existing CSS that does this?
Just change the mobile version css to looks good in desktop.
CSS3 Media Queries
Some Examples:
Max Width -
If the viewing area is smaller than 600px.
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
Min Width -
The following CSS will apply if the viewing area is greater than 900px.
#media screen and (min-width: 900px) {
.class {
background: #666;
}
}
Multiple Media Queries -
Combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
#media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width
The code will apply if the max-device-width is 480px (ex. iPhone display)
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
Link to a separate stylesheet:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Im creating a mobile adapted Wordpress website. Im using media queries to link to a mobile css file if viewed on a mobile device. When Im posting posts in my blog the images will obviously be to large for the mobile screen. How should I solve it?
You can scale your images by using below css.
img{
max-width:100%;
}
If you have not used viewport in you head tag then use this one:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" />
The above code will scale the site in device viewport, If you want to stop zoom set user-scalable=No
A good solution is to create 'buckets' for different screen sizes and use different background images based on media queries.
For example, you could create 4 buckets with image widths:
400px for 300-500px
800px for 500-800px
1200px for 800-1200px
1400px for 1200px+
In CSS, you could create media queries like so:
#elem {
max-width: 100%;
}
#media all and (min-width: 300px) and (max-width: 500px) {
#elem {
background: url(../images/logo-400.jpg) left center no-repeat;
}
}
#media all and (min-width: 500px) and (max-width: 800px) {
#elem {
background: url(../images/logo-800.jpg) left center no-repeat;
}
}
#media all and (min-width: 800px) and (max-width: 1200px) {
#elem {
background: url(../images/logo-1200.jpg) left center no-repeat;
}
}
#media all and (min-width: 1200px) {
#elem {
background: url(../images/logo-1400.jpg) left center no-repeat;
}
}
Using both 'min-width' and 'max-width' ensures that your device downloads only the images which fit the particular 'bucket'.