This is also difficult because the website is technically all one page. Using Background-size In Responsive Design For responsive web design it’s the ‘cover’ value that contains all the power as it will adjust the size of an image to fill a parent element whilst hiding the excess in the overflow much like we do with large backgrounds in the body of a website. The trick is to use height: auto to override any already present height attribute on the image. If the max-width property is set to 100, the image will scale down if it has to, but never scale up to be larger than its original size. What is most frustrating is: in firefox debugger > responsive view > it's flawless but via a real phone/tablet the background is blown up and pixelated (of course you cannot expect the debugger to work). Resize images with the CSS max-width property There is a better way for resizing images responsively. The background-size property in CSS takes absolute values, percentage values and certain keyword values as part of the input. I have tried using different jpeg sizes depending on the media max-width, I have also tried just applying the background image with only a left:0px and I have tried background-size:contain and background-size: cover !important but no success. The background-size property is made specifically for the background images and determines what the image’s size should be. It looks great via desktop browsers (IE, Chrome, Safari.) but when the responsive theme CSS kicks in it does not resize to the correct resolution.įor desktop and responsive CSS: background: url(background.jpg) no-repeat center center fixed
I am running into some issues with my full screen background image on my webpage.