I want to set an image as a background of a heading, but only in the empty area. I do not want to display any background where the heading text is.
So, I have following HTML for heading:
<h2><span>Some text</span></h2>
h2{
background: url("image.png");
}
The problem is that, I do not want to display this heading background in the span, instead I want the span to adapt the background image of the page (parent element). I can not set a specific specific background for the span because it won't match with the page background. So how can I solve this?
You need to coordinate the background position of the image with the text. I'm not sure what your exact layout is, so adjust your values accordingly.
CSS alone cannot detect where your text is, or how bit it is. You need to use JavaScript to do that.
h2 {
background: url(image.png);
background-repeat:no-repeat;
background-position:5px 5px;
padding-left:30px;
}
You can use psuedo element to achieve this,
h1:before
{
content:url(your_img.jpg);
}
Related
Looking for assistance in modifying a WordPress page template that allows users to submit a listing/post of a venue and include a image that is used as a background image. The issue is that when a user submits an image using the custom field called "listing_banner", depending on the background image submitted with the listing by the user, the image submitted may make it difficult to read the white text in from of the background image. Here is a link to a sample listing: http://www.myvipclubs.com/test/city/detroit/listing/v-at-mgm-grand-detroit/
Looking for assistance to add one of the following to the existing code:
an additional div tag that refers to the Wordpress custom css file that includes a css element that points to a transparent image (.png) that can be placed in front of the listing_banner image when a user submits the background image (http://www.myvipclubs.com/test/submit-listing/).
Issue: When using div class .full_detail_overlay_image, the transparent image is over the listing_banner image and the text. Only want the image to be darker, not the text. Assuming need to have a class where it clears the css style and does not affect the text.
Modify the existing css. style for the background image (.full_width_detail) that includes a filter to change any image submitted by the user.
Using either possible solution looking for someone to assist in getting the right code using either css or a transparent image as an overlay.
You don't need an extra div element, you can do this by making use of a before or after pseudo element.
I've very quickly put together an example jsFiddle using the css below.
.full_width_detail:before {
height: 600px;
background-image: url(http://images4.fanpop.com/image/photos/16100000/Cute-Kitten-kittens-16122946-1280-800.jpg);
background-size: cover;
position:relative;
padding: 50px;
}
.full_width_detail:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.15);
z-index: 1
}
h1 {
text-align:center;
color: #fff;
z-index: 2;
position: relative;
}
You'll need to make sure that your div element is relatively positioned and that the pseudo element .full_width_detail:before is absolutely positioned and given a z-index higher than that of the div so that it sits above.
In this example I've used an rgba background for the :before element. The .15 value can of course be changed to make the tint more opaque should you wish. If you really must you can use a transparent png instead of the rgba background, but personally I like to use rgba with a fall back if I need to support older browsers.
The content of the div in this case the text needs to be relatively positioned and have a z-index higher than .full_width_detail:before.
In my html content, I want to place an image at the bottom right corner of some container. While the image, like all images, is square in that it has a height and width, the actual visual image that the eye sees is not square. It could be a ball for example or a triangle. I also want text in this container but when the text is a lot, I would like it to flow around the edge of the visual image and not along the actual rectangle edges. Is this possible? Does html or css have some construct where you can setup the border (or edges) where text should stay away from?
If you want to solve the problem only with css and html you need to programming the page with many paragraphs (<p> tag) with various dimensions and set the image like a background image of the div wrapper.
#wrapper {
width:500px;
height:500px;
background-color: #fff; /*Default bg, similar to the background's base color*/
background-image: url("image.png");
background-position: right bottom; /*Positioning*/
background-repeat: no-repeat; /*Prevent showing multiple background images*/
}
After that set any paragraphs with custom width to set the text around the image.
Unfortunately i don't know any other "automatic" solutions.
Maybe, you can find a valid plugin here:
check this another stackoverflow question
I need to use sprites as a background image for element type of <a> tag.
The problem is that I need to display only one part of the sprite (for example 17px x 17px) and container can be higher. In this case, instead one my background image and than empty space, I get image I wanted to have and under that next image (which I don't want to display).
Is there any way to limit the height and width of the square on sprite i would like to display? I cannot set just height and width for the whole <a> tag.
Example:
And what i would like to do is not displaying the part from second image which is on the same sprite (its' only example; in the project i display text in the whole line, so changing width is not a solution)
Set the height and width for the sprite
a {
display: block;
background: url(sprite.png) no-repeat;
height: 17px;
width: 17px;
}
EDIT : after OP put a screehshot
You will need to use the :before pseudo selector along with the content property
Build a demo at http://jsfiddle.net/SqbnC/
a:before{
background:url('http://pf.staticfil.es/hp/img/sprite2.png');
width: 22px ;
height: 22px;
display:inline-block;
content:"";
}
I have specified the height and width as 22px because that's the dimension of the icon that i show from the sprite
You should use background position in your css class.
As an example..
.classsample{
background:url('YOUR IMAGE PATH') no-repeat 0 -20px;
height:10px;
width:10px;
}
Update the value 0 and -20 based on your image portion which you wanted to show in the div. And finally you should not use IMG tag on your Anchor tag, you have to pass the image via CSS class as above.
<a class="classsample" href="#">TEXT</a>
Use padding if there are no text in the Anchor tag.
I have some titles layouts in my css file, like h1 and h2. Sometimes I need a simple title like: <h1>Most readed</h1> and some times I need to add an image to the begining of the title like: . How can I do this using a class, like <h1 class="with_image_1">?
The best way of doing this would be to set the image as the background-image and add padding to move the text out of the way, so assuming your image is 50 px wide:
.with_image_1 {
background: url("/path/to/image.png") left no-repeat transparent;
padding-left: 50px;
}
You can then mess with the padding and the image placement to get everything lined up nicely
you just use a background image in your css:
.with_image_1 {background-image: url(some/image/path.png);
width:100px; height:100px;}
you may want to move the text too else it will display on top of your shiny image... to do this put the text in the h1 tag in a span, then shift the span off the screen:
<h1 class="with_image_1"><span>Title</span></h1>
.with_image_1 span {position:relative; left:-2000px;}
I want the style to apply on the "a" elements, and not the img.
Here's an example:
a:hover {background: #555;}
I tried to do something like this:
a:hover img {background: none;}
though I knew it's not going to do anything.
The solution I found in this question didn't work for me, because the "display: none" is moving the image when hovering.
The img is inside the anchor, so wouldn't the background be outside the image no matter the background in the image element. Does the image have padding, margin or transparency?
I'm not sure what you're asking here.
If you put a background colour on an A tag that surrounds an image you'll never see the background because the image covers it up.
If you want to display the background colour and hide image when you mouse-over you can do it like this (insert your own image dimensions, filename etc.):
a {
display:block;
height:100px;
width:100px;
background-image:url(Images/sample.gif);
background-color:#555
}
a:hover {
background-image:none;
}
a:hover img { background:none }
means that when someone hovers over the A your IMG is in, the IMG background will be set to none--which means it will show your A's background, since it contains the IMG. (IMG is clear, A has background, but IMG is within or 'on top of' A; therefore, we see A's background). If your image is transparent in parts, A's background will show through.
The best solution may be
a {background:#555;}
/* set image to the background color of the layer you want to get back to */
a:hover img { background:#fff; }
The background isn't inherited by the image inside the link. Removing the background from the image doesn't do anything as it doesn't have any to start with.
If you are trying to "punch a hole" in the background where the image is, that is not possible. You would have to put other elements inside the link to fill up the space that is not occupied by the image, and set the background on those elements instead.