Hi guys, I'm asking for an example of code for stuff like this one: http://demos.famethemes.com/onepress/ Look at the demo, the featured image has been resized as portrait on narrow screen from landscape on large screen. Don't tell me to download the theme. I want an idea to begin with. The image keeps good portrait ratio that fit all mobile devices. I mean several smartphones. I'd like to design a web focus on mobile and women users. // too nerdy stuff would not count, cause women will not care how good you code. Thanks in advance,
Not tested in old stuff, but should work on any css2.1 compliant UA. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ html { padding: 0;} body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0;} p { font-size: 1em;} /* end boilerplate */ div { background-image: url(bg-demo-shrunk.jpg); background-size: auto 100%; background-position: center top; margin: 1em auto;} #test1 { height: 450px; width: 240px;} #test2 { height: 450px; width: 480px;} /*]]>*/ </style> </head> <body> <div id="test1">Test 1</div> <div id="test2">Test 2</div> </body> </html> Code (markup): Damn! I hate this sh***y editor. It won't maintain formatting. The image is reduced from the page you linked. gary
What! What magic are you doing? Is this the way to go. Never see something like this before. Have to study about it a little bit. Interesting. What is this technique called, when I google it. Thanks,
Not every ejaculation deserves a name. All he's doing is using background-size to control it. It's so mundane a thing as of CSS3 capable browsers there's no reason to slap a goofy name on the method. It's just what background-size does if you set one of the parameters to auto an the other to a value (like 100%) Though I'd be tempted to use background-size:contain; instead. Does the same general thing but on BOTH axis so the image is never larger than the screen.
For that, +. My statement on support, above, was sloppy on my part. I said should work on css 2.1+. I meant css3. My bad. gary