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.
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'm trying to make this product page and have the items all in there but the problem is the pictures for each item are different size. I tried using Hard Crop but it didn't work.
I want the best solution for this that takes up the least amount of time and is the easiest.
http://burnabycitycomputers.com/shop
Change the style to the woocommerce.css file in line no.48
.woocommerce .page-wrapper img {
height: 150px;
width: 100%;
}
Add this style to your style.css file
.woocommerce .t-entry-visual {
height: 150px;
width: 100%;
}
If no tricks worked out put an !important over to your css and this should make a trick for you. I have not used important if needed you pursue that.
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 attempting to build a draft version of a website for the police service of a small nation using WordPress and the Webfolio Theme by Site5.com.
I've encountered a problem whereby if I select to use an image for the background of the theme using the theme's customization options/WordPress options, the black header that is repeated at the top at either side of the header does not display.
Now when I add the background image it looks like this
I tried reading the Site5 documentation but it doesn't have information that helps. Their support forums also seem quite inactive which is why I decided to ask here.
I've had a look at the CSS file and found the following:
* { margin: 0; padding: 0; }
body,html {
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#333;
background:#EFEFEF url(library/images/bk_body.jpg) repeat-x;
}
When I add the background image the CSS is still the same so I'm not sure how WordPress themes implement optional background images. I've attempted to fiddle with it to no success, but my knowledge of CSS is limited.
My question is, is it possible to use the background image while maintaining the top header bars as in the demo site? If so, could anyone guide me on the way how?
Edit: I've also tried using the built in Background Image options but all of them have the same result.
The black bar is actually a background image applied to the body. You coud use multiple backgrounds to get the effect you're after:
body, html {
background-image: url(library/images/bk_body.jpg), url(your_image.jpg);
background-repeat: repeat-x, no-repeat;
}
I think that your problem is the background-image in header
header {
background: url(library/images/bk_header.jpg) 100% 0 no-repeat;
/*other css rules*/
}
that refer to style.css row 153
remove that image with a transparent background or something that you want.
e.g. background-color: transparent;
Please remove header image from style.css
header {
background: url("library/images/bk_header.jpg") no-repeat scroll 100% 0 rgba(0, 0, 0, 0);
height: 195px;
padding: 0 8px;
position: relative;
z-index: 99;
}
remove background from header
header {
height: 195px;
padding: 0 8px;
position: relative;
z-index: 99;
}
Im a beginner when it comes to building a site. Thats why i choosed to build with Wordpress.
The thing is that i got i responsive theme that should work with any browser.
I upload a logo by going to appearance>Customize>upload logo.
With Crome it looks great:
But with firefox, Iphone safari and IE it looks bad:
http://imagizer.imageshack.us/v2/800x600q90/838/8tl2.png
I've a Childtheme, and the only code i've put in is to get the logo to display a bit more towards the middle:
#import url("../realia/style.css");
.logo-wrapper { position: relative; left: 10%; }
Why is it looking like this, ive tried with .clearfix codes and to change the image height etc.
Have a great day and thank you in advance!
Just remove the height from your,
.logo class
Height is causing issue on Chrome as well, while resizing the window. Image is not able to resize. So, remove the height in px.
Good luck!
I have just checked your theme out, and noticed this class:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
float: left;
height: 90px;
line-height: 90px;
margin: 0;
}
Remove the height: 90px and it should look good in all browsers!
Remove float: left from the logo.
e.g:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
height: 90px;
line-height: 90px;
margin: 0;
}
I have recently faced this issue when my logo was not showing up properly in internet explorer, try with this code hope this will work.
max-height: 100% !important;