I'm currently in the process of developing a mobile site for a fully functioning desktop site. Using media queries, I'm able get the actual content area to size down when on a display such as an iPhone or iPod. However, the rest of the page such as the footer and header do not want to size down correctly. Any advice? You can view the site here: www.tobynews.com
footer if it works, the body does not
use % and min or max
#content {
/*you css*/
margin-left: auto;
margin-right: auto;
width: 900px;/* use % for size
max-width: you size;
min-width: you size;*/
}
image auto
body{
background-image: url(uno.jpg);
background-attachment: fixed;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
/* and you css*/
}
detected size screen
#media screen and (max-width: 750px){
footer{
width: /*you size*/;
}
}
Related
So i have a div with a background image with background size set to cover.
Here is the div code:
.imgContainer {
width: 400px;
height: 340px;
z-index: 1;
border: 0;
background: url('https://dummyimage.com/800x680/ccc/333');
background-position: 50% 25%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-radius: .25rem;
}
#media screen and (max-width:650px) {
.imgContainer {
width: 100% !important;
}
}
<div class="imgContainer"></div>
The background shows the image completely but since i am making my site responsive, i change the div on width 650px using the #media rule.
#media screen and (max-width:650px){
.imgContainer {
width: 100% !important;
}
}
When the div is enlarged, the background-image widens and don't show much content of the image. The image's content is shown completely when the width is 400px and height 340px. The problem occurs when the div's width is 100% and the image's content does not show as much as it shows when it is 400px wide. How to fix this?
And thanks in advance!
With background-size: cover you're telling the browser to ensure that the image covers the entirety of the element while maintaining the image's original aspect-ratio. So it is to be expected that changing the aspect ratio of the HTML element will cut off some of the image to make this happen.
In order to make your image responsive you'll have to ensure that the aspect-ratio of your image remains the same.
One way to do this is to use something like the following:
#media screen and (max-width:650px) {
.imgContainer {
width: 100%;
padding-bottom: 85%;
height: auto;
}
}
This will set the padding to be 85% of the width of the element as 100 / (400/340) = 85. Assuming nothing else is in your div this will give it the appropriate aspect ratio for your image.
This might help.
Notice: It only works, if the image has an aspect ratio of 400:340 (e.g. 800 x 680, 600 x 510, etc.)
Notice: The 418 pixel in the last media query is an empirical value based on the current paddings and margin. You might need a different value.
Here is the codepen to see in in action
.imgContainer {
width: 400px;
height: 340px;
z-index: 1;
border: 0;
background: url("https://dummyimage.com/800x680/ccc/333");
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
border-radius: 0.25rem;
}
#media screen and (max-width: 650px) {
.imgContainer {
width: 100% !important;
background-size: contain;
}
}
#media screen and (max-width: 418px) {
.imgContainer {
background-size: cover;
}
}
<div class="imgContainer"></div>
I am trying to create a Div with a background image whose width x height is 1024px x 768px . And it has to fit whole browser window .
Using the below css i could achieve a image occupying full screen but the image gets cropped
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background-image : url(home.jpg);
background-position: top center !important;
background-repeat: no-repeat !important;
background-size: cover;
background-position: center;
min-height: 100%;
width : 100%;
height : 100%;
}
#container {
height: 100%;
}
I tried #media option to set the width and height using below css but now i get full image with scroll bar and a white space means the image is not occupying full screen.
html, body {
height: 768px;
width: 1024px;
margin: 0;
padding: 0;
}
#wrapper {
background-image : url(home.jpg);
background-position: top center !important;
background-repeat: no-repeat !important;
background-size: cover;
background-position: center;
height: 768px;
width: 1024px;
}
#container {
height: 100%;
}
#media (min-width:769px) and (max-width:1024px){
// your code
}
Can someone guide me how can i accomplish it and it has to work in all the browser :(
Keep in mind that your screen resolution doesn't have to match your browser resolution. You have browser chroma (title bar, address, bookmarks etc), you have OS UI (task bar/launcher) etc.
So you can get that exact size only if you're using a larger screen (e.g. 1600x900), but otherwise you'll run into issues.
But whatever, let's say you really, really, really want to match that size.
You have to ditch background-size: cover; in favor of background-size: contain;, so you'll have the image resized to the container (see the specs here) and place the image to top left (instead of top center).
As a side note, I suggest you to use vh and vw units:
#wrapper { width: 100vw; height: 100vh; max-width: 1024px; max-height: 768px; }
This way you won't lock your users on a certain resolution.
You Want to add below codes to get div which size is 1024 * 720 just do as follows.
#media body
{
width:1024px;
height:720px;
}
I have to make a website for my html class.
When I open the page on my computer, the images fit how I want them to fit.
But when I try to open it on the school computers, it is like 50% of what I expect it to be. I'm guessing its because of different screen resolutions. How do I make it work on all resolutions?
Here's a picture.
http://i.imgur.com/7YsCSpa.png
The logo on the top stays in position but the pink bar wont. It doesnt fill across the entire screen.
My html is <div id="headbar">
<img src="headbar.png" alt="bar" />
</div>
My css is
#headbar {
position: fixed;
margin-top: 85px;
width: 100%;
z-index: -1;
background-attachment: fixed;
Use Media Queries in CSS.
Example:
#media (min-width: 1200px) and (max-width: 1400px) {
#headbar {
position: fixed;
margin-top: 85px;
width: 100%;
z-index: -1;
background-attachment: fixed;
}
#media (min-width: 800px) and (max-width: 1200px) {
#headbar {
position: fixed;
margin-top: 35px;
width: 100%;
z-index: -1;
background-attachment: fixed;
}
Is headbar.png a image that should make #headbar fully pink? Then it could be as simple as :
#headbar img {width: 100%}
It will then be scaled though. To prevent this, give #headbar a height and make the image 100% height. Of course it would make more sense to make it a background image (or color if it is pink only).
Edit - going on current information, would this be what you're after?
#headbar {
width: 100%;
height: 50px;
position: fixed;
margin-top: 85px;
z-index: -1;
background-image: url(headbar.png);
background-size: 100% 100%
}
I've just added some height - adapt this to what fits best. One more thing to beware of is to get the correct path to the image (absolute url is easiest)
background-image: url(/imagefolder/headbar.png);
Hi I have several divs on my page which have background images that I want to expand to cover the entire div which in turn can expand to fill the width of the viewport.
Obviously background-size: cover behaves unexpectedly on iOS devices. I've seen some examples of how to fix it, but I can't make them work in my situation. Ideally I'd prefer not to add extra <img> tags to the HTML but if it's the only way then I will.
Here is my code:
.section {
margin: 0 auto;
position: relative;
padding: 0 0 320px 0;
width: 100%;
}
#section1 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section2 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section3 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
<body>
<div id="section1" class="section">
...
</div>
<div id="section2" class="section">
...
</div>
<div id="section3" class="section">
...
</div>
</body>
The question is, how can I get the background image to completely cover the section div, taking into account the variable width of the browser and the variable height of the content in the div?
I have had a similar issue recently and realised that it's not due to background-size:cover but background-attachment:fixed.
I solved the issue by using a media query for iPhone and setting background-attachment property to scroll.
For my case:
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
}
}
Edit: The code block is in LESS and assumes a pre-defined variable for #iphone-screen. Thanks for the notice #stephband.
I've had this issue on a lot of mobile views I've recently built.
My solution is still a pure CSS Fallback
http://css-tricks.com/perfect-full-page-background-image/ as three great methods, the latter two are fall backs for when CSS3's cover doesn't work.
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
Also posted here: "background-size: cover" does not cover mobile screen
This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.
Just in case, in your HTML head, something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML:
<div class="html-mobile-background"></div>
CSS:
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
#media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
There are answers over the net that try to solve this, however none of them functioned correctly for me. Goal: put a background image on the body and have background-size: cover; work mobile, without media queries, overflows, or hacky z-index: -1; position: absolute; overlays.
Here is what I did to solve this. It works on Chrome on Android even when keyboard drawer is active. If someone wants to test iPhone that would be cool:
body {
background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
background-size: cover;
-webkit-background-size: cover; /* safari may need this */
}
Here is the magic. Treat html like a wrapper with a ratio enforced height relative to the actual viewport. You know the classic responsive tag <meta name="viewport" content="width=device-width, initial-scale=1">? This is why the vh is used. Also, on the surface it would seem like body should get these rules, and it may look ok...until a change of height like when the keyboard opens up.
html {
height: 100vh; /* set viewport constraint */
min-height: 100%; /* enforce height */
}
That its the correct code of background size :
<div class="html-mobile-background">
</div>
<style type="text/css">
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%; /* To compensate for mobile browser address bar space */
background: url(YOUR BACKGROUND URL HERE) no-repeat;
center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%
}
</style>
For Safari versions <5.1 the css3 property background-size doesn't work. In such cases you need webkit.
So you need to use -webkit-background-size attribute to specify the background-size.
Hence use -webkit-background-size:cover.
Reference-Safari versions using webkit
I found the following on Stephen Gilbert's website - http://stephen.io/mediaqueries/. It includes additional devices and their orientations. Works for me!
Note: If you copy the code from his site, you'll want to edit it for extra spaces, depending on the editor you're using.
/*iPad in portrait & landscape*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}
/*iPad in landscape*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}
/*iPad in portrait*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }
#media (max-width: #iphone-screen) {
background-attachment:inherit;
background-size:cover;
-webkit-background-size:cover;
}
I found a working solution, the following CSS code example is targeting the iPad:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
html {
height: 100%;
overflow: hidden;
background: url('http://url.com/image.jpg') no-repeat top center fixed;
background-size: cover;
}
body {
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
}
Reference link: https://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad
html body {
background: url(/assets/images/header-bg.jpg) no-repeat top center fixed;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
}
I have a photo background on my site using background-size:cover. It works for the most part but leaves a weird ~30px white space on my Galaxy S3 in portrait mode.
I've attached a screenshot. The 1px teal line is to illustrate the entire screen. Seems like the background stops right after the social media uls.
I tested this by removing the ul and the background attached it self to the bottom of the tagline text.
Also, here's my CSS pertaining mobile portait view:
#media only screen and (max-width: 480px) {
.logo {
position: relative;
background-size:70%;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
margin-top: 30px;
}
h1 {
margin-top: -25px;
font-size: 21px;
line-height: 21px;
margin-bottom: 15px;
}
h2 {
font-size: 35px;
line-height: 35px;
}
.footer_mobile {
display: block;
margin-top: 20px;
margin-bottom: 0px;
}
li {
display: block;
font-size: 1.3em;
}
This used to not happen, but I guess I accidentally bugged it while trying to solve another issue.
After hours of trying different things, adding min-height: 100%; to the bottom of html under the { background:... } worked for me.
This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.
Just in case, in your HTML head, something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML:
<div class="html-mobile-background"></div>
CSS:
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
#media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
Galaxy S3 havs a width of greater than 480px in either portrait or landscape view so I don't think those CSS rules will apply. You will need to use 720px.
Try add:
* { background:transparent }
right at the end & move your html { background:... } CSS after that.
This way you can see if there is a mobile footer div or any other element you created that is getting in the way, blocking the view.
Also I would try applying the background CSS to body rather than HTML. Hope you get closer to the answer.
Current solution would be to use viewport height (vh) to indicate the desired height. 100% did not work for Mobile Chrome. CSS:
background-size: cover;
min-height: 100%;