landing page advice

@pikosanFeb 16.2016

Hey guys,
could you please help me with an advice how to solve the issue with my landing page.
The thing: I want to make a landing page, so when user visits a website he sees the page with an image on the background that covers only the section of the landing page (not entire website). The problem before I had the image would not cover the section entirely in all browsers (particularly in Google Chrome).
Through JS I checked that my screens resolution (1680×1050) and set the height to 1050px.
So, is it the way to solve it or could you please help me to figure it out. I don’t want to copy and paste someone elses code, as I would really like to understand it myself. And please don’t judge me for my text I am only started to lear

So basically I have
<navbar>
<div class=”jumbotron jumboIntro”>
<div class=”container introtext” >
</div>
</div>
in jumbotrone i need to place the image that would cover entire screen regardless the resolution or zoom in out. Is it possible to achieve?

the css I use for jumbotron jumboIntro” and “container introtext”:

.jumboIntro
{
background-image:url(img/rabbit.jpg);
background-color:transparent;
width:100%;
height:1050px; /*this used to be 100%*/
background-position:top left;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

.container.introtext
{
width:800px;
text-align:justify;
margin-right:32%;

}

to post a comment

CSS

5 Comments(s) _↴

@CodionFeb 17.2016 — #

background-image:url(img/rabbit.jpg);
 background-color:transparent; 
 width:100%; 
 height:1050px; /*this used to be 100%*/
 background-position:top left;
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-size:cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;

@CodionFeb 17.2016 — #

<i>
 </i>background-image:url(img/rabbit.jpg);
 background-color:transparent; 
 width:100%; 
 height:1050px; /*this used to be 100%*/
 background-position:top left;
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-size:cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;

The majority of these lines, can be crushed into one line, like this:

<i>
 </i>background: url('../img/rabbit.jpg') no-repeat fixed top left transparent;

Now let's fix the problem, there is a [i]relatively[/i] new thing in CSS called Viewport-Precentage Lengths.

Instead of setting a pixel or em/rem value, we can use 'vh'.

I assume you're using Bootstrap, but incase your not, add a third class name to your jumbotron and let's call it "jumbo-height".

<i>
 </i>&lt;div class="jumbotron jumboIntro jumbo-height"&gt;
 &lt;div class="container introtext" &gt;
 &lt;/div&gt;
 &lt;/div&gt;

then set the height value to 100vh, so it spans the whole height of the viewport, that the user viewing your site is using - don't forget that alot of people will still be on a 720p resolution, or a 1080p resolution, so 1050height won't look right for them, if you don't want to use VH, it's best to set the height to the standard 'above-the-fold' height, which is 650px.

<i>
 </i>.jumbo-height {
 height: 100vh;
 }

Let me know if you need help.

Bax.

@pikosanauthorFeb 17.2016 — #

<i>
 </i>background-image:url(img/rabbit.jpg);
 background-color:transparent; 
 width:100%; 
 height:1050px; /*this used to be 100%*/
 background-position:top left;
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-size:cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;

The majority of these lines, can be crushed into one line, like this:

<i>
 </i>background: url('../img/rabbit.jpg') no-repeat fixed top left transparent;

<i>
 </i>&lt;div class="jumbotron jumboIntro jumbo-height"&gt;
 &lt;div class="container introtext" &gt;
 &lt;/div&gt;
 &lt;/div&gt;

<i>
 </i>.jumbo-height {
 height: 100vh;
 }

Let me know if you need help.

Bax.[/QUOTE]

Thank you very much for your attention to my post. I tried to use height:100vh for jumbotronIntro and it broke the structure of the website especially when it is in a smaller screen as for mobile device. I uploaded this example with height 100vh so you can see and maybe suggest me something else. But thank you anyway, I didn't know about this vh vw before.

http://rabbit.esy.es

@CodionFeb 18.2016 — #By the looks of it, your missing a closing < /div > from the jumbotron element - if you want to zip the bootstrap folder up and send it to my [I][EMAIL="[email protected]"]email[/EMAIL][/I], i'll have a look and send it back.

Bax.

@pikosanauthorFeb 18.2016 — #Thank you very much! I sent you the files, if you could point me at my mistakes would be great!

Also in #CSS _↴

[RESOLVED] Checkout Section Is Set Off to Right By 20px [RESOLVED] Content getting clipped as page resizes Using fewer table columns on mobile version of page

Success!

Help @pikosan spread the word by sharing this article on Twitter...

Tweet This

landing page advice

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

landing page advice

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴