Now the background image is center aligned. When I increase the window size (CTRL - on firefox) everything works fine. The background and section are both center aligned.
But when I decrease the window size (CTRL + on firefox) the background image gets clipped on the left and white space is created on the right side. Can anyone explain to me why this happens ? How does this happen when the image is center aligned.
I appreciate any help.
PS: I have to add here that I’m not trying to build a webpage, just me trying to understand HTML/CSS better
The background image looks ok to me but the yellow and blue squares get misplaced due to the width you put on the body element.
You rarely need to give a width to the body and for older browsers support its best you don’t. (It also plays havoc with zooming in some versions of IE.)
Remove the width and height from the body and everything should be ok.
I hope that background image is not supposed to be a site wrapper as that would limit you to a very rigid layout.
The dark blue and the green are a part of the background image. The ones below are created in HTML/CSS, I’m trying to understand how widths are handled on mobile device compared to a desktop.
When the width is reduced (CTRL + on firefox) the background image gets clipped on the left side (window width is less than image width). But why is whitespace created on the left ? Shouldn’t the background image cover that portion since its center aligned ?
And this isn’t for any webpage, I’m just experimenting
Can you show a screenshot of the effect as I think we may be talking at cross purposes? When I scale your body background image up and down it stays perfectly centred in Firefox.
The html elements below it though will scale differently because they are affected by the width you set on the body.
Applying widths to the body is not a good idea even for testing as it will throw up strange results. Also note that not all browsers zoom in quite the same way as it is not a perfect science.
Assuming no viewport meta tag (some/most) mobile devices will assume the page has a 980px width and scale it so 980px fits in the viewport which means that if the page was 1800px wide then you would need to sideways scroll for another 820px to see it all. Some devices may differ in their approach but all will scale it in some way and try to make it fit within reason.
The background image seems to be moving to the left and creating whitespace on the right side. Why is happening when its position is set to center ?
Hope its clear now.
If you look at your second and third screenshots you will see the horizontal scrollbar has been triggered and when you move the scrollbar to the right to see the rest of the content (as in screenshot 3) then the layout moves to the left. If you move the scrollbar back to the left starting position then the background is once again centred. The background will not stay centred when you move the scrollbar to the right because it has to slide the whole page to the left in order to see what is beyond the viewport’s right edge. That’s just the way it works and when you think about it there is no other way that it could be achieved.
The background is centred and if your window was wide enough so that there was no scrolbar then you would see it centred. Or if you reset the scrollbar to the left you will see that the background is still centred. Once you scroll then the dynamics change and the whole background must move more to the left in order to achieve the scroll.
As I said a few times now the issue goes away if you remove the exorbitant width from the body which is confusing things for you by causing the scrollbar. You very rarely want a width on the body anyway.
It should just take the size of the image in pixels - up to its maximum size if the viewport is large enough, or it will fill the room it has available, though in the latter case, you can usually click on it to make it 100% in the window, but then you’ll get scrollbars appearing so you can move around it.
What I deduce from here is that the background is centered to the visible part of the page ( when the horizontal scroll bar is at the left). Am I right ?
Just clarify something for me here, does the viewport include the portion of the webpage that cannot be seen without using the horizontal scrollbars ? Like in my page when I’m zoomed out horizontal scrollbars are triggered causing portions of the page to be hidden from view, does the viewport include these areas too ?
As far as I’d understand it, the viewport is literally that things you can see. Anything that needs to be scrolled to, is outside the viewport, or at least until you scroll to it.
The viewport is just the area you can see. If an element sticks out of the viewport then you need to scroll to see it. When you scroll to see the bit that sticks out then the rest of the page does not automatically increase as well. The rest of the page stays at viewport width.
Close the window until the blue bar causes a scrollbar. Now scroll to see the right end of the blue bar and you will see that the red background does not follow with it because it is confined to the viewport (is is auto width or even with 100% width).
When you have large elements in your page (which for responsive design you never want as that is the wrong approach) then you would need to set a min-width on the page that will containe the largest fixed width element you have.
If you are talking about a background image then its width is the size that you created at (unless you are transforming the width with background-size of course). The image will display at its full size on the background that you choose. However if the background isn’t wide enough to contain the image then you will only see the part of the image that fits into the background.
When you apply an image to the body then you don’t need a width as the image will display in the full width of the viewport anyway. If the image is wider than the viewport then that just means you won’t see that part until you widen the viewport. This means you can put an image as large as you like and those with wide monitors get the full effect and those with smaller monitors just get what they can can see in their viewports.
Of course you can use background-size to stretch the image if you want.
In responsive design large fixed width elements are your enemy and to be avoided,
Thank you everyone especially Paul, you have been of most help to me.
I have one final question, could anyone confirm if I got this right ?
This is from post#10
Now that I know what the viewport is I can rephrase this question,
When a width (say 1500px) is given to the body and portion of the webpage is outside the viewport, the background image (given to the body and has background-position:center center;) is centered to the viewport and not to the body (which has fixed width) ?
Something like this,
body {
background-image: url(someimage.jpg) no-repeat;
height: 1500px;
width: 1500px;
background-position: center center;
}
The easiest way to check, is to reduce the the viewport size down until you get a horizontal scroll bar. Now move the scroll bar left to right, or vice versa. If the background image moves, the image is centred to the webpage, if it stays still, it is centred to the viewport. This assumes that your background image is also 1500px wide. I fully expect the image to move
The answer really has nothing to do with that and your results are skewed by using a width on the body (as already mentioned).
First of all you have applied the background image to the body element.
By default all images applied to the body element are in fact propagated automatically to the html element (assuming no images are aleady set for the html element).
You now add a width to the body element
The body element no longer has a background image because it is propagated to the html element and the html elements width is 100% only. That’s why your image never shows in the center of your 1500px wide element because it is attached to the html element which is only 100% wide.
If you add to your example:
html {background:#fff}
You will see that the background image is no longer propagated to the html element and will stay at the width that you have set on the body and will no longer get any smaller when the scrollbar kicks in.
Of course now the body height is only as high as its content because the html element now carries the viewport height background colour.
99% of the time you don’t want to add a width to the body and you don;t want to add a background to the html element (unless you know why you are doing it).
html and body are special elements and have special characteristics.
That would explain why the background image didn’t behave as I thought it would. There’s something going on there that I’ve not picked up on previously. Something to do a little reading on I think.
