Bootstrap jumbotron background image.
That means we are going to insert some background image in our bootstrap jumbotron.
So stay tuned.
[Music...]
Hello and welcome to another new episode of learning simplified.
Today in this tutorial we are going to insert a background image
at our Bootstrap jumbotron such that the image fits right into this jumbotron and it appears
to be ok in every sense.
So this is the thing that we are practically looking at,
this is what we are going to do in this tutorial.
We are going to create the background image first and then, into this mobile
responsiveness preview we will observe that the background image is practically gone and
the background colour is been replaced.
We are going to arrange all these contents like
this header tag, this subscribe button and whole of this containing tag, paragraph
element, we are practically going to align them all; so this is the first thing that
we are going to make here.
As we can see we have created 2 blocks of content here.
The first one I left it empty intentionally and the second one here I have
placed these header tag over here " hello cruel world", and in the second place
this paragraph.
In the third case I have placed a subscribe button over here.
So this is the thing.
Now if we just get back to our original project and reload, we can see now
that all those things those are practically aligned over here into a single block of element
as we can see ,here it is.
This is a single block of element And this is another
elemental block which is right now is empty.
Now in this case what we can do we can practically insert an image here for say...
If we just reload we can see that the image is imposed what all we can see that the
image is far bigger than the container.
So this is what we have to rectify first.
In the first case, all we are doing here we are observing
what will happen if we just bring on an image instead of a background image.
We are practical using a class which is known as
img-responsive.
Come back to your project and reload and now you can see that the image
responsive is working.
Now if you just press Control + shift + M, we can see that this
images practically on top.
As you are using a 320 by 480px, that means a very small
smart phone or a mobile phone version then all you can see that all of them are just
coming vertically up and down.
Now if we just change this dimension to 768px, and now if
we see this kind of image placement you can observe over here.
If you use an image source this sort of thing will happen.
Just change this value to 1024px and then you
rotate and you can see that you are viewing now your contents in this manner.
They are now placed well.
But this is not the proper view actually we were looking for.
We want in our normal preview they will be observed
as this one as we can see.
But this is not the exact display that we are, practically
we are experiencing here.
So this is the thing that is needed to be changed.
And that is why we need to include a background image in this particular case.
So we will be getting back to custom.css and in this
jumbotron we will practically use a background URL.
So this is the background URL.
You are placing it on top.
And here, in this index.html we are removing this image source.
Get back to custom.css, now reload, now we can see that the color practically being replaced
by the background image.
Now the question is this wasn't the actual preview
that we were expecting.
This is the actual preview.
So that is why we are getting back to custom.css, we are making it top and
centered position.
And here we are providing the fact that background-size:cover.
Reload and you can see that the background size is now covered but still now as we can
see here this is not the same way as we have observed here.
We need to make some certain amendments over here in this situation
so all we are going to do we are increasing the gap first, here, and the second
thing is we are going to place a padding.
Now get back to your project and reload and we think that it is really not working so
we need to change this thing; 10em, make it 10em:
Here it is.
So now we can see that it is getting almost 100% of the background size
as we have observed here, almost the same.
So all we need to do we need to provide some
kind of padding thing over here and you need to
make some experiment.
The last thing is press control + shift + m, get back to the mobile responsiveness
preview and you can see that this is practically the image.
Now the point is if you just make a background size cover and if you expect
that the image will be scaled down according to the media device width display
then it is an entirely wrong concept.
This is practically a background image.
This is not an image source.
You are not bringing images here quite with the image source option.
You are bringing images here with the background image condition and this is what
makes your image depending on the width of the Div or block element, the height of the
div or block element and every those sort of
things.
You may just increase padding, you may increase the height, you may provide a
particular height, but height is strictly prohibited in case of mobile responsiveness
preview cause in normal case you may observe that it is working, it is making magic for
the project, but in case of very smaller preview like this one, 320 by 480px, it is
practically making no sense.
Here it is.
It is practically giving you a blurrish background.
I would like to make another change here, another experiment, just provide a
fixed; that means this jumbotron background will be in a fixed position right now.
Now if you just reload and if you scroll down
and scroll up your mouse you can see that your
background images practically in a fixed condition and everything inside those are
practically is scaling up or scaling down accordingly.
Change this fixed position; we do not need to mention any fixed position.
Reload.
Now you can see that it is now almost fitting into a perfect position where the
image is in a particular site and the contents are in another particular site.
So this is the thing that we need to do here.
Just copy this thing jumbotron.
Copy this selector name jumbotron, and @media query,under this
max-width of 767px of device width,all you need to do, you need to define this jumbotron
element.
Get back here, and define here that the background will be changing here Its color,that
this background will be changing from a normal image preview to a solid background color.
That means this one.
Now if you just come back here and reload you can see here that
after 768px, we have practically used here col-sm-6, that means the device width display
up to 768px at the lowest position, all these contents will be placed side by side and
they will be horizontally aligned and this is the exact thing that you may see here.
But in case if the device display width reduce
lower than 768px, then you will be observing a solid background color instead of the particular
background image.
Change it to 320px, this is a solid background color,As you can
see it is it is just black all around.
But when you are watching it in a normal preview you
can see that this image's back into action, background is already back into action.
If you are intending to bring a background image
not as an image source, if you want to bring your contents as a background image then all
you need to do make proper specification for that background image, such as the position
from the top, from the center, whether it should be fixed or it should be in a relative
or static position, the next thing is you must have to place this background size in
a covered position search for the whole div
fits into that background image.
Instead you will be getting a lot of errorfull display
that you do not wish to have.
So this is the part that we need to know from this tutorial;
if you have like this video then do not hesitate to hit that red subscribe button.
Hope to see you guys in our next tutorial.
Till then, bye.
For more infomation >> Aramsamsam - Kinderlied zum nachmachen (mix) - Duration: 37:28. 
For more infomation >> Nibiru will be Destroyed by the Jupiter, Evidence is Confirm in North American Sky 27th SEP 2017 - Duration: 52:51. 
For more infomation >> ✌ #Car Reviews:【試乗記＆動画】｢太って噛みつく力は増したが鳴き声は変わらず｣ ダッジ｢チャレンジャー SRT ヘルキャット ワイドボディ｣ ✌ - Duration: 7:52. 
For more infomation >> தெய்வமகள் மோனிஷா நிஜ' பெற்றோர் யார் தெரியுமா | Tamil Cinema News | Kollywood News | TAMIL SCREEN - Duration: 0:47. 
For more infomation >> ✌ #Car Reviews:スズキ、東京モーターショー2017の出展車概要を発表 電動コンパクトSUVのほか、発売が期待されるモデルも多数 ✌ - Duration: 5:00. 
For more infomation >> Discover Nibiru planet secret of Earth devastation coming soon Update 27th September 2017 - Duration: 56:20. 
For more infomation >> ✌ #Car Reviews:ランボルギーニ、来季から導入されるワンメイク・レース用車両｢ウラカン スーパートロフェオ EVO｣を発表 ✌ - Duration: 2:59. 
For more infomation >> ✌ #Car Reviews:ホンダ・シビック タイプR（FF/6MT）そのタイプR、激速につき ✌ - Duration: 15:46. 
For more infomation >> Süßer Paarauftritt: Kate Hudson und Danny im "Partnerlook" - Duration: 1:56. 
For more infomation >> Truyện nhổ củ cải - Truyen Nho cu cai - Thiếu nhi TV - Duration: 3:44. 
Không có nhận xét nào:
Đăng nhận xét