I created a slide in my WordPress site and I want the background of the slide to be background-size: cover on desktop and background-size: contain on mobile. I tried to achieve that by using media queries like so:
#media screen and (min-width: 320px) and (max-width: 675px) {
.tp-bgimg {
background-color: rgb(6, 6, 6) !important;
background-size: contain !important;
}
}
But there is a time gap between the load of the slide and until the media query takes place, so i first see the background as cover and after a sec or two it changes to contain, any idea how can i solve this issue?
thx
A better solution for what you need to do is:
Go to Slider Settings:
In 3, Select a slider type: set it to standard slider and load preset Slideshow Full Width.
In 4, Slide Layout: select Full-Width and in Desktop set Layer Grid Size to 1920px x 1080px.
Save settings
In Slide Editor:
Select a background Image with a 1920 x 1080 dimensions
In source settings: set background fit to contain, background position to center top.
With this configuration you should see the image fitting in any screen size.
Related
Trying to set the appropriate (meaning media query for the background header image in which will display the header image as it should be) of the website careertechpa.org. As you might see in the image attached, on the larger desktop screens, the bottom is getting cut off.
oversized-background
Here's the code for the header image:
.header-one{ height:200px;
background-image: url('careertechpa.org/wp-content/uploads/2020/02/…);
background-size:102%; }
I tried setting this media query but it didn't seem to work.
#media only screen and (min-width: 1440px) {
/* styles for MacBook Pro-sized screens and larger */
}
What am I missing?
My wife is using a cover page temporarily for her site - we want a different background image used on mobile than on desktop. I am a complete neophyte however have injected CSS through the Advanced settings tab for the cover page and have inserted the following:
<style>
#media screen and (max-width: 480px) {
body {
background-image:url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg');
}
}
</style>
and it does not work. What am I doing wrong? Any help someone can provide would be greatly appreciate.
I can provide the website URL if required.
You are using a 640x1136px background image for screens narrower than 480px without resizing the background. Also, your image features a large white space at the top. I think the image loads but you are only seeing the top of the image, drawing the false conclusion it doesn't load.
This should display the image on small devices:
#media (max-width: 480px) {
body {
background:
white
url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg')
no-repeat
center
/contain;
min-height: 100vh;
margin: 0;
}
}
The key is the /contain part of the background shorthand, which could also be written separately as background-size: contain;
Other possible values include:
cover (image gets cropped but covers the element),
Length (in px, em, rem, vw, cm, in etc...),
auto ( original size - also default - what you see now),
initial (reset to initial state)
inherit (apply property of parent)
I want to put a banner on the top of the main page in my MediaWiki site. The problem is that when I set up the size of the banner (e.g. [[image:banner.png | 1400px]] ) it will show correctly on my widescreen monitor but when using a device with a different screen size (e.g. a 4/3 monitor, a tablet or a phone) the image extends to the right of the page as it is too large to show on said screen or the screen will display only a part of the image.
What I want to do is make the banner adjust to the width of the screen used, the same way a table's width is adjusted to, say, 100% and to display correctly on all screen sizes.
As Help:Images explains, there are several methods in image markup to customise thumbnail size, including upright which respects user preferences.
As for what you ask, only a surrounding div width can achieve it, so you must set a bigger image than needed and then resize. Not so efficient for bandwidth but works, see Wikivoyage example:
<div class="topbanner">
[[File: Banner Lyon Saint Jean.jpg|frameless|1800px|]]
</div>
with MediaWiki:Common.css having
.topbanner img {
max-width: 100%;
height: auto;
width: auto\9;
}
I have a website that will serve mobile phones and tablets which will have different form factors. I have a background image that I want for the home page and would like that image to stretch (possibly distort) to accommodate the available area.
What is the best way to do this?
Is there a good alternative that would reasonably accommodate vastly different form factors (i.e. Tablet/Phones) that would not distort the image?
===============================
Update
I leveraged this code.
.transparent-background {
background: transparent;
}
.background-image {
background: url(app-background.jpg);
background-repeat:none;
background-position:center center;
background-attachment:scroll;
background-size:100% 100%;
}
I added the transparent-background as a class to the Page and Content elements and then added the background-image class to the page element and that seems to do the trick.
Have you tried CSS3 property background-size:cover;
http://www.css3.info/preview/background-size/
If the cover keyword is the used, the background image is scaled,
again preserving the image’s original proportions / aspect ratio, this
time to be as large as possible so that the background positioning
area is completely covered by the background image, ie. both the
images width or height are equal to or exceed the background
positioning area. As such, again depending on whether or not the
proportions of the background image match those of the background
positioning area, some parts of the background image may not be in
view within the background positioning area.
It is not compatible with every browser but should be fine for devices - Compatibility
I would say that you can do this by just changing/modifying CSS.
img {
max-width: 100%;
}
Try reading this article more for better understanding.
http://www.alistapart.com/articles/fluid-images/
To answer your second question, you can use the #media rule to specify different styles for different screen sizes/devices. For example:
#media all and (min-width: 750px) {
/*Any styles in here will only be applied to browsers(screens, etc) with a width > 750px */
}
So you could have different background images/layouts based on screen size by overriding your current styles. i.e. you may have more high definition images set as the backgrounds of divs, icons, etc for larger screens. If that makes any sense.
Is there a simple way to display retina size images on the correct device and the standard on others? i've been search online a some people suggest using a jscript. Basically I want the 32x32 images to load on. Also what size should a retina icon be, 32, 36 width or higher? In comparison to a 16 standard width icon
#media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-resolution:240dpi){
.shopping_icon
{background-image:url(../images/shop_icon.png);-moz-background-size:776px 18px;-o-background-size:776px 18px;-webkit-background-size:776px 18px;background-size:776px 18px;}
would something like this work?
#track .ui-icon{background:url(../simgs/track_icon.png) 50% 50% no-repeat;background-repeat:no-repeat;width:36px !important;height:36px !important;margin:-5px 0 0 -18px;}
#media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (max--moz-device-pixel-ratio: 1.5) {
#track .ui-icon {
background: url(../simgs/track_icon.png);
background-size:36px 36px;
}
}
The device-pixel-ratio should be 2 for retina.
The icon image file should be 36x36 and CSS background-size 18x18 to squeeze it down.
Refer to the last section of this post: http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile