I’m using some large images as backgrounds inside fixed sized div containers, a fixed 1600px wide causing horizontal scroll bars on smaller screens. This is ok, though what I need is for the page to load and have these containers in the center of the page. So the scroll bars have a equal space either side, and not pushed over to the left.
Is this possible to achieve using css?
If I have a screen at 1200px how do I make sure the fixed 1600 will be in the center?
I’ve tried margin: 0 auto; Nothing.
Example:
.container-top {
background: url("/static/media/images/bg-tophalf.jpg") no-repeat scroll center top rgba(0, 0, 0, 0);
height: 913px;
position: relative;
width: 1600px;
}
I know I can use the body but I need a number of different images loaded under one another.
I did think you could just center the div but nothing seems to work?
You can’t move the windows’ (or an element’s) scrollbar with css alone you would need some javascript to cause the horizontal scroll.
What you are describing though doesn’t sound usable or advisable. If the image is a background image then simply let it stay centred in the background at whatever width the page is. You can set a max-width of 1600px (instead of width) for larger devices but just let the element get smaller with the window.
Unless I misunderstood what you are trying to achieve
You can’t move the windows’ (or an element’s) scrollbar with css alone you would need some javascript to cause the horizontal scroll.
Then it looks like I’ll need a small snippet of js to get the desired effect. Unfortunate.
What you are describing though doesn’t sound usable or advisable.
Exactly what I thought. Its just not so easy trying to convince a couple of designers who have spent hours crafting some designs for a big client to say “sorry we can’t use the full sized image”
If the image is a background image then simply let it stay centred in the background at whatever width the page is. You can set a max-width of 1600px (instead of width) for larger devices but just let the element get smaller with the window.
I know, and I have this working on other pages, to a certain degree anyway. Its just with this page in particular, I need to load two very large images which can’t be done as one image set as the background, hence me breaking this up into two containers.
Unless I misunderstood what you are trying to achieve
No you got it right on. But I need the image not to change size, losing image quality and I need lots of hidden buttons placed on top.
Nevermind, thanks for the input Paul.
Though if you do think of a non js solution, would be great to know
.background-image{
background:no-repeat center;
background-size: cover !important;
moz-background-size: cover !important;
-webkit-background-size: cover !important;
height:300px;
padding:20px;
}```
& put that in a div that is positioned as you wish w/in the other div?
.container-top {
background: url(“/static/media/images/bg-tophalf.jpg”) no-repeat scroll center top rgba(0, 0, 0, 0);
height: 913px;
position: relative;
width: 1600px;
…are what causes the scroll bars which can’t be changed. Are you saying place your div with the .background-image class on another div inside my div? H: 300 w: 20… how does that work? My images / containers can’t change size.
Hello Barry.
I hope i did not misunderstand.
you have several divs, stacked on top of each other, they are in fixed position, and the background images should cover the entire div.
I didn’t think that a backgound image would case the scroll bars.
So i’d have to wonder about the content. Making the overflow hidden.
And then using at media queries for the smaller size of the screen.
Regardless of the background images, the divs are a fixed size of 1600px that causes the scroll bars. I’ve tried the solution you suggest and many others. I think I’ll need to use a bit of JS.
Hopefully shouldn’t be hard. Just thought a easy CSS solution might fix it.
As mention, the images can’t change size, though maybe hide them chop them off when smaller screen.
I’ll have another go and if not use some JS.
Thanks again for help.
Yes that’s the only way to do something like that but I can’t help feeling you are being lead down the wrong path:)
A visible horizontal scrollbar has been the biggest ‘faux pas’ since year dot (unless you are creating one of those horizontal scrolling layouts -which are usually dreadful from a users perspective).
A know, and goes against everything I’ve learnt, but again, I have to do the best with what I’ve been handed. If it was me, I’d have a fully responsive solution in place, the spec is only needed for desktop and everybody seems happy with the scroll bars.
I might come back to this and try a better solution if I find one.
Ha yes designers…
Though on another note Paul, it should be down to ourselves as coders, developers to make this work
I often tell the designers that what they want is not feasible as quite often they are not web savvy and their designs only work on paper. It is our job as developers to nudge them in the right direction otherwise we aren’t doing our job well.
These days we have no control over devices that users use so we must code with that in mind and that means avoiding fixed widths most of the time and adapting designs in the best way possible. When I’m sent a PSD to code I pick out the areas that just won’t work and send it back for re-design or discuss alternatives with the client. At best PSDs can only really hint at what the final design should look like on the web.
Don’t get me wrong I think we should still to get close to the designers vision but sometimes you just have to draw he line and say no:)
I wouldn’t be happy with a site that has a horizontal scrollbar by default (unless it was the sideways scrolling one I mentioned earlier) but there may be a case for certain wide elements to have scrollbars themselves rather than the window.
In the end as long as you have made it clear to the designers that this is not a web savvy approach then you can push the blame back to them if the client complains later.
I realise you understand all this - I’m just putting it out there for others in the same situation.
A good approach. I kind of had the feeling that if you did this it was kind of showing you wasn’t skilled enough ha. Maybe they will give it to somebody else
[quote=“PaulOB, post:11, topic:101800”]
I’m just putting it out there for others in the same situation
[/quote] Appreciated and very welcome, thanks for sharing your views.
