html - Have a white space to the right and repeating image to the bottom right with bootstrap -
here's situation:
this screen shot of www.dreamstreetentertainment.com, site still under construction live anyway. don't ask. customer wants that. suffice say, have white space right , repeating image bottom right.
the background in pieces:
- the moving cloud segments on the
- background sky
- the hollywood /los angeles skyline
- the road hollywood
- the lamps (separate) , css set
issue:
the customer uses 27" monitors , image see, (i use 22" monitor) simulated down 80% of full screen.
solution:
how can fix side white space , repeating image lower right bottom?
here's
html, body { margin: 0; min-height: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; font-family: 'open sans', sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; color: #ffffff; background-color: rgba(0, 0, 0, 0); font-size: 18px; line-height: 1.8em; padding-top: 90px; display: flex; flex-direction: column; }
and override in custom-ds.css
html, body { height: 100%; padding: 0; margin: 0; }
but problem still remains.
i have backstretch.js on other sites i've built tricky since background split @ horizon of sea , sky.
thoughts?
the top white space sky image ending, , bottom space water image ending, , repeating.
to without changing images change following css.
.waterbackground { background-repeat: no-repeat; background-size: cover; } .skybackground { background-repeat: no-repeat; background-size: cover; }
changing background-size cover make background images fill it's entire parent container, in case "bg_clouds" fills entire viewport.
Comments
Post a Comment