I want to sent body background image with full width and i have done this with your previous questions and answer but i have faced a problem with mozila browser the image is not set with full width.
This is my code which i am writing in css file..
background-image: url("/images/newimages/loginimage.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: 100% 100%;
This work fine on chorme browser but not working on mozila i do not what going wrong with my code.
Here is link for checking http://officemachine.mobi/login/index.php
check this link on both browser.
Add the following to your CSS. Should work.
html{
height:100%;
}
It's because 100% height is the height of the body, and the body is not that high. Try adding:
body { height: 100%; }
Related
On my website, I want to cover a page (not the home page) completely with a picture. It should completely fill the screen on every device. I have specially created a childtheme to handle this problem.
On my website, I want to create a gallery facility that greets the visitor with a picture across the entire screen. I've created a childtheme for it as already mentioned. I first tried once in the functions.php folder to set the content width to 100%. Unfortunately, this did not work. Then I tried it with all over the custom css field on my wordpress theme. That too did not work.
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
}
With this code, it should actually be funkitoinieren as I want. Unfortunately I can not integrate it into my data. He does not fit in functions.php and he does not work as a custom css either.
// set default content width
if ( ! isset( $content_width ) ) {
$content_width = 680;
}
This code in the functions.php folder was my second attempt. I could not set the width to 100% and on all other values she looked the same.
I expect that the picture under philippfalkenhagen.de/tiere-2`fills the entire screen. unfortunately it is not like that. When I used 100% of the second code, I could not even access my website until I reset the code.
Since you are dealing with a background and not a figure itself, try to use background-size: 100% 100% and background-repeat: no-repeat.
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
background-size: cover;
will help you to solve this issue.
updated:
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
background-size: cover;
}
This is my functions.php folder:
https://we.tl /t-g7Mvc2EbC6
I suspect that I have to put the code here, but I do not know where.
I downloaded a free css/html template for a work, but I have a massive problem... I tried to change the background, but even if I saved and I deleted (yes, I did erase the previous image from my PC!) it still didn't change.. I tried to define the background directly in the html, but then it hasn't shown any photo as a background. What is the problem?
I searched for methods, but none of them worked.. I tried to analyze with the Inspect function on the page, after it had loaded, and if I changed the code in the console, the background changed. Even though, if I replaced the css file with the one I made in the browser, the first image came back, I think I can't get rid of it ever...
What I want:
.main-home {
background: url('../images/background.jpg') no-repeat;
height: 100vh;
}
<section id="home" class="main-home parallax-section">
<div class="overlay"></div>
<div id="particles-js"></div>
</section>
And the code my browser shows:
.main-home {
background: url('../images/home-bg.jpg') no-repeat;
height: 100vh;
}
I expect to see the background.jpg as the actual background of the site, not this... And yes, I saved the css, I refreshed, tried other browsers, other stylings etc
Use property !important it's allows you to increase the priority of style.
.main-home {
background: url('../images/background.jpg') no-repeat !important;
height: 100vh;
}
try add background-size and background-position
.main-home {
background-image: url('../images/background.jpg');
height: 100vh;
width: auto;
background-repeat: no-repeat;
background-size: center;
background-position: center;
}
maybe your section id which is #home have another CSS. or please try using !important. like as below
background: url('../images/home-bg.jpg') !important;
Look every css rules in the css file containing the image path
'images/background.jpg'(eg:).
Sometimes the image may be called from different css rules, like from
media query part.
Open Chrome inspector Network tab and check the Initiator column
against the 'images/background.jpg' image request. Hover on it and
it will show the code that triggered the image request.
Example, if the image was triggered from a JS file the particular line
that caused the action will be shown in the Initiator section.
Also just as like every time, Clear Cache.
i want to put full screen background into my personal Wordpress site, and having some issue with it. I tryed to insert fullscreen background in this way:
body {
background-image: url(https://testsite.com/wp-content/uploads/2018/04/Backround5.jpg) !important;
background-size: cover !important;
}
but when load the site, it shown background in full size for second and after that back , again to corners background.. How to set background image to show in full size, including page content? Affected URL. Thanks in advance.
As previously mentioned, the reason why this is happening is because you have other elements that have backgrounds which are being rendered over-top of your body.
There's a background:black being assigned to a number of your elements. I've done a live inspection and edited a number of them to have background:transparent !important, to override the setting in order to display the background from the body.
You will need to go through your site, much like I did in screenshot provided below, and you'll have to find out which elements have a background, and set their background to transparent.
What I've done to remove the backgrounds from those two elements on your homepage is:
A)
#media_image-2 {
background: transparent !important;
}
.widget-odd .widget-last .widget-first .widget-1 .def-block .widget .clr .widget_media_image {
background: transparent !important;
}
B)
.ult_tabs .ult_tab_min_contain.tabanimate {
background: transparent !important;
}
Once you've eliminated all of the backgrounds on the elements in front of your body, you will be able to see your main background just like in the screenshot provided.
EDIT (In addition to previous solution):
If the intention is to create a full-parallax style background where the background is more or less fixed in a position regardless of where you're scrolling... add this to the CSS of your body:
background: url(yourbackground.jpg) no-repeat center center fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
try this on body for background
background-attachment: fixed;
and for others elements
.ult_tabs .ult_tab_min_contain.tabanimate{
background-color: transparent !important;
}
Hi Guys Im using this class to put a responsive image as a background for a div, it works well and it is responsive . the only issue I have is that the image is not shown completely, I mean it is a large image, it is centered and everything is correct except that I can't see the top and the bottom of the image, what can I add to see this large image fully and keep the responsive behavior?
.bg {
background-image:url("image local url");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
You must put the actual img tag with the correct image and hide it with css. Something like this:
img {
width: 100%;
visibility: hidden;
}
With this method, the actual img will resize the container to the proper content so that it always fits the image and you will get the quality of the background image. Let me know if this works
every time I scale the size of the browser to a mobile size, the head and the body gets the same background twice. I assume the problem is with the css, therefore I attach the part of the css:
also my header is an a PHP include.
html, body{
background:url('background.jpg') center no-repeat;
background-size: cover;
margin:0;
padding:0;
}
if anyone can see where the problem is, that could be great.
thanks.