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.
Related
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
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%; }
I'm trying to get the following wordpress-based site to have a single continuous background image:
Startup Roadmap | Idea Generation
I can change background of individual elements but have not found a way to have a single background stretching across entire screen like this.
Thanks for your help!
add this CSS to your body class
body.custom-background {
background: url('/wp/wp-content/themes/twentyfourteen/assets/BG.jpg');
background-size: auto 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
You need to look into the background property of CSS, and then apply it to the parent html element that contains everything. For the website you stated it would be the "body" element.
Look into the different properties of background here:
http://www.w3schools.com/cssref/css3_pr_background.asp
here's an example I use over and over again:
/* Global Container */
.globalContainer {
width: 100%;
background: url(../PATHTOYOURPHOTO) no-repeat center bottom fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can look up the background-size property yourself, but "cover" generally scales the photo to fill the entire screen and not stretch. However based on the screen size some parts of the image may be left out.