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;
Related
I tried several solutions but none worked, the image does not want to show in full screen with the same size that I specified would it be possible to have a solution in css?
Here is my code:
body {
margin: 0;
padding: 0;
background:url(cactus2.jpg) no-repeat black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#nocursor {
cursor: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
}
body {
margin: 0;
padding: 0;
background: url(http://via.placeholder.com/100x50.jpg) no-repeat black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#nocursor {
cursor: none;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
position: fixed;
object-fit: center;
}
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;
}
So I'm trying to set this image: jordandevelop.com/test/img/header.jpg
as the header background. The problem I'm having is it won't respond to different screen resolutions. Below is the CSS I have for this current design.
header {
width: 100%;
height: 1600px;
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;
}
Any advice would be great. Here's a link to the website: https://jordandevelop.com/test/
EDIT: Here is my current CSS for the header.
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-repeat: no-repeat;
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-content {
position: relative;
width: 100%;
padding: 100px 15px;
text-align: center;
}
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
}
header .header-content .header-content-inner hr {
margin: 30px auto;
}
header .header-content .header-content-inner p {
margin-bottom: 50px;
font-size: 16px;
font-weight: 300;
color: rgba(255,255,255,.7);
}
#media(min-width:768px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
padding: 0 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-content .header-content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1000px;
}
header .header-content .header-content-inner p {
margin-right: auto;
margin-left: auto;
max-width: 80%;
font-size: 18px;
}
}
The following code should work:
CSS: (add the following to your css code)
header{
background: url(/test/img/header.jpg);
background-size: cover;
}
or ( this one is responsive, preserves the whole image )
header{
background: url(/test/img/header.jpg);
background-size: 100% 100%;
}
Hope it helps, enjoy!
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>
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);
}