working with wordpress, I have created a page you can see here please do to the Schoonmaakwerk is mensenwerk as you can see it looks like this:
while the image is this:
I want to be able to display the full image. here is my code for the image part:
#mainSchoonMaker {
background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
if I add no-repeat the image is gone. I want this image to be able scroll able and goes up and dwon with scrolling of the page, anyone any idea how to do this?
Try this one:
#mainSchoonMaker {
background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: auto;
}
Try this code.
#media (min-width:767px){
#pl-4 {
background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
margin-left: -15px;
margin-right: -15px;
}
}
#media (max-width:768px){
#pl-4 {
background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-left: -15px;
margin-right: -15px;
}
}
Are you dealing with featured images in your theme?
If so, the issue may actually be in the code for your featured image within your theme. Thumbnail (featured image) size can be determined within the media settings in your WordPress site, but featured image sizes can also be manually specified via functions. Here's the developer documentation for building-in functions like this.
https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
The image may end up being the wrong size, because WordPress is giving you a custom size automatically due to either your media settings or a theme-specific function.
Related
I have a problem with the image on main page of my portfolio website. The image is expanded on mobile devices. Here I upload my CSS code.
height: 85vh;
min-height: 100%;
background-image: url('./ZdjeciaPortfolio/mainPhoto.jpg');
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
What can I do? I saw other answers on stack, but all doesn't work
Image
I'm looking for so long to fix my issue with an full image background in wordpress and the image is awesome but is will not resize on browser and devices. Is there any css trick to do the job?
Here is my website http://www.social-boost.nl also the sign up form is important...... I hope somebody can help me out with this.
What about cover (CSS):
html {
background: url(wp-content/uploads/2018/02/landingsbnew20182.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Updated answer to overwrite interfering CSS rules:
html {
background: url(wp-content/uploads/2018/02/landingsbnew20182.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;
}
I have a site on which the background of the image gets cut off even if the height is increased. How can I have the top area of the image on the page too?
.top-area {
background: url(../img/matt.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 677px;
}
Change .top-area to this. You're using fixed background attachment, so you need to modify the background position to clear your navigation (which is 78px tall), so move the background image down 78px. I also added a margin-top of 28px to .top-area so the div will clear your header, too.
.top-area {
background: url(../img/matt.png) no-repeat center 78px fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 677px;
min-height: 100%;
margin-top: 28px;
}
It's happening because you used navbar position fixed. if you want to use this add
body{padding-top:78px;}
or
.top-area{margin-top:28px;}
I've looked at a other similar thread and can't seem to find the answer.
Look at the shield background image. It's cut off slightly at the top and bottom... I've tried a lot of things but I can't get it to display properly.
Here is the site http://revivedlife.com
Here's the css for the background image:
.hentry h2 {
background: url(images/post_element.png) no-repeat 0 -4px;
display: inline-block;
}
Try replacing your existing css with this:
.hentry h2 {
background: url(LOCATION HERE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make sure the background image looks correct, even on old browsers.
Have you tried background-size: cover;
I think the following code may help you :)
.hentry h2 {
background-attachment: fixed;
background-image: url("http://revivedlife.com/wp-content/uploads/2016/03/bg_body.jpg");
background-position: left top;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
have an image uploaded to S3 here:
https://s3-eu-west-1.amazonaws.com/buildsanctuary/images/1458083137.png
You can see that the browser is showing it in the correct orientation.
However, if you check this fiddle: https://jsfiddle.net/2oz06kv4/1/
The orientation is incorrect.
How can I remedy this?
The code for how im showing this image:
.profile-image {
height: 200px;
width: 150px;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
background-color: blue;
}