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.
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.
Ia have one weird issue with my Wordpress site. i have problem with header, it show different on this page and show normally on this page for ex. On bad page header image is little moved down. i checked the CSS class:
.full_width_photo {
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 380px;
width: 100%
}
ad tryed to add margin-top:-80px; but just move image inside container, not entire block as i want. Can someone to give me some tip? On image is shown the issue.
Thanks.
Look at the tag style attribute of the page, it has "padding-top:40px". You can just remove it to fix.
There are 3 CSS issues:
There is an inline margin-top: 98px; on the <body> element that needs to be removed. That will put the banner image in the right place.
The class sticky_header needs to be removed from the <body> element.
The element <div class="topbar vcenter transparent"><div class="container"><div class="row"><div class="col-md-12 col-sm-12 hidden-xs hidden-sm text-center"></div></div></div></div> needs to be removed or assigned a style of display: none;.
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.