When I am viewing the page on desktop, it's working fine and the image is responsive. When I am viewing the page directly on an iPhone, the image is not correct.
Index.html
<header>
<div class="jumbotron">
<div class="container" id="maincontent" tabindex="-1">
<div class="row">
<div class="col-lg-12">
<div class="intro-text">
<h1 class="name">Headline</h1>
<hr class="star-light">
<span class="skills">Sub-header</span>
</div>
</div>
</div>
</div>
</div>
</header>
Style.css (freelance.css)
.jumbotron {
background: url("http://vlastapolach.cz/img/expecto.jpg") no-repeat fixed;
background-size: cover;
background-position: top center;
height: auto;
}
Full code is here: https://github.com/vlastapolach/portfolio
I have tried these, but it is not working correctly on desktop either.
background-size: contain;
background-size: auto;
background-size: 100% 100%;
The shorthand syntax holds background-size to fixed. I have remove the fixed.
.jumbotron {
background: url("http://vlastapolach.cz/img/expecto.jpg") no-repeat;
background-size: cover;
background-position: top center;
height: auto;
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="jumbotron">
<div class="container" id="maincontent" tabindex="-1">
<div class="row">
<div class="col-lg-12">
<div class="intro-text">
<h1 class="name">Headline</h1>
<hr class="star-light">
<span class="skills">Sub-header</span>
</div>
</div>
</div>
</div>
</div>
</header>
Related
I have a working example website from the bootstrap template website and was analysing the code to understand how they created it. Namely how they centered the text on the first page located here. The code for that snipplet is,
<header class="masthead text-center text-white d-flex"> <!-- Background image set here -->
<div class="container m-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
...
</div>
<div class="col-lg-8 mx-auto">
...
</div>
</div>
</div>
</header>
So then I noticed that the m-auto was doing the centering. However, when I attempt to create it from scratch for myself and create this basic code,
<style>
#frontpage {
height: 100vh;
width: 100vw;
}
</style>
<section id="frontpage">
<div class="container m-auto">
<div class="row">
<div class="col-8">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
It doesn't center at all.
What am I forgetting here?
I would suspect that the container gets centered inside it's parent, which takes up the page.
you have copied the code but styles not included for them if guess correctly. anyway, I have corrected please try this one.
<style>
#frontpage {
height: 100vh;
width: 100%;
}
.center-me{
margin: auto;
width: 60%;
text-align: center;
}
</style>
<section id="frontpage">
<div class="center-me">
<div >
<h1> YOU CAN DO IT </h1>
</div>
<div >
<h1> I should be centered </h1>
</div>
</div>
</section>
Is this what you're after?
Version 1
https://codepen.io/panchroma/pen/YdEWZJ
HTML
<section id="frontpage">
<div class="container m-auto">
<div class="row">
<div class="col-8">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
CSS
#frontpage{
background-color:pink;
height: 100vh;
width: 100vw;
}
.col-8{
border:1px solid grey;
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}
Version 2
This also centers the text vertically
https://codepen.io/panchroma/pen/KbygzX
HTML
<section id="frontpage">
<div class="container m-auto">
<div class="row vert-align">
<div class="col-8">
<h1>YOU CAN DO IT</h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
CSS
#frontpage{
background-color:pink;
height: 100vh;
width: 100vw;
}
.col-8{
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}
.row.vert-align{
position: absolute;
top: 50%;
left:50%;
-ms-transform: translateY(-50%);
transform: translate(-50%, -50%);
}
I am having issues with my .parallax CSS class that is done default by the framework it's not resizing like my main image when it comes to mobile view. It works well with a desktop view. They move more to the left the last two images is there a possibility to move them more center? I tried to center them using position: no-repeat fixed center; in CSS or using frameworks default parameters.
https://i.imgur.com/itVR3No.jpg
The image goes off to the left and does not center.
$(document).ready(function() {
$('.parallax').parallax();
});
.ha-bg-parallax {
background: url(https://i.imgur.com/YqK1Oeu.jpg) no-repeat fixed center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
height: 100vh;
margin: 0 auto;
width: 100%;
display: table;
vertical-align: middle;
}
.parallax{
position: no-repeat fixed center;
max-width:100%;
}
.ha-bg-parallax .ha-parallax-body {
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<div class="navbar-fixed">
<nav class="blue darken-1">
</nav>
</div>
<div class="ha-bg-parallax text-center block-marginb-none" data-speed="20" data-type="background">
<div class="ha-parallax-body">
<div class="section scrollspy row title" id="home">
</div>
</div>
</div>
<div class="section light-blue lighten-5">
<div class="row container">
<div class="section scrollspy" id="info">
</div>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img alt="header1" src="https://i.imgur.com/QFPutVs.jpg"></div>
</div>
<div class="section light-blue lighten-5">
<div class="section scrollspy" id="portfolio">
</div>
<!--row for parallax-->
</div>
<div class="parallax-container">
<div class="parallax"><img alt="header2" src="https://i.imgur.com/gyYRcBK.jpg"></div>
</div>
<!--Floating Action Button custumize-->
<footer class="page-footer blue darken-1">
<div class="col l4 offset-l2 s12 container center">
<div class="section scrollspy" id="links">
</div>
</div>
This is the markup for my index page. I have the jumbotron and below it is a rowthat should be appearing below the jumbotron. But it is not, it is appearing on top of the jumbotron for some reason I can't figure out. ( I have close to none experience in bootstrap)
<div class="jumbotron jumbotron-billboard">
<div class="img"></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Jumbotron</h1>
<p>
Lorem ipsum is the best
</p>
Sign Up
</div>
</div>
</div>
</div>
<div class="row main-row">
<div class="col-md-3">
text1
</div>
<div class="col-md-3">
text2
</div>
<div class="col-md-3">
text3
</div>
<div class="col-md-3">
text4
</div>
</div>
And here is the .cssfor the jumbotron
.jumbotron-billboard .img {
margin-bottom: 0px;
opacity: 0.8;
color: #fff;
background: #000 url("gogn1.jpg") center center;
width: 100%;
height: 50vh;
background-size: cover;
overflow: hidden;
position:absolute;
top:0;left:0;
z-index:1;
}
.jumbotron {position:relative;padding:50px;}
.jumbotron .container {z-index:2;
position:relative;
z-index:2;
}
It would be very nice if some-one could inform me on why the row isn't just appearing below the jumbotron.
Here is a link to the problem here is a bootply for the problem bootply.com/9vxeaMQ6Xf
I am building the front end of my website in bootstrap 4. I'd like one of my pages to be split into four background images each of which fills a column so that the columns stack responsively on mobile. As of now, I have the design below where I use the background-image attribute to fill each column. The images do not fill the whole column though.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="img img-profile-1">
</div>
</div>
<div class="col-md-3">
<div class="img img-profile-2" >
</div>
</div>
<div class="col-md-3">
<div class="img img-profile-3" >
</div>
</div>
<div class="col-md-3 text-center">
<div class="img img-profile-4">
</div>
</div>
</div>
</div>
I added the css below to the div within each column and got the full image to show but there is a strange scrolling issue and white space when I make the viewport smaller.
.img-profile-1 {
background-image: url('../img/image.jpg') !important;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
margin-left: -15px;
margin-right: -15px;
}
Any ideas how to get handle this responsive vs background image dilemma?
Thanks!
You don't have to add another <div> inside the .col-md-3 in order to give it a background, instead you can just give that same <div> the class of .img-profile-1 and so on.
Bootstrap 4 also adds a cool class to where it removes all white spaces between each .col, it is called .no-gutters. You can view that on the snip below.
.img-profile-1,
.img-profile-3 {
background-image: url('http://placehold.it/500/aaaaaa/000000');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
}
.img-profile-2,
.img-profile-4 {
background-image: url('http://placehold.it/500/000000/ffffff');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-3 img img-profile-1">
</div>
<div class="col-md-3 img img-profile-2">
</div>
<div class="col-md-3 img img-profile-3">
</div>
<div class="col-md-3 text-center img img-profile-4">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>
Instead of setting the width and height in your css for the div, try adding class img-fluid to the image tag.
Here is the fix
If you add col-md-3 or any other column in bootstap it take right padding and left padding of 15px so that inner content will no cover full width. To cover full width we need to add another div with class row below the column so that inner content will be made to cover full width
Fixed code is given below
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="img img-profile-1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="img img-profile-2" >
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="img img-profile-3" >
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="row">
<div class="img img-profile-4">
</div>
</div>
</div>
</div>
</div>
What is the best way to make 'li' tags also scroll like parallax?
<div class="wrapper bg-4">
<div class="container">
<div class="row">
<div class="col-sm-7 invest">
<h3>Invest in Azerbaijan</h3>
<ul>
<li>Total Area: 86,600 km2</li>
<li>Water (%): 1.6</li>
<li>GDP (PPP): $168.4 billion</li>
<li>Time zone: AZT (UTC+04)</li>
<li>Population: 9,754,830</li>
</ul>
</div>
<div class="col-sm-5 flames">
<img src="img/flames.svg" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
Try this
First put this:
.parallax {
background-image: *image URL*;
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
And then put your div down at HTML but make sure you added this code before and after the div
<div class="parallax"></div>
Should look like:
<div class="parallax"></div>
<div>
Whatever
</div>
<div class="parallax"></div>