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" />
Related
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 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.
I'm reading news on this page mostly on my mobile device:
link
The big banner right of the logo is not scaling properly on the mobile device.
So when you resize the window and make it smaller everything is resizing except the banner.
Im learning php, css and just wondering how this could be solved. Ive checked also on stackoverflow and find something like:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */ }
I've tried this also in the dev. mode of google chrome but it desnt work.
Is this solvable with the provided data from the dev mode?
Code looks like:
<div style="position:relative;
width:728px; height:90px; z-index:10;
background-image: url(http://www.image.jpg);">
Based on your code, the banner is implemented as background image, not an IMG element. To make background image scaled so that it's entirely visible, use background-size: contain. So your user styles could be like this:
.site-header-banner > DIV {
background-size: contain;
background-repeat: no-repeat; // To disable repeating background image.
max-width: 100%;
}
You can use it as a background with the following properties:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
https://jsfiddle.net/alexndreazevedo/xe9tvkyr/
You can define a fixed size to DIV containing image background and change it by media query.
I am using the Electoral template from ThemeForest here, this is the original template. I am trying to use CSS to fade out the edges of the blue image to the right, however the change is affecting the entire container. I've changed the background color to reflect the undesired behavior at the first link.
What I want to do is be able to apply CSS instructions to just the image. This is the section that controls the container:
#hero .q-container {
position: relative;
padding-top: 8%;
background-image: url(../img/sam.png);
background-repeat: no-repeat;
background-position: bottom 30% right 10%;
background-size: 30%;
}
I tried using the following but it didn't work:
#hero .q-container img {
background-color: red;
}
Does anyone have any ideas to fix this? Thanks!
This CSS code does work in all browsers except FireFox. Why ? How can I fix it ?
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
}
Thanks in advance.
EDIT:
Here is the HTML that I want to use:
<img class="img_box" />
When Firefox encounters an image without a source, it replaces the image with its alt text. I personally find this extremely annoying, as it means I can't test layouts unless I specifically create placeholder images, and should those images be unavailable for any reason the layout completely breaks.
Unfortunately, I have yet to find a solution to this problem.
In your case, however, you would be much better off using a div and adding display:inline-block to your CSS, instead of using an image.
solution1:
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
display: block;
}
solution2:
<div class="img_box"></div>