I am making a full page parallax image header for a wordpress blog. I have applied the following styles to the header image (I found out the css classes by inspecting it in dev tools).
.header {
background: no-repeat center;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
height: 100vh;
margin: 0;
background-attachment: fixed;
position:relative;
}
Even after applying this images, I notice a hige white space below the image, once I scroll it down. You can see the issue here: http://bakemachine.com/travel/
How can I remove this issue? I am using the Hemingway theme and am new to wordpress development. Thanks in advance!
To remove the gap bellow the image, just rewrite the margin rule on the .section-inner. This class is inside the navigation.
.section-inner {
width: 1040px;
max-width: 86%;
margin: 0 auto; // this rule is changed
}
Related
This page only contain a header there is no footer at all https://test.com/
What I'm trying to do is to make the page at full size without scrolling on mobile and on laptop.
I tried to set the high to 100%
But it doesn't work.
My whole problem from this CSS I guess
.custom-header-media {
min-height: 200px;
}
I tried to set it as
height: 100%;
height: auto;
and still doesn't work.
Also I tried to setup the pic as:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
And still doesn't work, I setup the the page as
body, html {
height: 100%;
}
Can anybody tell me what I'm doing wrong?
Try this CSS for the full-width image
.custom-header-media .wp-custom-header img, .custom-header-media video {
height: 100vh;
}
.site-inner {
overflow-x: unset;
}
juust set: height: 100vh will fix it. as vh = viewport height.
Here an example: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vh
The grey color you are getting under is not weird, this is just the body color going until the bottom of the page.
But you might encounter other problem or responsiveness, that you should check based on the screen width.
.custom-header-media {
min-height: 100vh;
}
Enjoy.
As the title says, the issue arises only when viewed on mobile.
On my pc it looks exactly as desired but when I open it up on a mobile device there is a blank space between the background image and the footer?
Site is live #
https://claritysalonspa.com
Any help would be appreciated!
I am not sure how you are adding the background image in the backend, but try adding the following style. In here, .page-id-29 is the class added to the current page, and you added a background image to it.
.page-id-29 {
background-image: url(YOUR-IMAGE);
background-size: cover;
background-repeat: no-repeat;
height: 100vh; // add the height
background-position: 50% 50%; // center the image
}
so the solution is to add height: 100vh and also change the image position so it is centered.
Add this in your style.css
#media screen and (max-width:600px){
.page-id-29{height: 95vh;}
}
It's because your bodydoesn't have enough content. If you add more content then there is no trick needed.
You can overcome this by adding min-height to your body tag.
.page-id-29 {
background-image: url(https://claritysalonspa.com/wp-content/uploads/2018/03/IMG_5215.jpg);
background-size: cover;
background-repeat: no-repeat;
min-height: 92vh; /* this for height */
background-position: center center; /* to center the image */
}
If you want to make your footer always bottom of the viewport please add thi also.
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
padding: 0 !important;
}
I am currently trying to use a subreddit theme and resize an image to be bigger/actual size of uploaded image.
Current code for the Logo is:
/* SUBEDDIT LOGO ADDON
----------------------*/
#header .pagename a {
width: 100px;
background: url(%%subredditlogo%%) left center/auto 50px
}
I am trying to scale image to be bigger with keeping aspect ratio.
Like I said this is on Reddit, so I can only interact with the subreddit stylesheet.
I have edited it some and played with it, I have gotten improvements, but not the full image to show.
Here is my current code:
/* SUBEDDIT LOGO ADDON
----------------------*/
#header .pagename a {
width: 300px;
background: url(%%subredditlogo%%) left center/auto 300px;
background-size:100% 200%;
background-repeat:no-repeat;
}
It has resized the width but I cant get the height to change. I have tired the:
left center/auto 300px;
but nothing, and also the
height: 100%;
height: auto;
Just looking to get it fixed now.
Try this:
background-image: url(%%subredditlogo%%);
background-position: left center;
background-size:cover;
background-repeat:no-repeat;
I believe you need to break out your "background" css into individual attributes in order for each attribute to work properly.
You could try this:
background: url(logopath) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
#header .pagename a img{
width:100%;
height:auto;
}
Try this for auto resize img.
I have been researching for a while to how to get my background image to work on different screen resolutions. After many failed attempts I noticed I can't even get a normal css background in. It's not the file, I have tried different formats.
Code for the different screen resolutions:
html {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
The code the normal background:
body {
background-image: url('Background.jpg');
}
That is strange. Did you check that the path to your image is correct? For example if the image is inside an "example" folder, the path should be "example/myImage.png".
As for a responsive background, I believe you are on the right track, although a simple background-size: 100%; would have been enough. Check this Jsfiddle https://jsfiddle.net/a0mvnj63/
Also try using an external image, like in my example, just in case.
Try to use your code like this background-image:url('../background.jpg'); with height: 100vh;
body {
padding: 0;
margin: 0;
height: 100vh;
background-image: url(http://static.tumblr.com/295a1562899724d920b2b65ba33ffb76/vouqyzj/f2Dna5qb8/tumblr_static_197ahk99f1z44ogskg4gw4c80.jpg);
background-size: 100% 100%;
background-position: center;
}
h1 {
text-align: center;
color: #fff;
}
<body>
<h1>Hello Universe</h1>
</body>
only background elements does not give height and width to any div or html.
try giving some height and width to your code. just like
html { background: url('background.jpg') no-repeat center center fixed; height:500px; width:500px; }
or just put some data on body so you get auto height width according to contain and get image in background.
I have a Joomla site that i have created a custom theme. The site is http://esn.teipir.gr/.
I have two images right and left that i want them to have background image fixed.
I use the following CSS rules
div.backgroundboxleft {
background-attachment: fixed;
background-image: url("/images/back_1.png");
float: left;
height: 822px;
top: 40px;
width: 457px;
}
and
div.backgroundboxright {
background-attachment: fixed;
background-image: url("/images/back_2.png");
float: right;
height: 822px;
top: 40px;
width: 457px;
}
If i remove the background-attachment all is OK with the images but when i add with firebug the following code everything messes up.Can you help me making the pages stay fixed without the background color being on top of the image?
Thanks
When you set background-attachment:fixed it fixes the background in relation to the window. So you would then need to adjust the background-position of your images so they appear in the right place. If you replace your backgroundproperties with the css below it will line up properly.
div.backgroundboxleft {
background-image: url("/images/back_1.png");
background-attachment: fixed;
background-position: 0 44px;
background-repeat: no-repeat;
}
div.backgroundboxright {
background-image: url("/images/back_2.png");
background-attachment: fixed;
background-position: 1323px 44px;
background-repeat: no-repeat;
}
Live example: http://jsfiddle.net/tw16/6fZ96/embedded/result/
To clarify background-attachment:fixed stops the background from scrolling with the window. So if your viewport is too small and you have to scroll horizontally or vertically the background will not move (i.e. it will be overlapped). More information can be found here.