The only way to can do this is to have the background repeating – both on the x and y axis.
Thread Starter
dills
(@dills)
Is there a CSS trick I have been working with the bellow code but can not get it correct
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% */
}
}
That won’t work. Background images do not have dimensions and cannot be styled using an img tag.
Thread Starter
dills
(@dills)
What if i write it more like 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;
Has anyone managed to use the technique linked to in FlashBuddy’s post successfully in WordPress?
I have tried putting the CSS2 example code into e.g. the Sidebar.php and the Style.css and it does appear OK, but the image seems to sit on a layer on top of the rest of the page, so no links are clickable.
I would like to have a non-scrolling background covering the entire page.
Thanks.
Thanks for the quick reply Flashbuddy, I will give it a try!
It seems like dills solved his problem.
Could somebody point out the solution?
YEAH, I found the solution for having a fullscreen image with ratio, simply put this into the custom field:
background-position: center top;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
