7 replies [Last post]
Notauser
Notauser's picture
Offline
newbie
Last seen: 4 years 7 weeks ago
Timezone: GMT+3
Joined: 2015-09-22
Posts: 4
Points: 5

I have a background image 1780px x 700px and i am using bootstrap 3. When i am on high resolutions the image is displaying just fine. However, when i try to resize the browser an extra white space is created and messes up my design. I have set the display:block property but it does not change anything. Here’s a pic:

http://s29.postimg.org/9z0k9hkjb/bac.jpg

Some code:

.intro {
background-image: url(/img/banner-bg.jpg);
background-repeat: no-repeat;
height: 80%;
background-attachment: fixed;
background-position: center center;
background-size: contain;
 
It is important for me to use background-size: contain as i want the picture to hold its current aspect ratio. The problem is that the container does not adjust accordingly and leaves an extra space.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 38 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

A few questions

Where is the rest of the markup and css? Have you got a link, or can you make a minimal test case?

Why haven't you scaled the image prior to serving? Scaling a large image uses a lot of computing power (hard on batteries) and sucks up the user's bandwidth.

Why declare a height on .intro? That's probably what is making the excess white space.

Why the fixed background-attachment?

If you insist on using bootstrap, you will end up with a lot of code bloat, both html and css, making maintenance and edits a royal pain.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Notauser
Notauser's picture
Offline
newbie
Last seen: 4 years 7 weeks ago
Timezone: GMT+3
Joined: 2015-09-22
Posts: 4
Points: 5

gary.turner wrote:Where is

gary.turner wrote:

Where is the rest of the markup and css? Have you got a link, or can you make a minimal test case?

Why haven't you scaled the image prior to serving? Scaling a large image uses a lot of computing power (hard on batteries) and sucks up the user's bandwidth.

Why declare a height on .intro? That's probably what is making the excess white space.

Why the fixed background-attachment?

If you insist on using bootstrap, you will end up with a lot of code bloat, both html and css, making maintenance and edits a royal pain.

cheers,

gary

Okay first things first, here's a Link to my website.
The image is like 85kb with dimensions of 1922x722px.
If i dont declare height in pxs or in % the image wont display. The same happens with max-height.
The fixed background-attachment was because i was using stellar.js but now i am using skrollr.js (parallax) that does not require fixed backgrounds.
I am using bootstrap because it helps me to achieve a responsive design.
Any help appreciated!

//mod edit: Link fixed. Don't forget the protocol prefix. ~g

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 38 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Thanks for the link, it makes

Thanks for the link, it makes it much easier to understand what you're aiming at.

The reason you need the height property is that you have no content in the banner. Make the image a foreground object and your issues go away. The image will self-adjust its size if you set its width to a percentage value. The container will be the height of its content.

You don't do your visitors any favors by having such a large image in the first place. It slows downloading, uses memory and for folks paying for data by the byte, is expensive.

Using {position: fixed;} or {background-attachment: fixed} is cpu intensive and that means batteries die sooner. There is seldom any compelling reason to fix an element. People know what the scroll bar does; it's one of the first two things people learn about along with the back button.

The use of web fonts, lacking any compelling reason, is user unfriendly. The 'roboto' Google font is too close to Tahoma, a web safe font that's already in the browser, to bother with another download and the absolutely silly stylesheet that supports it. Set your font stack to {font-family: tahoma, verdana, segoe, sans-serif;} wherever you now use roboto.

Now, to bootstrap: A stylesheet that's 115kB?!? Minified? What a steaming pile. Για χάρη των θεών get rid of it. It does not aid in making your site responsive; it only makes it a bloated mess.

If you don't use html5 elements (and there's no reason here that I see), you don't need the shim scripts for IE.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Notauser
Notauser's picture
Offline
newbie
Last seen: 4 years 7 weeks ago
Timezone: GMT+3
Joined: 2015-09-22
Posts: 4
Points: 5

gary.turner wrote: Thanks for

gary.turner wrote:

Thanks for the link, it makes it much easier to understand what you're aiming at.

The reason you need the height property is that you have no content in the banner. Make the image a foreground object and your issues go away. The image will self-adjust its size if you set its width to a percentage value. The container will be the height of its content.

You don't do your visitors any favors by having such a large image in the first place. It slows downloading, uses memory and for folks paying for data by the byte, is expensive.

Using {position: fixed;} or {background-attachment: fixed} is cpu intensive and that means batteries die sooner. There is seldom any compelling reason to fix an element. People know what the scroll bar does; it's one of the first two things people learn about along with the back button.

The use of web fonts, lacking any compelling reason, is user unfriendly. The 'roboto' Google font is too close to Tahoma, a web safe font that's already in the browser, to bother with another download and the absolutely silly stylesheet that supports it. Set your font stack to {font-family: tahoma, verdana, segoe, sans-serif;} wherever you now use roboto.

Now, to bootstrap: A stylesheet that's 115kB?!? Minified? What a steaming pile. Για χάρη των θεών get rid of it. It does not aid in making your site responsive; it only makes it a bloated mess.

If you don't use html5 elements (and there's no reason here that I see), you don't need the shim scripts for IE.

cheers,

gary

Thanks for your answers and suggestions. Can you please tell me how i make the picture foreground? I mean now i am using skrollr.js to have a parallax picture but i cant use skrollr.js with an tag. As i said before the image is only like 85kb i dont think that will be a problem (in my opininion). Thanks again.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 38 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Quote:Can you please tell me

Quote:

Can you please tell me how i make the picture foreground? I mean now i am using skrollr.js to have a parallax picture but i cant use skrollr.js with an tag.

I don't see that your banner image is doing anything that's the least bit interesting, so what is the js for? Besides sucking the life from batteries?

<section class="intro" data-stellar-background-ratio="0.5">
  <img src="/img/banner-bg.jpg">
</section>
 
.intro {}
 
.intro img {
    width: 100%;}

Quote:

As i said before the image is only like 85kb i dont think that will be a problem (in my opininion).

Compared to the bloated size of the page, it seems trivial. Folks paying data rates or having data caps on their service may feel differently.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Notauser
Notauser's picture
Offline
newbie
Last seen: 4 years 7 weeks ago
Timezone: GMT+3
Joined: 2015-09-22
Posts: 4
Points: 5

Thanks gary. The page you see

Thanks gary.
The page you see is still under development. What do you reccomend me? Remove completely bootstrap? How i will be using containers or collumns or buttons that are built inside? I like how my elements stack on smaller devices and as i am a beginner am afraid that without bootstrap i wont be able to control my development.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 4 years 4 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

put the margin: auto; css to

put the margin: auto; css to your banner image,then you dont need to add the extra css because already your image width size are too big untill width 1980px your image come up with good quality