Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Background image height problem – not fitting to the screen Reply To: Background image height problem – not fitting to the screen

#265293
JoTidman
Participant

I tried the suggested code in the link above but it messes up the background when I view it on my iphone. So I changed it back to the code below which is all good on my laptop and phone but still have a blank section at the bottom of the page on my work PC screen because it’s a different size. I changed the “max width” to the width of the actual image but still squashes the background image…

BODY

{
background-image: url(“photos/background image 1.jpg”);
background-size: 100% 100%;
background-repeat: no-repeat;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1920px;

/* Set up proportionate scaling */
width: 100%;
height: 100%;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1920px) { /* Specific to this particular image /
img.bg {
left: 50%;
margin-left: -512px; /
50% */
}
}