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;.
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.
If I try to show an image after including my functions.php file into my style.php file, it will not show. When I delete the functions.php file, the image shows.
<?php
header("Content-type: text/css; charset: UTF-8");
include "inc/functions.php"; //when i delete this line, then the image will show up, but if i don't then the image won't show up.
?>
body {
color: #000;
background-image :url(http://127.0.0.1/niche/template/img/bg-image.jpg);
background-repeat: repeat-x;
background-size: cover;
font-family: 'Squada One', cursive;
}
If it is just the actual CSS you are after then why are you calling functions within it? Have you tried the inspector tool to see if the CSS is actually showing and whether something within the function file is outputting some data which is making the CSS file invalid therefore not working correctly
Surround your css with style tags
<style>
body {
color: #000;
background-image :url(http://127.0.0.1/niche/template/img/bg-image.jpg);
background-repeat: repeat-x;
background-size: cover;
font-family: 'Squada One', cursive;
}
</style>
I was wondering if anyone can help. I am trying to add PHP code, which is retrieving an image from a database, into CSS.
I have the small section of CSS code on my example.php page and need to have different images for backgrounds depending on what variables were posted to the example.php page.
The terrible code that I have come up with is as follows
<style>
.par-surround {
background-repeat: no-repeat;
background-image:<?php <img src=<?=$subject['picture']?>border="0" width="740px" height="auto"/> ?> ;
background-position: center top;
}
</style>
I don't know if this can be done or if I have to do it a completely other way. Any help would be appreciated, thank you.
It can be done but you need to output proper css to do this.
background-image does not take (invalid)html image tags:
<style>
.par-surround {
background-repeat: no-repeat;
background-image: url(<?=$subject['picture']?>);
background-position: center top;
}
</style>
The reasodin is correct. You just ned to have a valid PHP code:
<style>
.par-surround {
background-repeat: no-repeat;
background-image: url(<?php echo $subject['picture'] ?>);
background-position: center top;
}
</style>
Also make sure $subject is defined and has a value, BEFORE you output the CSS code.
I added a PHP mail form to my website, upon page load after completing the email form my footer is not loaded the tags do not even show up in inspect element.
I have the pages linked below.
edit:footer only doesn't appear when there are errors when it is submitted.
Before and after form submission where you can see the footer
http://andytest.herokuapp.com/contact.php
Any help is appreciated because I have no idea why it is doing it.
The footer is showing for me and this CSS class is applied to it:
#footer {
background-image: url("../../images/bottombar2.jpg");
background-repeat: repeat-x;
clear: both;
height: 50px;
min-width: 1200px;
width: 100%;
}
and this is your footer code (using firebug)
<footer>
<div id="footer"></div>
</footer>
as I can see you are using HTML5 <footer> tag maybe you are viewing your site with a non compatible html5 browser.
or maybe you want to set a white background for your footer as same as your menu then just update your css like this:
#footer {
background-color:white;
border-top:2px solid orange;
clear: both;
height: 50px;
min-width: 1200px;
width: 100%;
}
I found the error the page was getting killed before it could finish loading by the die(); which stopped the page from finish loading. Thanks for the help and leading me in the right direction saying it was in the php
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.