Im trying to create a website template (for my personal use as a starting point for projects) whereby the sections or div containers (sections) are full width, from edge-to-edge of the browser viewport. And with a background image… but i cant get the sections to stay fluid 100% wide and have the background image not stretch, distort or just look like crÁp basically.
I’ve tried using ‘supersized’ as the background slider (sliding functionality not required) to get the background image to ‘scale’ but it either stretches/compresses in width or height, or if set to fixed obviously doesnt scale. So the subject of the background image can look terrible in certain viewport window sizes.
1/ How do people create or what rules do they use to set full width containers for their page structure & content containers?
2/ and what is the preferable or most popular / common method for the background image problem?
The other aspect to consider is ‘empty space’ around the focus, and the position of the focus of that background image its self of course. But surely that would cause problems if optimised for smaller mobile ‘background image areas’ verses larger desktop ‘background image areas’ of the container?
Just looking for some pointers and advice on how people do or handle this really…
So that will keep the image centered (at the centre point of the image, centered to the centre point of the viewport, regardless of its width or height, correct?) and also make sure it spans the size of the entire container?
It sounds and looks so simple when you write that and i look at your code, seems too good to be true I’ll test it out for sure.
No problems youre aware of or forsee with that verses what ive described above?
[quote=“applehead, post:1, topic:221103”]
1/ How do people create or what rules do they use to set full width containers for their page structure & content containers?[/quote]
It’s worth considering applying a maximum width to the page body. If background images are always set to full viewport width anyone viewing on a super sized monitor resilution will inevitably see distorted/pixelated images.
The majority of desktops/laptops currently use an average of around 1300-1400px resolution width so I often set a max-width on my body tag
body { max-width: 1600px; margin: 0 auto; }
That means anyone on a larger resolution screen will see a max page width of 1600px with white space left/right. That would allow you to use 1600px by whatever height background images and keep image quality. The relatively few people using large monitors and full screen browser will just get white space.
As SamA74 just pointed out using various CSS rules could help!
with reference to point 1… that would look like the BG image would just stop dead, with white ‘borders’ down the left and right of the image correct? Is that common? Seems just like a fixed width but with a larger width than old style websites. Surely not a common solution in the responsive era? No offence intended and im open to being corrected.
Appreciate ultrawide full screen browsers are minimal but that would look awful. Then again, you dont want to use a 3440px wide bg image for 340-1600px wide displays 80% of the time
If your image is 1200px, viewing it at 2000px may look awful too, so whether you use max-width and gutter or allow the image to go super-size, there will be some aesthetic compromise, unless you have huge image. The gutter doesn’t have to be white BTW.
You can use media queries to offer smaller images to smaller screens and bigger ones to bigger.
Yes that’s just one solution though to cater for very large screens. Sometimes clients don’t have extra large images to use for background images so that’s one way to add some sort of control over presentation at specified viewport sizes. Using maximum widths is very common for responsive presentation, though not everyone applies to the page body, just content area usually.
Having plain colour left/right won’t hurt (doesn’t have to be white), only a few would ever see it anyway!
No offence taking at all, we’re all just discussing all the options, some may work for you, others won’t
The part, background-size: cover; specifically is what forces the image to engulf the entire background no matter the size and if either width or height(whichever is smaller) reach the bounding box of an element it will stop.
As the other posters said, in terms of image optimization to avoid too much image blur from a low quality image you can use media queries. One background image for mobile phone, one for tablets, and one for desktops for the same image. Or you can just be lazy and use a large image for all three.
