<div class="tp-bgimg defaultimg " data-bgcolor="undefined" style="background-repeat: no-repeat;
background-image: url("https://ifycc.org/wp-content/plugins/revslider/admin/assets/images/transparent.png");
background-size: cover; background-position: center center; width: 100%; height: 100%;
opacity: 1; visibility: inherit; z-index: 20;" src="https://ifycc.org/wp-content/plugins/revslider/admin/assets/images/transparent.png">
</div>
I have this code added by the slider revolution. I know they used transparent.png as a background image but still, SEO analyzers are giving me the warning to add alt attributes to these images. I think it's because they've also added an src attribute. Can anyone please guide me to fix this problem.
You need to edit the slide and under main background source settings there is a Textbox to enter Alt texts.
Was facing the same problem. However, when I downloaded Rev Slider PNG image and uploaded it as normal bg (with repeat) it has solved the problem as I have given ALT in Media Library itself.
Related
May I ask on how to add photo background on my website using VS Code?
I tried checking in yt but its not background, it just add up to my website as photo alone.
In css:-
background-imge:url("");
i think this maybe helpful for everyone.
using css background-image: url("url") // it is the best practice
but you will have to also set some addtional css properties like
.div{
background-image: url("../images/demo.png");
background-repeat: no-repeat;
background-size: 300px 400px;
background-origin: content-box;
background-position: center;
}
try these
the url can be a link to some hosted image file or
it can be a local image as showed in the example try these
Accept the answer if this helps
So, I'm planning to give a div a background image.
Here's the path for the picture i want to use :
website\images\logo.png
And here's the path for the html and css file :
website/index.html
website/style.css
Here's the html code :
<header>
<div class="logo"></div>
</header>
Here's the css code :
header .logo {
width: 45px;
height: 40px;
background-image: url('../images/logo.png');
}
But the image still won't display in the background of the div and instead I get this error when i inspect and click the consol tab :
Not allowed to load local resource:
I also tried different variations such as :
background-image: url(../images/logo.png);
background-image: url(./images/logo.png);
background-image: url('./images/logo.png');
background-image: url('/images/logo.png');
background-image: url(/images/logo.png);
background-image: url('images/logo.png');
background-image: url(images/logo.png);
and all of them doesn't seem to work
I also tried to give the div a background color and it seems to work just fine.
What is the solution? Thank you
I think this might be the issue with getting source from localhost, if you are using VScode then try installing this extension called Live Server May be, it could fix the issue. take a look: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
I added a logo I found online, but it seems if I try to change the background color of my page it leaves it unaffected. (the logo background is white, the question is can I only add the logo itself from the picture).
Anything I can do to change it?
<div class="logo">
<img src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/11/gym-logo.jpg" alt="Gym logo" id="header-img">
</div>
body {
background-color: #ced6e0;
}
img {
position: relative;
right: 260px;
bottom: 50px;
width: 25vw;
}
https://codepen.io/picklemyrickle/pen/XWjzyvb
Thanks.
CSS can do a certain amount for you, depending on exactly what you want.
As your logo is black and white we can use one of the blend modes (multiply) to remove the white - by keeping the background color - and removing the background color, as it multiplies with the 0s in the black.
Here is an example of using background-blend-mode which changes all the white bits on your image to your chosen background color. If you want to keep the image in an img div (there is probably no need, but just in case) then you can investigate mix-blend-mode instead.
Here's a snippet:
.logo {
background-size: contain;
background-repeat: no-repeat no-repeat;
background-position: center center;
background-image: url(https://i.stack.imgur.com/jn3XU.jpg);
height: 200px;
width: 200px;
background-color: #ced6e0;
background-blend-mode: multiply;
}
<div class="logo"></div>
The logo you are attempting to show is a jpg file. JPG files do not support transparency. PNG files do however.
The image you're using is a JPG, which does not support transparent pixels (alpha channel) - unlike the PNG or WebP image formats. You'll need to remove the white background from your image using an image editing tool (like Photoshop, or an online alternative). Once you've done that, save your new image as a PNG or WebP, and the image will automatically let through any background colour behind it on your HTML page.
There are many online image editor tools (Google will show you many options), and also free alternative tools to Photoshop, such as Gimp, which you can download for free from https://www.gimp.org/.
Your logo looks very simple, as it's only using black shapes, so if you have access to the SVG format you can use that one, and removing the background from the SVG is as simple as editing a text file, which you can do in your code editor.
you can use the CSS property mix-blend-mode, but its only currently supported on Chrome, Firefox, and Safari, check this out. https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
mix-blend-mode:multiply;
If you convert your logo to an SVG image, you can change the background color easily with CSS. Simply add a class or id to the SVG element:
<svg class="red-background" viewBox="0 0 100 100">
</svg>
Then set the background color to any color you want or set it to transparent using CSS:
.red-background { background: #f00; }
I have a HTML page that tries to display some icons from a sprite image.
I added the css file, and also put the sprite image in the current working directory. For reference, one of the icon has the definition like as shown below,
.locicon{
background-position: -61px -110px ;
width: 20px;
height: 20px;
background: url(htsprite1.png) no-repeat;
}
Problem: However, when the page is loaded, the icons are not getting displayed.
When inspecting on chrome and firefox, I can see the sprite image, and this is the runtime definition of the class locicon :
.locicon{
width: 20px;
height: 20px;
background: url(htsprite1.png) no-repeat;
}
Everything except the background-position. Why is it happening like this?
I checked if this property is overriden somewhere and couldn't find any such instance while inspecting on the element.
Note: Before posting here, I even tried with a plain HTML file , including the css file, and tested, still the same issue .
background-position is getting removed at runtime!
Note: The Sprite wont appear in my case even after resolving this because of this linked issue, which is rectified now : Just for reference: CSS sprite not appearing in Firefox, but displaying in Chrome
You background-position is overwritten by background. Try to set the background-positionafterwards:
background: url(htsprite1.png) no-repeat;
background-position: -61px -110px;
A cleaner solution would be to set the background properties separately:
background-image: url(htsprite1.png);
background-repeat: no-repeat;
background-position: -61px -110px;
I was wondering how hard it is to make a class for downloads that places an icon right before the text and both text and icon are part of the link to the attached file. Is there a simple way to do this with CSS?
Assuming that all links to downloads are a elements, of class-name 'downloadLink':
.downloadLink {
background-image: url(path/to/image.png);
background-position: 0 50%;
background-repeat: no-repeat;
}
If those links are of the format:
document.pdf
image.png
Then the css:
.downloadLink[href$=pdf] {
background-image: url(path/to/pdf_background_image.png);
background-position: 0 50%;
background-repeat: no-repeat;
}
.downloadLink[href$=png] {
background-image: url(path/to/png_background_image.png);
background-position: 0 50%;
background-repeat: no-repeat;
}
Will give specific backgrounds to links with a href attribute that ends with pdf or png. This approach is based around CSS3's attribute-selectors, which might reduce cross-browser compatibility but, according to Quirksmode's compatibility table not by much (basically everything above, and including, IE7 should support this (albeit it doesn't specify which of the selectors are supported) in IE or other browsers).
References:
attribute-ends-with $= selector.