I want to create a background with repeated image using CSS
background: url(../images/bg.PNG) repeat;
The problem is that the images are very close to each other, how can I add a padding for every image?
html {
background: white;
}
body {
width: 639px;
height: 280px;
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG) silver;
background-repeat: space;
border: 1px dotted red;
margin: auto;
}
Don't think this is possible, can't you add a transparent space in bg.PNG ?
You cannot have spaces between the background images. But you can modify your image to have the spaces you want.
Related
I have an 256x256 image called myImg.png. I want to make an hr element that uses repeating 16x16 versions of myImg.png.
My CSS so far:
hr#target {
border: 0;
height: 15px;
background-color: #333;
background-image: url(myImg.png);
background-repeat: repeat-x;
overflow: hidden;
}
But this only shows two repetitions of my image at the full 256x256 size where I can only see 15px of it.
How do I make an hr where the background image is a row of small versions of myImg.png?
Use background-size as in:
hr#target {
border: 0;
height: 15px;
background-color: #333;
background-image: url(myImg.png);
background-repeat: repeat-x;
background-size: 16px 16px;
overflow: hidden;
}
As #bjskistad mentioned, you should really be using an image that's already sized correctly.
The idea was to make the not valid error tip that comes up when people fail to fill out a required field show up like a speech bubble. So the arrowhead image shows in the center and underneath the text and would point into the field that they missed.
Fiddle here
HTML:
<span class="wpcf7-not-valid-tip">Please fill the required field.</span>
CSS:
.wpcf7-not-valid-tip {
background: red;
color: white;
padding: 10px;
width: 100px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url('http://s24.postimg.org/qacevkf7l/green_error_arrow.png');
}
As you can see I have a background color and the arrow image that needs to sit in the middle of the element and below it but, of course, if you position it using background-position, the image is hidden as it cannot overflow outside of the element itself. This would be easy if I could easily edit the HTML but I would prefer not to as I am using a plugin and want to be free to update the plugin in the future.
QUESTION:
Is there a pure CSS solution?
If not (and I suspect there isnt) what is the cleanest way to solve this issue? Would I use add_filter to alter the html to put a div around the tooltip that i could then add the bg image to? Something with css "content:", a js solution?
Got the answer elsewhere.Will accept unless someone can think of something better.
http://jsfiddle.net/D2KFX/2/
This works perfectly using CSS (albeit adding content with the content: declaration) by drawing a triangle with borders instead of using an image for it.
CSS
.wpcf7-not-valid-tip {
background: red;
color: white;
padding: 10px;
width: 100px;
}
/* Updated code */
.wpcf7-not-valid-tip {
position: relative;
}
.wpcf7-not-valid-tip:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 0, 0, 0);
border-top-color: red;
border-width: 10px;
left: 50%;
margin-left: -10px;
}
I'm having this very annoying problem that I've tried to figure out for the past few days. I've even read every possible solution on Stackoverflow, but nothing works!
I have this code in my HTML:
<div id="picture">
<div class="picture-1"></div>
<div class="picture-2"></div>
<div class="picture-3"></div>
</div>
And this code in my CSS:
#picture {
height: 250px;
border-top: 1px solid #ffefaf;
border-bottom: 2px solid #ffffff;
clear: both;
}
.picture-1 {
background: transparent url('images/view.png') left top no-repeat;
}
.picture-2 {
background: transparent url('images/plant.png') left top no-repeat;
}
.picture-3 {
background: transparent url('images/view.png') left top no-repeat;
}
The pictures are in right folder, the names are right, and yet they won't work. What could be the problem?
Your picture DIVs have no dimensions. They do not automatically set their size to the image, like an IMG tag does. You need to set this in the CSS using width: and height:.
I think the problem is that your inner divs don't have a size so they try to add the following lines to your css:
#picture > div {
width: 200px;
height: 200px;
}
Add #picture div{height: 250px;}
Js fiddle for your answer-> http://jsfiddle.net/niteshp27/xkLd7/
Here is the css part:
#selectTagId{
background-color: transparent;
color: white;
background-image: url('images/img01.jpg');
background-position: right;
overflow: hidden;
}
The image path is correct. But the image isn't shown. Instead, the background is white? Ughhh how to solve this?
For me, it works with an absolute img path. See http://jsfiddle.net/9qf59/2/
Keep in Mind, that relative paths in css can lead to some odd effects. they are relative to the css file, not the document.
Did you apply this style to a div? if so, you must specify width and height of that div:
#selectTagId{
background-color: transparent;
color: white;
background-image: url('images/img01.jpg');
background-position: right;
overflow: hidden;
width: 200px;
height: 200px;
}
On this website as you can see, the white background doesn't fit the text (content)... How can I get it to do so? This is the CSS... But it doesn't seem to be responding:
.entry {
margin:0 0;
padding: 0px 5px 5px 5px;
width: 680px;
}
Thanks - Tara
Your background is an image:
background: url(images/single.jpg) repeat-y;
background images can't scale.
Remove the background image, and give the single class these additional rules:
overflow: auto;
background-color: white;
The white background that I think you're asking about is actually a 630px wide JPEG image.