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 .
Related
I'm working on my personal WordPress site, and when using media queries in the WordPress theme customizer, my site does not respond to the changes I've made to the background.
I am running the Divi theme, and used Chrome's inspect element to find which class I need to be changing.
#media only screen and (max-width: 768px) {
.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
}
}
#media only screen and (min-width: 769) {
.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
}
}
I expect the background of each page to change to "echelon-enterprises.jpg" on desktop, and to "mobile-floor.jpg" depending on the screen size. What am I doing wrong here? Am I just targeting the wrong class? I have also tried the "et-main-area" class, still not luck.
You're missing px for the second declaration
#media only screen and (max-width: 768px) {
body.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
}
}
#media only screen and (min-width: 769px) {
body.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
}
}
I can't figure out how to hide the logo image for mobile devices which is used for the background for my Age Verification popup. Here is the site with the pop-up logo in question: http://rocketcannabis.com/?itro_preview=yes
I got pretty close with the following code, but don't know how to isolate the image, I could only hide the whole pop with the #itro_popup class, I want just the image to hide on mobile, not the whole pop-up:
#media only screen and (max-width: 768px) {
#itro_popup {
display: none;
}
Use background-image: none
#media only screen and (max-width: 768px) {
#itro_popup {
background-image: none;
}
Try adding !important to display:
#media only screen and (max-width: 768px) {
#itro_popup {
background-image: none !important;
}
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!
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 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.