I have used this code but only the width is stretching. I want the whole image to stretch into the full screen.
jsFiddle
body
{
margin: 0px;
padding: 0px;
color: white;
font-family: Verdana;
background-size: 100% auto;
background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}
Here is a method I like to use:
JS Fiddle
body {
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
what about background-size: cover;?
body{
color: white;
font-family: Verdana;
background-size: cover;
background-image: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
}
you could use html instead with height:100% and cover as value for background-size or only 100% if you do not mind to see image being streched :
jsfiddle
html
{
height : 100% ;
margin: 0px;
padding: 0px;
color: white;
font-family: Verdana;
background-size: cover;
background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}
jsfiddle
html
{
height : 100% ;
margin: 0px;
padding: 0px;
color: white;
font-family: Verdana;
background-size: 100% 100%;
background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}
you might want to use min-height on HTML : jsfiddle
html
{
min-height : 100% ;
margin: 0px;
padding: 0px;
color: white;
font-family: Verdana;
background-size: 100% 100%;
background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}
Related
I am having a problem with the background image on my body tag. There is a white space on the bottom of the page when viewed on mobile.
Here is my css code:
body {
background: url("/images/laptop_bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Proxima Nova', Georgia, sans-serif;
}
html{
height: 100%;
}
The solutions I found on stack-overflow does not work. Any help would be appreciated. Thanks
Set height: 100vh; to html AND TRY background-size: 100% 100%;
body {
background: url("https://material.angular.io/assets/img/examples/shiba1.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
}
html{
height: 100vh;
}
For your body tag, set the CSS as follows for a full display of the background-image.
body {
width: 100%;
background-image: url("/images/laptop_bg.jpg");
background-position: 0%, 0%, 50%, 50%;
background-size: auto, cover;
background-repeat: no-repeat;
font-family: 'Proxima Nova', Georgia, sans-serif;
}
I want to add a parallax effect to my home page.
Currently, the background image is fixed, but this is not the effect I'm looking for.
I want the background to be slower than my page.
As in this example :
https://codepen.io/RenanB/pen/GZeBNg
I managed to do this in javascript but I have a lot of problems with Drupal 8.
So I want to have a parallax effect in pure CSS.
I tried to follow this tutorial that is already two years old, but I have not managed to adapt my code :
http://keithclark.co.uk/articles/pure-css-parallax-websites/
Here is the style sheet of my homepage :
/*-------------------------------------------*
/* Page accueil
/*-------------------------------------------*/
.path-frontpage .main-container {
width: 100%;
padding: 0;
margin: 0;
}
.path-frontpage .main-container .row {
margin-left: 0;
margin-right: 0;
}
.path-frontpage .main-container .row .col-sm-12 {
padding-left: 0;
padding-right: 0;
}
#block-parallax1 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-1.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax2 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-2.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax3 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-3.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax4 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-4.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax5 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-5.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-section1,
#block-section2,
#block-section3,
#block-section4,
#block-section5 {
text-align: center;
padding: 2em;
font-size: 20px;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax1 .field--name-body,
#block-parallax2 .field--name-body,
#block-parallax3 .field--name-body,
#block-parallax4 .field--name-body,
#block-parallax5 .field--name-body {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
color: #ffffff;
padding: 15px;
background-color: rgba(0, 0, 0, 0.38823529411764707);
}
#block-parallax1 h2,
#block-parallax2 h2,
#block-parallax3 h2,
#block-parallax4 h2,
#block-parallax5 h2,
#block-section1 h2,
#block-section2 h2,
#block-section3 h2,
#block-section4 h2,
#block-section5 h2 {
margin-top: 0px;
font-size: 30px;
}
#block-parallax1 p,
#block-parallax2 p,
#block-parallax3 p,
#block-parallax4 p,
#block-parallax5 p {
font-size: 16px;
}
#block-section1 p,
#block-section2 p,
#block-section3 p,
#block-section4 p,
#block-section5 p {
font-size: 20px;
}
I'm looking for the parallax effect of Slide 3:
https://codepen.io/keithclark/pen/JycFw?editors=1100
i hope this code helps for you
https://jsfiddle.net/LmjeLbmk/20/
.parallax {
font-size: 200%;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.parallax__layer {
padding: 100vh 0;
}
.parallax__layer--back {
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div class="title">This is the background</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">This is the foreground</div>
</div>
</div>
https://jsfiddle.net/LmjeLbmk/20/
as per your comment, to hide scrollbar try this code
.parallax1::-webkit-scrollbar {
width: 0px;
background: transparent;
}
I'm creating a landing page and when I test my landing page in litmus it shows up with my background image missing.
The weired thing is that my other background images are showing up in IE10 and IE11.
I added more of the code so it can be easier to help a solution.
/* Part 5: Points Section */
.pad_style2 {
padding-top: 50px;
padding-bottom: 50px; }
.points_div {
padding: 20px 0px;
position: relative; }
.single_point_div {
padding: 20px 0px; }
.point_circle {
border-image: url(../images/dot.png) 30 round;
border-radius: 100%;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
position: absolute; }
.point_circle img {
position: relative;
top: 10px; }
.point_ico {
margin-left: auto;
line-height: 40px;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
color: #74ff00; }
.single_point_text {
margin-left: 3px;
font-size: 25px;
color: #f32525;
line-height: 50px;
font-family: 'Source Sans Pro', sans-serif; }
.single_point_text2 {
margin-left: 55px;
font-size: 35px;
color: #f32525;
line-height: 35px;
text-align: center;
font-family: 'Source Sans Pro', sans-serif; }
.single_point_text3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 900;
font-size: 1rem;
text-shadow: 2px 2px #69696a;
line-height: 45px;
white-space: nowrap;
overflow: hidden; }
.proto_div {
text-align: center; }
#proto_img {
width: 105%;
height: auto; }
.bbsect {
color: #d70d37;
padding: 35px 0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
/* Part 5: Client Section */
.clientsect {
background: #052c5b url("http://transfers.calisepartners.com/TAXEASE/Visual_TEST/Lenders_Visual/Pictures/body_icons.png") no-repeat;
padding: 35px 0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
.bottomgraphic {
background: url(http://transfers.calisepartners.com/TAXEASE/Visual_TEST/Lenders_Visual/Pictures/Pictures/bottom_icons.jpg);
background-position: center top;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.bbsect {
background: #d70d37;
padding: 35px 0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
.howitworkssect {
background: #eaeaea;
padding: 35px 0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
.bold_text {
font-weight: bold; }
.client_style1 {
font-size: 35px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 40px;
color: #fff !important;
padding-bottom: 20px; }
I added a link of my landing page. Link to Page
Try writing:
background: url(/*your url*/);
background-repeat: no-repeat;
Instead of background: url(/*your url*/) no-repeat;
I'm having a problem with background image scaling in Safari (specifically on the iPhone).
Here's how it looks on iPhone:
Here's how it should look (at least):
Here's the CSS code:
#home {
background-color: rgba(0,0,0, .5);
background-image: url(../img/header-bg.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
position: relative;
text-align: center;}
img {
vertical-align: middle;
max-width: 100%;
height: auto; }
I forgot to mention that "home" is the "id" of a <section> tag. The idea is to use an image background for this "#home" <section>.
I don't have safari, Try it:
#home {
height: 500px;
background-color: rgba(0,0,0, .5);
background-image: url(../img/header-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment: fixed;
position: relative;
text-align: center;
}
I've been trying to get a full screen background in the header tag but for some reason it doesnt show?
Code
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-image: url(../img/header.jpg);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<header></header>
You are missing height:100% in header but even so it won't display because this a child of body and html you need to give height:100% and width:100% to parents (body/html)
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
header {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background: url(//placehold.it/500) center / cover;
}
<header></header>
Another approach is using 100vh
body{
margin: 0;
}
header {
position: relative;
width: 100%;
height: 100vh;
text-align: center;
color: #fff;
background: url(//placehold.it/500) center / cover;
}
<header></header>