I am trying to get an image behind a video on a wordpress child theme of twenty sixteen.I tried using the following the file path.
background: url('../images/image.jpg’);
I have the image in a
.wp-block-video.aligncenter {
text-align: center;
border-style: solid;
but the image will not appear behind it
I modified the code but to no avail
background-image: {
url('..images/('alliswell.ie_video_2018.jpg');
width:100px;
height:100px;
};
the website is alliswell.ie
Tag 'video' have attribut 'poster':
A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.
Please try the below code :
.wp-block-video.aligncenter
background-image: url(http://alliswell.ie/wp-content/uploads/2018/09/alliswell_ie_caring-forourwater_2018.jpg-e1536244962710.png);
background-repeat: no-repeat;
background-size: cover;
}
In background-image use complete url. background-image: url(../images/images.jpg) unable to find the image path.
this is the answer or it worked for me
..wp-block-video.aligncenter{ background-image: url(alliswell.ie/wp-content/uploads/2018/09/…); background-repeat: no-repeat; background-size: cover; } –
thank you dineshkashera for the answer and everyone else that offered suggestions.
Related
body {
background-image: url(/images/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
For some reason I'm getting this error:
GET http://localhost/images/background.jpg 404 (Not Found)
And also I'm kind of confused why the link is http://localhost/images/background.jpg instead of http://localhost/[project_name]/images/background.jpg
I found the solution.
I don't need to write '/' at the beginning of the path
I need to go up on 1 level in catalog because I'm in css folder
So the path should look like this:
background-image: url(../images/background.jpg);
I want to use a GIF file as a background image on my web page but its not working when I style it in CSS.
CSS
Body{
background-image: url("1554323659436.gif");
background-repeat: no-repeat;
background-size: 50% 50%;
content:white;
width: auto;
}
I have ensured the GIF name is accurate, but the image isn't appearing in the page's background. Can someone help out?
Hope this answer helps. From my experience, gif images or images in general fail to appear when folder structure is not defined properly. Please check a standard format for attaching gif or any image type in html background
body {
background-image: url("[path_to_image]/1554323659436.gif"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Please note, all of the other attributes can be optional except the first one. Good Luck!
I have to set background image for my home page and I have used this css code:
<style type="text/css">
body {
background-image: url('/Images/emma-maersk.jpg');
}
</style>
However, it is not working. Can anyone help me.
Try setting its background-position and background-size:
body {
background-image: url('/Images/emma-maersk.jpg');
background-size: cover;
background-position: center center;
}
Check if the image exists. You can open Network tab in your browser's developer tools and check if this image is loaded properly.
Note that /Images/emma-maersk.jpg is not a relative path and means yourdomain.com/Images/emma-maersk.jpg. For relative path, you should use url('./Images/emma-maersk.jpg').
Also Add below lines in body{}
body{
background-size:cover;
background-position: 0 0 ;
}
And also Check Folder Spell and Case Sensitive.
For your addition, please make background-size: 100%
The shorthand method for setting background is
<style>
body{
background: url('Images/emma-maersk.jpg') no-repeat center center;
}
</style>
use it in CSS3
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}
also add ".." before giving url if it exist in folder hierarchy.
Based on this page :
- http://css-tricks.com/perfect-full-page-background-image/
I have used CSS injector to make my home page :
- http://tailored.bike/
I believe I had this code working properly
.front h1.title { display: none; }
body {background: none;}
html {
background: url(/sites/default/files/u44/framed_home_2013_10_19.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then for some reasons I had to change the domain name and I can't have it work back.
Does any one have an idea ?
Regards
Julien
edits:
Does nok work neither with full http://... image url.
It works if I uncheck "Preprocess CSS"... I let it this way for now.
Just tested in Chrome and your background image reference is still mapped to your old domain. Your CSS should read:
html {
background:url(http://tailored.bike/sites/default/files/u44/framed_home_2013_10_19.jpg) no-repeat center center fixed;
/* Other CSS stuff */
}
Fix that reference and the image loads fine.
I'm have two images which are both the same, one of which I edited the opacity to 90% in photoshop. My original image renders fine while my edited image(s) render all white. I changed nothing in the code except the actual file itself. Maybe somebody could shed some light here. Thanks
Working CSS
#home-header {
background-image: url(firepit2.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 841px;
display: block;
}
Non working CSS
#home-header {
background-image: url(firepit2.psd);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 841px;
display: block;
}
I even tried saving the new file as a jpg to see if the issue was with the psd extension and it still did not work. Maybe I need to convert it?
Save the image as png if it has a transparency
I think that if you want a show a image no background color, you can use format png, or other option for solve for example if you want change the color for your picture in focus, you can use javascript simple code.
<img src="<?php echo $this->getSkinUrl("image.png"); ?>" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1" />