I'm currently working on a WordPress theme and I've got it up & running here: http://tinyurl.com/kawesnh
I'm trying to make the image shown in the background cross-compatible with the iPhone's safari browser, but have failed to do so :)
I'd like to have the background scroll with the page's content, but haven't found how to do this, while also having the background resize for the iPhone browser.
Here's my CSS, which produces an initially good-looking layout on the iPhone, but resizes the content after a link is clicked, also it's producing a bad result on desktop browsing:
CSS
body {
background: url(http://www.myurl.co/tq/wp-content/uploads/2013/07/TQ-Oceanside_BGtaller.jpg) no-repeat center center fixed;
background-position: center top;
background-color: #000000;
}
Thanks for your help!
Try using CSS3 media queries. Media queries are used by most themes on wordpress because they make your website responsive and makes your background resize to the browser's size. Here's a tutorial:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Related
I'm making a website for my girlfriends 23rd birthday and she'll mainly be viewing on mobile. The background image is fixed (no issue on desktop) but on mobile, the image scrolls slightly on the bottom, but adjusts itself after scroll. (Video Attached: https://youtu.be/wKnxYXEy0mg)
CSS Below:
body {
background-image:url(Gold2.jpg);
display: block;
background-color: gold;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
min-height: 500px;
}
That's not the background moving, it's Chrome's address bar disappearing.
This behavior is normal, try the website on a different browser.
Have you already tried to force off this behavior by using jQuery? jQuery makes it tremendously easy to add and remove classes as well as adding css to them. You could create an if-statement that manually adds the css rule of this background to the section. Another option I'd consider is to add new classes for everything you need in this case scenario and giving everything a z-index above 1 (just to be sure everything is displayed in the chrome browsers mobile app properly). That are just guesses I would realize in your situation although I didn't know this behavior to this point. Hopefully I helped you with your problem... :^)
i am building a landing page, it must be responsive. but i have one small problem. i am having trouble while trying to define the background image. what i want is that on landscape mode the image will take the full width of the device screen but also to be in its full height like in this example
i see that they are using some framework, how can i do it without any framework.
when i try to do it i use background size:contain, but it maches the background image to the device screen height.
i have seen some exampels i which an image is placed in the html and it is converted to background image. i think that with z-index: -9999;like in the example i gave . but when i try it the image does not go to the background.
Any help would be great
You can use vh and vmax to do this.
An example:
CSS:
#im-full-height {
background: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Philippine-stock-market-board.jpg') center center no-repeat;
background-size: 100% 100%;
background-position: contain;
height: 100vh;
}
HTML:
<div id="im-full-height"></div>
Demo
A demo based on your JSFiddle link: https://jsfiddle.net/z1L12opp/2/
You will find below the demo of the JSFiddle I created that fits your need. I used new CSS dimension property vh, which let the element take X percent of the Visible Height.
Refering to the Can I use website for vh property, your code will not run in IE8 and below, and may probably not work properly in further version.
editable JSFIddle / Full screen JSFiddle
EDIT : the background follows the scroll
My background image just works fine in the browser but when I open the site on my mobile or tablet the background image (set on body) doesn't show and it just shows a blank white background.
This is the code im using to set my background:
body {
background:url('../img/bg.jpg') top fixed no-repeat;
}
Can anyone tell me why my image doesn't work on mobile devices?
Thanks!
I'm making the layout in sections. Image/Text/Image/Text... and the images have this CSS :
#change {
background-image: url("../images/main.png");
background-attachment: fixed;
background-repeat: repeat;
background-size: cover;
}
HTML
<section id="change"
data-type="background"
data-speed="5"
data-selection="0"
style="height: 630px;
background-position: 50% 16px">
On a PC the images are displayed nicely. But on a mobile device the images are not corresponding to the CSS but displaying in full-res. Hence I see only a corner of a 5000x3500px image. I'm using Bootstrap in this project and Safari (iPhone 4s).
It's currently on a free host so excuse me for adds. (Also I didn't work yet on minimizing load time for the images, so sorry for that too.)
The website:
http://viso.lv/imigracija/
UPDATE: It seems that only iPhones have a problem of displaying the images. Because several people with other phones have the images just right. What can I do about that? I tried 3 different browsers. Nothing changed.
I don't quite understand what you're asking. For me (Samsung Galaxy S3 Mini) the images look fine. There's some lag when scrolling, but that's perfectly natural for a mobile browser (Firefox Mobile) handling large images with CSS.
Unless there's another issue other than positioning, which is the fault of a browser without strong CSS skills, then there isn't much you can do, sorry.
Basic Scenario:
I have an image that is 2048x1536.
I have an html file that displays this image via CSS that specifies a width of 1024 and height of 768.
I have an UIWebView that displays that html page.
Problem:
On an iOS6 device, that image is resized to fit within that 1024x768 area. On an iOS7 device, that image is cropped to only display the top left quarter of the image.
Since iOS7, Chrome, and Safari all do the cropping option, I do believe that is the correct behavior (I strongly suspect that the latest webkit was updated to match this standard behavior). However, for business reasons, I still need the resize behavior.
Question:
Is it possible to still to keep that resize behavior even on iOS7?
EDIT - Additional info based on comments:
I presented a highly simplified scenario. I can't just put the image into an image view. The feature within my app allows 3rd parties to load their HTML content into it. Also, related to that, I can NOT modify the HTML contents. Basically, all I can do is create a NSUrlRequest for that HTML content and tell the UIWebView to load it via loadRequest.
Below are the HTML snippet and CSS snippet. But please keep in mind that I can't change this. I only control the objective-c end of things.
<body >
<div id="wrapper">
</div>
</body>
#wrapper {
background-color: #FFF;
position: relative;
width: 1024px;
height: 768px;
background: #FFF url(images/bg.jpg) no-repeat top left;
background-size: contain;
overflow: hidden;}