I have the image in the correct folder but I want to add a text box on top of an image and I was told the best way to do it is make the image a background image, but when I followed a tutorial it never appeared?
anyway here is my html
<div class="module">
<h2>blah blah</h2>
</div>
and my CSS
.module {
margin: 10px;
width: 1530px;
height: 717px;
display:block;
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
background-size: cover;
position: relative;
}
h2 {
position: absolute;
bottom: 100px;
left: 100px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px PTSans;
}
the image is full width of the screen so I am using container-fluid in bootstrap and the text box will be in the middle of the image.
You may call the local file as background like this:
background: url("file://PATH-TO/file.jpg");
Keep in mind that the string inside parentheses should provide a URL to the file.
Also, you have the option to put a path in it.
background: url("PATH-TO/file.jpg");
Change the backlashes. From this...
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
To this
background: url('C:/Users/Jason/Desktop/champions/images/shop.png');
Cheers.
It looks fine of your css. Try to use firefox or chrome debugger to check if the background image can be loaded or not. Try to change the value of the background-size. Sometimes the background image is too large that you can only see part of it (which may be completely white) on the screen.
Your path is wrong
try this: url('images/shop.png') - if your css is in champions
Related
I have a web page. This web pages references one image file called sprites.png. This file has all of the images in one file. In side of this file I have an image that is 48px x 48px; I'm referencing it in my css like this:
.cell-back {
height:36px;
width:36px;
border-radius:18px;
background-color:green;
}
.play {
width:48px;
height:48px;
background: url('/img/sprites.png') -437px 234px;
}
In my web page, I then have:
<div class="cell-back">
<div class="play"></div>
</div>
As you can imagine, the "play" sprite is larger than the actually space. I'd really like for the "play" image to be 24px x 24px centered within cell-back. But, I haven't figure out how to scale down my sprite image.
Is there a way to do that?
Thank you!
You have to add background-size to it. This way you can scale your shown image.
.play {
width: 48px;
height: 48px;
background-image: url('/img/sprites.png');
background-position: -437px 234px;
background-size: 24px 24px;
}
I saved the image as a transparent png but nothing I can do seems to fix it!?! Any ideas???
It should look like this:
Here is a copy of the image in GIMP showing that it's indeed transparent:
finally, Some good old code:
The Markup:
<form class="search" action="search.php"><input class="search" type="text" name="search" id="searchbox"/></form>
Search Box CSS:
.search, .search:active, .search:focus, .search:visited {
position: absolute;
color: #fff;
top: 3px;
width: 368px;
right: 9%;
font-size: 28px;
z-index: 3;
border-radius: 20px;
/* box-shadow: inset -2px 0px 1px rgba(0,0,0,.8); */
text-indent: 10px;
text-shadow: 0px -2px 3px rgba(0, 0, 0, .7);
background-color: #00D4C7;
}
The Search icon css itself:
Pseudo ::before element
.search:before {
content: "";
position: absolute;
top: 7px;
left: 268px;
background-image: url("images/icon-search.png");
background-color: rgb(0, 185, 171);
width: 46px;
height: 30px;
z-index: 4;
}
Note: If I remove the class search from form, It removes my image, if I remove class search from the input element it still renders with that funky shade over my image...Any ideas?
Edit 1: If I do as suggested by setting the explicit dimensions of the image (as I did for other pseudo elements with no problem) it does not resolve my issue. I've already submitted the project so at this point it's a matter of me wanting to know what happened and how I can fix this. I resorted to a css hack that changed the brightness to a closer match [with a faint outline still 😞 ]
Edit 2: Show me the JS Fiddle!
you did give your image a background-color: rgb(0, 185, 171); what is #00b9ab
and the searchbox background-color: #00D4C7; what is rgb(0, 212, 199)
My image itself was not truly transparent. There is is a small opacity channel that causes that grey haze to appear on a non-white background. I caught wind of this when posting to imgur....and confirmed it for sure when I actually made a copy of the layer (in photoshop) using select by color.
Solution: Check your images...to do this, load it onto a window by itself and set the html body to a non-white color. Wish I thought to do this before submitting this:
This might be happening because your background image size is different than its container's, .search::before, size. And/or because your .search::before background-color is a different hex value.
Try this:
Add background-color: transparent; and background-size: 46px 30px; to .search::before. This will make it so that if your background image is smaller than the container, the rest of the space will be transparent and set the background image size to be the same as its container, which you have explicitly set.
I found that the images that I was getting from the internet were not truly transparent. This website enabled me to get it to work. https://www.remove.bg/ (the image I used had the checkered background to indicate it was transparent, it just didn't work in the img tag until I used that website.)
How can I tint a background image that has transparent sections?
I have tried using background-blend-mode: multiply with background-image and background-color. It works great for opaque images, but does not take the transparency into account, leaving a colored square around the image.
I am using svg images, and could switch to using <img> instead of backgrounds if necessary.
Example:
Left side is my goal, right side is what I get with background-blend-mode: multiply. The base image is a light gray circle, and I multiplied it with red.
Edit: I created a codepen to better illustrate my problem and what I have tried. http://codepen.io/anon/pen/QbbbpZ It has both the original image and my goal (made in Photoshop) on top, with examples of what I have tried below.
Edit2: I'm beginning to wonder if it is even possible to do this with plain HTML/CSS. Would using something like canvas, maybe with shaders, be more appropriate? Is there a library out there for it?
In webkit (Safari, Chrome and Opera) you can use -webkit-mask-image to do the effect.
html:
<div id="blend-mask" class="uiElement uiBG"></div>
css:
#blend-mask {
-webkit-mask-image: url("http://i.imgur.com/JLjAor5.png");
background-color: #f00;
background-blend-mode: multiply;
}
#goal {
background-image: url("http://i.imgur.com/JLjAor5.png");
}
#pageBG {
width: 400px;
height: 400px;
background-image: url("http://lorempixel.com/g/400/200/");
background-color: rgba(255,0,0,0.25);
background-blend-mode: multiply;
color: white;
text-shadow: 0 0 0.25em black;
}
.uiElement {
width: 100px;
height: 100px;
margin: 25px;
display: inline-block;
}
.uiBG {
background-size: contain;
background-repeat: no-repeat;
background-image: url("http://i.imgur.com/rkRJbzH.png");
}
Example working:
http://codepen.io/anon/pen/vONVry
if you want to make it work as well in firefox check this post maybe will help:
Is there a -moz-mask CSS property, like -webkit-mask-image?
As well you can check using canvas to tint, there is this post that maybe can help:
http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/
I'm using SVG files as backgrounds for my HTML elements. It works fine in all major browsers. The problem is my site needs to also work and look correctly in Internet Explorer 9. In IE9 the SVG backgrounds are always "moved" to the right and cut, like below:
The element above is a close link of a modal. Structure and styles of the close link:
HTML
CSS
.aq-modal-close {
display: block;
width: 12px;
height: 12px;
background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
background-size: 12px 12px;
float: right;
margin-top: 5px;
}
The SVG file is bigger than it should, so I use background-size to adjust it. Other SVGs are used the same way. Any ideas what might be wrong? Again, this happens only in IE9.
You can add a background-position with negative values:
DEMO
.close {
display: block;
width: 52px;
height: 52px;
background: url('image.svg') no-repeat 0 0 scroll;
background-size: 52px;
background-position: -10px 0px;
border: 1px solid black;
}
As #zeidanbm stated in the comment above, the answer to the problem was in an old post: Background-size with SVG squished in IE9-10.
Basically, the designer followed the instructions and the SVGs are displayed correctly now in IE9, as background images.
I've used the following code for background image of body tag.
background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
it works in IE,Opera and chrome but doesn't work in FireFox.
I've tried also :
background-image: url("images/taling.gif");
and
background-image: url('images/taling.gif');
but it doesnt work on FireFox
your document body is height=0, and width=0, if you try to give it some height or width the image should be displayed
There is no problem with your CSS. What the problem is most likely the result of is either you are not assigning a width and height to the body tag, you are naming your image incorrectly, using the incorrect extension for your image, or the path to your image is incorrect, but there is also a possibility that you need to add a width and height.
If you use Firefox, you can test what is going on by using Firebug. You right click, and choose inspect element. Once done, in the right column of Firebug, you can see your declaration for background-image. If it says image not loaded or cannot be found, then one of the three things I pointed out above is the problem.
I know you said that the image does show up in other browsers, just not in Firefox. So, consider some modifications to the rest of your CSS. You may not be specifying a browser reset.
Just FYI, you can condense your CSS by doing the following:
background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
to
background: #2e2e2e url(images/taling.gif) repeat-x;
As for the body tag, you may want to add these properties and values:
margin: 0;
padding: 0;
width: 100%;
height: 100%;
Google "CSS browser reset"
One example of a browser reset is the following:
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
The above is the most simple browser reset you can have. It does not take into account ul,ol,li,h1,h2,h3,h4,h5,h6,li,p,a,img,blockquote, etc.
Also, look into using a clearfix.
I could ramble on and on as to why you may be having this problem.
I hope that helps.
Try:
background: url('yourimage.ext') repeat-x;
It works for me.
Edit: to match what you're doing, it should in fact be:
background: #2E2E2E url('images/taling.gif') repeat-x;