I have just started front-end development with Wordpress Twenty Twelve child theme.
I want to make my background full-screen responsive. I followed from this post: Full-screen responsive background image because it is exactly what I'm looking for.
But when I copy and paste this css code into my style.css:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
It doesn't work. It feels like img.bg doesn't exist. This is my current website .
Please help! I cannot move on without this and I'm behind schedule :( Thank you for your time!
You need 2 use the jscript instd. As exmpl:
var theWindow = jQuery(window),
jQuerybg = jQuery("#bg"),
aspectRatio = jQuerybg.width() / jQuerybg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
jQuerybg
.removeClass()
.addClass('bgheight');
} else {
jQuerybg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
There's a nice css way of doing this:
div
{
position: absolute; width: 100%; height: 100%;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
The key is the background-size: cover; line - it will resize no matter what the window size. Check it out at http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.