On desktop everything is of, but if you check it on ipad or smartphone the Background does not works.
The client asked me for a full screen picture; On desktop is okay, but on Ipad, when you switch between Portrait and Landscape you need to refresh the page, and it's looks like "repeted".
How can i solve it?
Do you need to set section height via js? You can use CSS:
html, body { height:100%; } and #wrapper { height:100%; }
I've also noticed that you set the same background for body and #wrapper and it looks like it's repeated so delete bg from one of these elements.
It jumps because you set the wrapper height to the body height using javascript (but you don't update it on screen resize).
One option would be to update the wrapper height every time the screen resizes
Buy why don't you just remove the javascript and use css:
html,body,#wrapper{height:100%;}
Try this;
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You need to take a look on responsive web design. Using RWD you can re-scale your image while working on different devices. Take a look on Media Queries. That will solve your problem and your website will fit within any device. Apart if you need anything you can ask.
body {
background-size: cover;
}
just add background-size to your body tag
Related
My question is:
Is there any possibility to make something like responsive background ?
What I mean is if there is a possibility that if I go to my website from the mobile phone (e.g. 840px width) my background will automatically fit to my screen but other content from my website will have the same size? And other question is if I can stop it on... lets say 1920px width ?
I don't really have any code yet. I'm just asking. Thank you for your responses.
You can use
.class{background-size:auto auto;}
#media screen and (max-width 1920px){
.class{background-size:100% auto;}
}
Its hard to fully understand what you're asking for here, but a general tidbit of advice: try out the css property background-size: cover. This will cause your background image to take up the entire width and height of its container, maintaining aspect ratio and cropping in either direction as necessary.
Its pretty smart, and has pretty good browser support. More info can be found at the link below:
ref: CSS-Tricks: Perfect Full Page Background Image
You can apply a fixed wrapper for the "background" image with 100% width/height. Tha bakground should be used as a normal image, resized according to it's parent wrapper. The content can be inside another wrapper overlaying the previous one.
You can use the css background-cover property as this will automatically re-size your image to fit the browser. If you could even use media query to serve up different sized image so it would take up less bandwidth and look better
html,body{
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover;
}
I'm new to responsive design and CSS. It seems like a simple question but I can't get a straight answer from Google. I have tried http://css-tricks.com/centering-in-the-unknown/ The ghost block works perfectly but it leaves me a white background colour. Now I'm stuck. Basically, I have a logo size 534x385 and I want this logo to be centered on any devices. In the case of mobile phones I would like this logo to shrink to match the screen size as well.
<div>
<img class="logo" src="images/shapes-logo.png" />
</div>
.logo {
position: fixed;
top:15%;
left: 50%;
margin-left: -267px;
}
html {
background: url('../images/shapes-background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's my CSS so far. But if I do this the margin-left: -267px will cause problems in mobile devices.
Resizing the Object
To change the CSS property when the screen resizes, you can use
element {
width: 100%;
height: 100%
}
You can specify your own values too to make them work. This way, everytime the screen shrinks the object or element gets smaller.
Other way, to get the mobile and tablets to get to work is the usage of CSS3 (Media Query)
Like this:
#media only screen and (max-width: 400px) {
/* here comes the trick..this is the css, which would be applied to all
* the devices whose screen has a max-width of 400px..
*/
}
You can then set some properties for it, lets say you can change the image width to
img#logo {
width: 50px;
}
So that, for smaller size screens the image width is just 50px.
Note that, this is also applied if the browser on desktop gets a width of 400px! This way, if the browser gets resized down to 400px width, the image will shrink to fit the place. In other words. Media Query is the best option to change the CSS properties depending on screen sizes. And again, you can use width: 100%.
To make the percentage thing work, you should use a container, such as div This way, the img will inherit the width of div and fill it. For example, if the div that wraps the image has 400px width, the image with width: 100% will have a width of 400% and so on.
Centering the Object
The best method to center the object is to use margins. But not custom ones, but the browse generated.
Lets say, you want to align some image in the center of the page horizontaly, you can achieve that using max-width: 100px and margin: 0 auto. Like this:
img#id {
max-width: 200px;
margin: 0 auto; no vertical margin, auto horizontal margin
}
This way, the object will be placed in the center and the browser will automatically generate the margins for it. The max-width is to make sure, that it takes just the space it needs to. I created a site a fews days ago, you can check the image at the end of the page here: http://www.aceinternationals.com
You will see the image was never provided any code that has to be kept in mind, it is just max-width and margin. So when ever you use the browser resize function, the image will always come to the center.
White background
White background might be because of the image's bckground color, or the background-color of the body! That might be inherited by the user agent (browser). I am not sure, why that happened! Sorry :)
Reference:
http://css-tricks.com/css-media-queries/
Good luck :)
My opinion is to add addition class with logo in html.
like:--
<p class="classname"><div class="logo"><img /></div></p>
.classname{ text-align:center; width:100%; }
This will always keep your logo in center.
if it won't solve. use these with above css.
margin-left:auto;
margin-right:auto;
And also add:
.logo{ max-width:100%;}
.logo {
width:33%;
background: url('your_logo.png');
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
your container:
html {
margin:auto;
}
You can try doing something like this. If you post a link I can better help you.
You should simply use max-width:100% for your image. It will keep the image responsive.
Now, I have a website which is from my previous co-worker.
I get some issue about resizing the browser window.
In other words, I want my website to resize nicely when I resize the window, rather than having buttons, divs and all the rest to overlap and go crazy.
this is my website.
http://50.62.140.177/foxcode/index.html
What I would like to do is something similar to this say http://antobbo.webspace.virginmedia.com/photography/home.htm, you make the windows smaller and everything resizes ok.
Has that something to do with height/width/padding/margin using percentage instead?
I really don't know where to start from, so any hint or link to relevant resources would be great.
i can use chrome to check that.
open in chrome your website then click F12 for the debugger.
know in left down you got eyeglass click on it and then click where you want to change the size and in the right you can change it and see what append change on your web source..
Just add min-width: 768px; to both green divs. simple and quick
Like other people said, min-heights and min-widths.
What I would also suggest is that you use a different technique for your full-screen background image. It seems to mess up when resizing.
Try using this;
html{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
It's the best practice for full-screen backgrounds. More info from CSS Tricks.
This is just as easy as setting the html, body to auto and add a min-width of 960px
so something like:
In your header you put:
<meta name="viewport" content="width=device-width">
And in your css you do:
html {
width: auto !important;
min-width: 960px; // this depends on the width of your website, the example you provided is 960px
/*rest of code*/
}
See all the min-width options here
Hope that's it.
I have a mobile web application based on jQM. I have a background image with the following styles applied to it:
body.ui-mobile-viewport .ui-page
{
background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: cover;
}
The thing is, this works fine on iOS, Chrome for Android but on ICS native browser and Dolphin browser, the background sticks to the top of the page like this after scrolling starts:
After some action, (like tapping on an element, the background comes back to focus like this:
I checked on the internet, did extensive research but obviously Im missing something. These are the links of the solutions I've tried:
SO link 1
SO link 2
What you see on top (I mean the CSS) is the default un-edited style applied.
Note:
Ive tried supersized plugin as well, and it works for GingerBread devices and when the content in the page is static.
On ICS devices, I'm not able to scroll beyond the viewport if its applied to a page with dynamic content.
The same problem happens when I try to create an img tag in the body of the page with src set to the path where the image is located.
THESE PROBLEMS OCCUR ONLY ICS NATIVE BROWSER.
Please tell me if I'm doing something wrong. Is there a pure CSS solution for this? (Obviously something is hugely wrong)
Try this:
body.ui-mobile-viewport .ui-page
{
background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
background-size: cover;
}
The following CSS for "html" solves my issues with full page background images on Android devices:
html{
height:100%;
width:100%
}
body{
background-image:url(img/background.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
Hope that helps.
I'm having a problem using responsive backgrounds. http://poppykeith.co.uk/index.html looks correct on computer browsers and in landscape on a mobile browser, however when viewed on a mobile (im using iOS) in portrait, the image is squished to fit the screen.
How would I go about making the image just zoom in in portrait mode and not stretch?
Thanks
The code you wrote almost works, but the min-width:1024px and the width:100% rules are conflicting with each other and causing the squishing effect you see. Basically, width trumps min-width.
The real technique you want to use is to set that image as a background on the body element, and then use background-size:cover to make the browser load it appropriately
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Details: http://css-tricks.com/perfect-full-page-background-image/
Check out this article: http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk
It talks about how Mobile Safari likes to scale down large images.